//4 bts par ligne
var tutoriel_colonne = 4;


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 tutoriel_init(){
	  
	  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;

				//Nb de lignes
				var nb_ligne = Math.round( deroulant_nb / tutoriel_colonne );
				
				//div conteneur
				var conteneur = document.getElementById( "menu" );
				
				//Pour chaque ligne
				for( var i=0; i<nb_ligne; i++ ){
					
					//creation de la div ligne
					var div = document.createElement( "div" );
					div.className = "menu_tutoriel";
					conteneur.appendChild( div );
					
					//pour chaque bt
					for( var j=0; j<tutoriel_colonne; j++ ){
						
						var id_bt = tutoriel_colonne * i;
						id_bt = j + id_bt;
						
						var bt = document.createElement( "div" );
						bt.className = "bt_tutoriel";
						
						bt.style.backgroundImage = "url(images/tutoriels/menu/bt" + deroulant_xml_bts[id_bt].getAttribute("idImage") + ".gif)";
						div.appendChild( bt );
						
						tutoriel_lien( id_bt, bt );
						
					}
					
					
				}
	
			 }
			 
		   }
		  
		  xhr.open( "GET", "deroulant.xml", true );
		  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		  xhr.send(null);
	  
	  }

}


function tutoriel_lien( id, bt ){
	
	//Si le lien est activé
	if( deroulant_xml_bts[id].getAttribute("etat") == "true" ){
		
		bt.style.cursor = "pointer";
		bt.onclick = function(){ tutoriel_clic( id ) }
		bt.onmouseover = function(){ tutoriel_over( bt, id ) }
		bt.onmouseout = function(){ tutoriel_out( bt, id ) }
	
	//si le lien est désactivé
	}else{
		
		var _alpha = 50;
		bt.style.MozOpacity = _alpha/100;
		bt.style.opacity = _alpha/100;
		bt.style.filter = "alpha(opacity=" + _alpha + ")";
		
	}
	
	
	
}


function tutoriel_clic( id ){
	
	document.location = "tutoriels_page2.php?id_tuto=" + ( id + 1 );
	
}


function tutoriel_over( bt, id_bt ){

	bt.style.backgroundImage = "url(images/tutoriels/menu/bt" + deroulant_xml_bts[id_bt].getAttribute("idImage") + "_on.gif)";
	
}


function tutoriel_out( bt, id_bt ){

	bt.style.backgroundImage = "url(images/tutoriels/menu/bt" + deroulant_xml_bts[id_bt].getAttribute("idImage") + ".gif)";
	
}