//Bt afficher le plus à gauche : Cette var est declarée par le php
//var deroulant_encours = 1;
var deroulant_encours;

//Pour le clic, on deplace automatiquement jusqu'au bt cible
var deroulant_cible = "";
var deroulant_sens = "";
var deroulant_clic = false;

//Nb total de bts
var deroulant_nb;

//Nb de bts visibles
var deroulant_limite= 4;

//Tailles des bts
var deroulant_btsW = 172;
var deroulant_btsH = 32;

//Marge entre les bts
var deroulant_marge;

//xml
var deroulant_xml_bts;

//Etat fleches
//non actives pendant les transitions
var deroulant_fleches = true;

var deroulant_flash_isinit = false;


function deroulant_is_IE6(){
	
	var IE6 = false

	var strChUserAgent = navigator.userAgent;
	var intSplitStart = strChUserAgent.indexOf("(",0);
	var intSplitEnd = strChUserAgent.indexOf(")",0);
	var strChMid = strChUserAgent.substring(intSplitStart, intSplitEnd);
	
	if(strChMid.indexOf("MSIE 6") != -1) IE6 = true;
	
	return IE6;
	
}



function getXhr(){
  
  if(window.XMLHttpRequest) xhr = new XMLHttpRequest(); 
  
  else if(window.ActiveXObject)
   {  
    try
     {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
     }
    catch (e)
     {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
   }
  else 
   { 
    xhr = false; 
   }
   
}


function deroulant_init(){
	  
	  deroulant_marge = ( document.getElementById("deroulant_c").offsetWidth - deroulant_btsW * deroulant_limite ) / deroulant_limite;
	  
	  xhr = getXhr();

	  if ( getXhr() != false ){
		  
		  xhr.onreadystatechange = function()
		   {	
			
			if( xhr.readyState == 4 )
			 {

				var deroulant_xml= xhr.responseXML;				
				var deroulant_xml_root = deroulant_xml.getElementsByTagName("racine")[0];
				deroulant_xml_bts = deroulant_xml_root.getElementsByTagName("bt");
				
				//Nombre total de bts
				deroulant_nb = deroulant_xml_bts.length;
				
				//Si il y a moins de bts que de places
				if( deroulant_nb <= deroulant_limite ){
					document.getElementById( "deroulant_g_lien" ).style.display = "none";
					document.getElementById( "deroulant_d_lien" ).style.display = "none";
				}
				
				//Si il y a plus de bts que de places, il faut qu'il y ait minimum 1 bts de plus de chaque coté pour les transitions de sortie
				if( deroulant_nb == deroulant_limite + 1 ){
					
					//On duplique les lignes xml pour deroulant_nb >= deroulant_limite + 2
					multiply = Math.ceil( deroulant_limite / deroulant_nb ) + 1;
					deroulant_Multiply( multiply ); 

				}
				
				//lancement
				deroulant_creer();				
	
			 }
			 
		   }
		  
		  xhr.open( "GET", "deroulant.xml", true );
		  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		  xhr.send(null);
	  
	  }

}


function deroulant_Multiply( multiply ){
	
	var coversTemp = new Array();
	
	for( var i=0; i<multiply; i++ ){
		
		for( var j=0; j<deroulant_xml_bts.length; j++ ){
			
			coversTemp.push( deroulant_xml_bts[j] );
			
		}
	
	}
	
	deroulant_xml_bts = coversTemp;
	deroulant_nb = deroulant_xml_bts.length;

}


function deroulant_creer(){

	for( var i=1; i<=deroulant_nb; i++ ){
		
		deroulant_creer_bt( i );
		
		if( i == deroulant_nb ){
			deroulant_mouvement();
		}
	
	}
	
}


function deroulant_creer_bt( id ){
	
	var div = document.createElement( "div" );
	div.setAttribute( "id", "deroulant_bt_"+id );
	div.style.position = "absolute";
	div.style.width = deroulant_btsW + "px";
	div.style.height = deroulant_btsH + "px";
	
	
	deroulant_image( div, id, "" );
	
	//si le bt est actif
	if( deroulant_xml_bts[id-1].getAttribute("etat") == "true" ){
		
		div.style.cursor = "pointer";
		div.onclick = function(){ deroulant_bt_clic(id) }
		
		
		if( id == deroulant_encours ){
	
			deroulant_image( div, id, "_on" );
			
			//On change le bloc chapitre
			deroulant_chapitre();
		
		}
		
	
	//si le bt est desactif
	}else{
		
		//deroulant_image( div, id, "_alpha" );
		var _alpha = 50;
		div.style.MozOpacity = _alpha/100;
		div.style.opacity = _alpha/100;
		div.style.filter = "alpha(opacity=" + _alpha + ")";
		
	}
	
	div.style.zIndex = 400 + id;
	
	document.getElementById("deroulant_c").appendChild( div );
	
}


function deroulant_image( div, id, type ){
	

	if( deroulant_is_IE6() == false ){
		div.style.backgroundImage = "url(images/deroulant/bt" + deroulant_xml_bts[id-1].getAttribute("idImage") + type + ".png)";
	}else{
		div.style.backgroundImage = "none";
		div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/deroulant/bt" + deroulant_xml_bts[id-1].getAttribute("idImage") +type + ".png', sizingMethod='scale')";	
	}


}


function deroulant_image_init( id ){

	//On remet tous les bts à 0
	for( var i=1; i<=deroulant_nb; i++ ){
		
		div = document.getElementById( "deroulant_bt_" + i );
		
		if( deroulant_xml_bts[i-1].getAttribute("etat") == "true" ){
		
			if( i == id ){
				
				deroulant_image( div, i, "_on" );
			
			}else{
			
				deroulant_image( div, i, "" );
				
			}
			
		}else{
			
			
			
		}
		
	}
	
	
	if( deroulant_xml_bts[id-1].getAttribute("etat") == "true" ){
		
		if( id == deroulant_encours ){
	
			deroulant_image( div, id, "_on" );
			
			//On change le bloc chapitre
			deroulant_chapitre();
		
		}
		
	
	//si le bt est desactif
	}else{
		
		//deroulant_image( div, id, "_alpha" );
		var _alpha = 50;
		div.style.MozOpacity = _alpha/100;
		div.style.opacity = _alpha/100;
		div.style.filter = "alpha(opacity=" + _alpha + ")";
		
	}

}


function deroulant_mouvement(){
	
	var div;
	var diff
	var position;
	var posX;

	for( var i=1; i<=deroulant_nb; i++ ){
		
		div = document.getElementById( "deroulant_bt_" + i );
		
		position = deroulant_calculPosition(i);
		
		//position-1 car les id partent de 1 alors que le PosX part de 0
		posX = ( deroulant_btsW + deroulant_marge ) * ( position - 1 ); 
		
		//Le bt le plus à droite passe à gauche pour la transition de sortie
		if( position == deroulant_nb ){
			posX = -deroulant_btsW - deroulant_marge;	
		}
		
		//Si le bt passe d'une extremite à l'autre, on le repositionne pour ne pas qu'il traverse le déroulant
		if( ( div.offsetLeft < 0 && posX > 0 ) || ( div.offsetLeft > 0 && posX < 0 ) ){

			if( posX > 0 && posX < deroulant_btsW*deroulant_limite ){
				div.style.left = "0px";
			}else{
				div.style.left = posX + "px";
			}
			
		}
		
		//pour l'init pas de Tween
		if( div.style.left == "" ){
			div.style.left = posX + "px";	
		}else{
			
			deroulant_fleches = false;
			
			//Si on est en mode auto, on ecoute la fin du Tween
			if( i == deroulant_nb && deroulant_cible != "" ){
				deroulant_effet( div, "left", posX, true );
			}else{
				deroulant_effet( div, "left", posX, false );
			}
		}

		
	}
	
}


function deroulant_calculPosition(i){
	
	var position;
	
	diff = deroulant_encours - i;
		
	//dans ce cas, le bt est à gauche du point 0 donc on le remet dans la queue à droite
	if( diff > 0 ){
		
		position = deroulant_nb + 1 - diff;

	}else{
		
		position = -diff + 1;

	}
	
	return position;
	
}



function deroulant_bt_clic( id ){
	
	var div;

	deroulant_image_init( id );
	
	//On fait l'action du lien
	if( deroulant_xml_bts[id-1].getAttribute("lien")!= "#" && deroulant_xml_bts[id-1].getAttribute("lien")!= "" ){
	
		if( deroulant_xml_bts[id-1].getAttribute("target") == "_blank" ){
		
			window.open( deroulant_xml_bts[id-1].getAttribute("lien"), "_blank", '' );
			
		}else if( deroulant_xml_bts[id-1].getAttribute("target") == "" ){
			
			document.location.href = deroulant_xml_bts[id-1].getAttribute("lien");
			
		}
		
	}
	
	//pour le deroulement auto, on dit que le bouton cliqué doit devenir le bt encours
	deroulant_cible = id;
	deroulant_clic = true;
	deroulant_auto();
	
}


function deroulant_auto(){

	var position = deroulant_calculPosition( deroulant_cible ) - 1;

	//le bouton sélectionné n'est en position 1 on continue le déroulement auto
	if( position > 0 ){
		
		if( deroulant_sens == "gauche" ){
			deroulant_gauche2();
		}else{
			deroulant_droite2();	
		}
	
	//Sinon on arrete le mouvement et on dit que le bt sélectionné est le encours
	}else{
		deroulant_sens = "";
		deroulant_encours = deroulant_cible;
		deroulant_cible = "";
		
		if( deroulant_clic == true ){
			deroulant_clic = false;
			deroulant_chapitre();
		}
		
		deroulant_fleches = true;
	}

	
}



function deroulant_gauche2(){

	deroulant_encours--;
	
	if( deroulant_encours < 1 ){
		deroulant_encours = deroulant_nb;	
	}

	deroulant_mouvement();
	
}

function deroulant_droite2(){

	deroulant_encours++;
	
	if( deroulant_encours > deroulant_nb ){
		deroulant_encours = 1;	
	}

	deroulant_mouvement();
	
}


function deroulant_gauche(){
	
	if( deroulant_fleches == true ){
	
		var id = deroulant_encours - 4;
		
		if( id < 1 ){
			
			id = deroulant_nb + id;	
		
		}
		
		deroulant_sens = "gauche";
		deroulant_cible = id;
		deroulant_auto();
	
	}
	
}


function deroulant_droite(){
	
	if( deroulant_fleches == true ){
	
		var id = deroulant_encours + 4;
		
		if( id > deroulant_nb ){
			
			id = id - deroulant_nb;	
		
		}

		deroulant_cible = id;
		deroulant_auto();
	
	}
	
}


function deroulant_effet( div, attribut, valeur, testFin ){
	
	var fx = new Tween( div.style, attribut, '', parseInt( div.style[attribut] ), valeur, 0.3, 'px' );
	fx.start();
	
	//si il s'agit du dernier Tween, alors on crèe un ecouteur afin de connaitre la fin de la transition
	if( testFin == true ){
	
		fx.onMotionFinished = function(){ effetFin( fx ); }
	
	}
	
}

function effetFin( fx ){
	
	//Si on est en mode auto, il faut relancer le mouvementà la fin de chaque mouvement
	deroulant_auto();
	
}


//*******************************************************
//CHAPITRES
//*******************************************************

//Pour creer le bloc HTML des chapitres
//pour initialiser le flash avec l'id de la video
function deroulant_chapitre(){
	
	//titre
	var divtitre = document.getElementById( "titreEncartGlossaire" );
	divtitre.innerHTML = "";
		
	var mesTitres = deroulant_xml_bts[deroulant_encours-1].getElementsByTagName("titre")[0];
		
	var textTitre = document.createTextNode( mesTitres.firstChild.nodeValue );
	divtitre.appendChild( textTitre );

	//lien imprimer vers PDF
	var divPDF = document.getElementById( "deroulant_div_imprimer" );
	divPDF.innerHTML = "";
	
	var lienPDF = document.createElement( "a");
	lienPDF.setAttribute( "href", "pdf/tutorial" + deroulant_encours + ".pdf" );
	lienPDF.setAttribute( "target", "_blank" );
	divPDF.appendChild( lienPDF );
	
	lienPDF.innerHTML = '<div id="resume" class="relative "><div class="padLeft15">Imprimer</div></div>';
	
	//On change les chapitres	
	var div = document.getElementById( "deroulant_bloc_chapitre" );
	div.innerHTML = "";
	
	var mesChapitres = deroulant_xml_bts[deroulant_encours-1].getElementsByTagName("chapitre");
	
	for( var i=0; i<mesChapitres.length; i++ ){
	
		var lien = document.createElement( "a" );
		lien.setAttribute( "href", "#" );
		lien.setAttribute("id","chapitre_lien"+i);
		div.appendChild( lien );
		
		var div2 = document.createElement( "div" );
		div2.setAttribute("id" , "chapitre" + i );
		div2.className = "chapitreSelect padLeft15 padtop2 btchapitre";
		lien.appendChild( div2 );
		var text = document.createTextNode( mesChapitres[i].firstChild.nodeValue );
		div2.appendChild( text );	
		
		//on remet la scroll en top
		if( i == mesChapitres.length-1 ){
		
			div.scrollTop = 0;
		
		}
		
		deroulant_chapitre_clic( lien, i );
		
	}
	
	//Init flash
	//deroulant_flash_creer( deroulant_encours );
	deroulant_flash();
	//Scroller();
	
}


function deroulant_chapitre_clic( div, id ){
	
	div.onclick = function(){ deroulant_flash_chapitre( id ) }
	
}


//donner a flash l'id de la video
function deroulant_flash_init(){
	
	//document.getElementById("animFlash").lireVideo( deroulant_encours );
	var f= window.frames.animFlash;
	f.document.getElementById("animFlash").lireVideo( deroulant_encours );
	
}

function deroulant_flash(){
	
	if( deroulant_encours == 4 ){
		
		document.getElementById( "animFlash" ).src = "intro2.html";
		
	}else{
	
		document.getElementById( "animFlash" ).src = "intro.html";
	
	}
	
}

/*
function deroulant_flash_creer( id ) {
	
	//le tuto4 doit etre lu en 25fps
	//on crée le flash en 25fps(intro2) ou 35fps (intro)
	var flashTuto = document.getElementById( "flashTuto" );
	flashTuto.innerHTML = "";
	
	//pour le tuto 4, on doit le lire en 25fps
	if( id == 4 ){
		fichier = 'flash/tutoriels/intro2.swf';
	}else{
		fichier = 'flash/tutoriels/intro.swf';
	}
	
	_width = 576;
	_height = 384;
	_id = 'animFlash';
	
	
	var div = document.createElement( "object" );
	div.setAttribute( "type", "application/x-shockwave-flash" );
	div.setAttribute( "data", fichier );
	div.setAttribute( "width", _width );
	div.setAttribute( "height", _height );
	div.setAttribute( "id", _id );
	flashTuto.appendChild( div );
	
		var param1 = document.createElement( "param" );
		param1.setAttribute( "name", "movie" );
		param1.setAttribute( "value", fichier );
		div.appendChild( param1 );
		
		var param2 = document.createElement( "param" );
		param2.setAttribute( "name", "quality" );
		param2.setAttribute( "value", "high" );
		div.appendChild( param2 );
		
		var param3 = document.createElement( "param" );
		param3.setAttribute( "name", "scale" );
		param3.setAttribute( "value", "noscale" );
		div.appendChild( param3 );
		
		var param4 = document.createElement( "param" );
		param4.setAttribute( "name", "menu" );
		param4.setAttribute( "value", "false" );
		div.appendChild( param4 );
		
		var param5 = document.createElement( "param" );
		param5.setAttribute( "name", "WMODE" );
		param5.setAttribute( "value", "Transparent" );
		div.appendChild( param5 );
		
		var param6 = document.createElement( "embed" );
		param6.setAttribute( "WMODE", "transparent" );
		param6.setAttribute( "src", fichier );
		param6.setAttribute( "quality", "high" );
		param6.setAttribute( "width", _width );
		param6.setAttribute( "height", _height );
		param6.setAttribute( "id", _id );
		param6.setAttribute( "scale", "noscale" );
		param6.setAttribute( "menu", "false" );
		//div.appendChild( param6 ); 

		
}
*/

//donner a flash l'id du chapitre pour
//passer en HOVER le bouton.
function select_flash_chapitre( id ) {
	
	var mesChapitres = deroulant_xml_bts[deroulant_encours-1].getElementsByTagName("chapitre");
	
	for( var i=0; i<mesChapitres.length; i++ ){
	
		document.getElementById("chapitre"+i).className = "chapitreSelect padLeft15 padtop2 btchapitre";
	
	}
		
	document.getElementById("chapitre"+id).className = "padLeft15 padtop2 chapitreSelect btChapitre_select texteChapitreHover";	
	//alert(document.getElementById("chapitre_lien"+id).offsetHeight);
	var div = document.getElementById( "deroulant_bloc_chapitre" );
	
	//div.scrollTop = (document.getElementById("chapitre_lien"+id).offsetHeight * id) + 10;
	
}

//donner a flash l'id du chapitre
function deroulant_flash_chapitre( id ) {
	//document.getElementById("animFlash").accesChapitre( id );
	
	var f= window.frames.animFlash;
	f.document.getElementById("animFlash").accesChapitre( id );
	
	select_flash_chapitre(id);
}

//flash demande la video suivante : tween auto, bloc chapitre
//A la fin du tween auto, on donne à flash l'id de la video suivante
function deroulant_flash_next(){
	
	if( deroulant_cible == "" ){
		deroulant_cible = deroulant_encours+1;
	}else{
		deroulant_cible++;	
	}
	
	if( deroulant_cible > deroulant_nb ){
		deroulant_cible = 1;	
	}
	
	
	if( deroulant_xml_bts[deroulant_cible-1].getAttribute("etat") == "false" ){
		
		deroulant_flash_next();
		
	}else{
		
		deroulant_image_init( deroulant_cible );
		
		//deroulant_cible = id;
		deroulant_clic = true;
		deroulant_auto();
		
	}
	
}