function getXhr(){
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres
		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject){ // Internet Explorer 
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
		else { // XMLHttpRequest non supporté par le navigateur 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
	return xhr;
}
			
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(id){
				//var id = id;
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					if(id == 'categorie'){
						// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
						if(xhr.readyState == 4 && xhr.status == 200){
							var reg=new RegExp("<!>", "g");
							leselect = xhr.responseText.split(reg);
							// On se sert de innerHTML pour rajouter les options a la liste
							document.getElementById('produits').innerHTML = leselect[0];
							//document.getElementsByTagName("input")[0].style.display = ""; // pour reaficher le bouton
							//document.getElementsByTagName("input")[0].disabled=false; //pour reactiver le bouton
							//document.getElementsByTagName("input")[0].value='Valider ce produit'; // pour changer l'etiquette du bouton
						}
						// si en ouverture ou en envoyé ou en cours de reception des données on affiche le logo de chargement
						if(xhr.readyState == 1 || xhr.readyState == 2 || xhr.readyState == 3){
							document.getElementById('produits').innerHTML = '<img src="../img/loading.gif" alt="Chargement en cours..." />';
							//document.getElementsByTagName("input")[0].style.display = "none"; // pour cacher le bouon
							//document.getElementsByTagName("input")[0].disabled=true; //pour desactiver le bouton
							//document.getElementsByTagName("input")[0].value='Patientez...'; // pour changer l'etiquette du bouton
						}
					}
				}
				
				if(id == 'categorie'){
					// Ici on va voir comment faire du post
					xhr.open("POST","ajaxProduits.inc.php",true);
					// ne pas oublier ça pour le post
					xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
					// ne pas oublier de poster les arguments
					// ici, l'id de l'auteur
					sel = document.getElementById('categorie');
					idcategorie = sel.options[sel.selectedIndex].value;
					xhr.send("idCategorie="+idcategorie);
				}
			}
		
		 
		 
		function suppOption(a){
			b = document.getElementById(a);
            // Elément à enlever
            div1      = b.parentNode;
            div2      = div1.parentNode;
            // Elément auquel on enlève
            div3   = div2.parentNode;
            // On enlève !
            div3.removeChild(div2);
        }
		
		  cpteTourS = 1;
         function ajouterS(i){
			if(cpteTourS == 1){compteur = i;}
			compteur1 = 100;
            // On récupère le fieldset
            var conteneur   = document.getElementById('optionsSup');
            /**
            * Création des éléments dont on a besoin :
            * Un div dans lequel on mettra notre champ file et une case à cocher
            * qui nous servira à enlever ensuite le div.
            *
            * En utilisant un div ça sera plus facile car sinon
            * on aurais du enlever le champ file et la case à cocher séparément.
            */
			
			// on cré les div
            var divPrinci      = document.createElement('div'); // div général de l'option
			divPrinci.setAttribute("class",'divOption')
			
            var divValue      = document.createElement('div'); // div du champs de la valeur de l'option
			divValue.setAttribute("class",'champOption')
			
            var divCout      = document.createElement('div'); // div du champ du cout de l'option
			divCout.setAttribute("class",'coutOrdre')
			
            var divOrdre      = document.createElement('div'); // div du champ de l'ordre de l'option
			divOrdre.setAttribute("class",'coutOrdre')
			
            var divSuppr      = document.createElement('div'); // div du bouton de suppression de l'option
			divSuppr.setAttribute("class",'suppression')
			
            var divAjoutNiv      = document.createElement('div'); // div qui contiendra les sous options
			divAjoutNiv.setAttribute("class",'optNiv2')
			divAjoutNiv.setAttribute("id",'divOption'+compteur+'')
			
			
			// on cré les champs
			var value        = document.createElement('input'); // champs de la valeur de l'option
			value.setAttribute("class",'moyen')
			value.setAttribute("type",'text')
			value.setAttribute("name",'optionValue['+compteur+']')
			
            var cout        = document.createElement('input'); //champ du cout de l'option
			cout.setAttribute("class",'petit')
			cout.setAttribute("type",'text')
			cout.setAttribute("name",'optionCout['+compteur+']')
			
            var ordre        = document.createElement('input'); //champ de l'ordre de l'option
			ordre.setAttribute("class",'tPetit')
			ordre.setAttribute("type",'text')
			ordre.setAttribute("name",'optionOrdre['+compteur+']')
			
            var supp        = document.createElement('a'); //champ de l'ordre de l'option
			supp.setAttribute('href', '#');
			var oImg = new Image();
		    oImg.id = 'gdim';
		    oImg.src = '../img/IconeSupprimer.jpg';
		    oImg.width = '18';
		    oImg.height = '18';
			oImg.border = '0';
		    oImg.alt = 'supprimer';
  			supp.appendChild(oImg); 
						
            // On enlève sur le click de la checkbox
			supp.onclick = function(){
               // Elément à enlever
               lediv      = this.parentNode;
               lediv2      = lediv.parentNode;
               // Elément auquel on enlève
               lefieldset   = lediv2.parentNode;
               // On enlève !
               lefieldset.removeChild(lediv2);
            }

            /**
            * Ajout des éléments au div grace a appendChild
            * qui ajoute à la fin.
            * On utilise aussi createTextNode pour ajouter du texte apres la case
            */
			
			// on met les champs dans les divs
			divCout.appendChild(cout);
			divOrdre.appendChild(ordre);
            divValue.appendChild(value);
			
            divSuppr.appendChild(supp);
		   
			// on met les 3 div dans le div principal de l'option
            divPrinci.appendChild(divSuppr);
            divPrinci.appendChild(divValue);
            divPrinci.appendChild(divCout);
            divPrinci.appendChild(divOrdre);

            // on ajoute le div principal de l'option dans le contenur
            conteneur.appendChild(divPrinci);
			
			compteur++;
			compteur1++;
			cpteTourS++;
         }
		 /////////////////////////////////////////
		 
		 
		 
		 
		 cpteTour = 1;
		 cpteTour2 = 1; // fonction 2eme
		 compteur3 = 100; // fonction 2eme
		 cpteTour3 = 1; // fonction 3eme
         function ajouter(i){
			if(cpteTour == 1){compteur = i;}
			compteur1 = 100;
            // On récupère le fieldset
            var conteneur   = document.getElementById('optionsSup');
            /**
            * Création des éléments dont on a besoin :
            * Un div dans lequel on mettra notre champ file et une case à cocher
            * qui nous servira à enlever ensuite le div.
            *
            * En utilisant un div ça sera plus facile car sinon
            * on aurais du enlever le champ file et la case à cocher séparément.
            */
			
			// on cré les div
            var divPrinci      = document.createElement('div'); // div général de l'option
			divPrinci.setAttribute("class",'divOption')
			
            var divValue      = document.createElement('div'); // div du champs de la valeur de l'option
			divValue.setAttribute("class",'champOption')
			
            var divCout      = document.createElement('div'); // div du champ du cout de l'option
			divCout.setAttribute("class",'coutOrdre')
			
            var divOrdre      = document.createElement('div'); // div du champ de l'ordre de l'option
			divOrdre.setAttribute("class",'coutOrdre')
			
            var divSuppr      = document.createElement('div'); // div du bouton de suppression de l'option
			divSuppr.setAttribute("class",'suppression')
			
            var divBoutonAjoutNiv2      = document.createElement('div'); // div du bouton d'ajout d'option optNiv2
			divBoutonAjoutNiv2.setAttribute("class",'boutonAjoutNiv2')
			
            var divAjoutNiv      = document.createElement('div'); // div qui contiendra les sous options
			divAjoutNiv.setAttribute("class",'optNiv2')
			divAjoutNiv.setAttribute("id",'divOption'+compteur+'')
			
			
			// on cré les champs
			var value        = document.createElement('input'); // champs de la valeur de l'option
			value.setAttribute("class",'moyen')
			value.setAttribute("type",'text')
			value.setAttribute("name",'optionValue['+compteur+']')
			
            var cout        = document.createElement('input'); //champ du cout de l'option
			cout.setAttribute("class",'petit')
			cout.setAttribute("type",'text')
			cout.setAttribute("name",'optionCout['+compteur+']')
			
            var ordre        = document.createElement('input'); //champ de l'ordre de l'option
			ordre.setAttribute("class",'tPetit')
			ordre.setAttribute("type",'text')
			ordre.setAttribute("name",'optionOrdre['+compteur+']')
			
            var ajoutNiv        = document.createElement('a'); //champ de l'ordre de l'option
			ajoutNiv.setAttribute('href', '#'); 
			ajoutNiv.setAttribute('onclick', 'ajoutNiv2('+compteur+','+compteur1+')'); 
			var txtA = document.createTextNode('Ajouter niveau 2'); 
  			ajoutNiv.appendChild(txtA); 
			
			
            var supp        = document.createElement('a'); //champ de l'ordre de l'option
			supp.setAttribute('href', '#');
			var oImg = new Image();
		    oImg.id = 'gdim';
		    oImg.src = '../img/IconeSupprimer.jpg';
		    oImg.width = '18';
		    oImg.height = '18';
			oImg.border = '0';
		    oImg.alt = 'supprimer';
  			supp.appendChild(oImg); 
						
            // On enlève sur le click de la checkbox
			supp.onclick = function(){
               // Elément à enlever
               lediv      = this.parentNode;
               lediv2      = lediv.parentNode;
               // Elément auquel on enlève
               lefieldset   = lediv2.parentNode;
               // On enlève !
               lefieldset.removeChild(lediv2);
            }

            /**
            * Ajout des éléments au div grace a appendChild
            * qui ajoute à la fin.
            * On utilise aussi createTextNode pour ajouter du texte apres la case
            */
			
			// on met les champs dans les divs
			divCout.appendChild(cout);
			divOrdre.appendChild(ordre);
            divValue.appendChild(value);
			
            divSuppr.appendChild(supp);
			
            divBoutonAjoutNiv2.appendChild(ajoutNiv);
		   
			// on met les 3 div dans le div principal de l'option
            divPrinci.appendChild(divSuppr);
            divPrinci.appendChild(divValue);
            divPrinci.appendChild(divCout);
            divPrinci.appendChild(divOrdre);
            divPrinci.appendChild(divBoutonAjoutNiv2);
			divPrinci.appendChild(divAjoutNiv);

            // on ajoute le div principal de l'option dans le contenur
            conteneur.appendChild(divPrinci);
			
			compteur++;
			compteur1++;
			cpteTour++;
         }
		 
		 
		 
		 
         function ajoutNiv2(i, j){
			compteur2 = i;
			if(cpteTour2 == 1){compteur22 = j;}
            // On récupère le fieldset
            var conteneur   = document.getElementById('divOption'+i+'');
       			
			// on cré les div
            var divPrinci      = document.createElement('div'); // div général de l'option
			divPrinci.setAttribute("class",'divOptionNiv2')
			
            var divValue      = document.createElement('div'); // div du champs de la valeur de l'option
			divValue.setAttribute("class",'champOption')
			
            var divCout      = document.createElement('div'); // div du champ du cout de l'option
			divCout.setAttribute("class",'coutOrdre')
			
            var divOrdre      = document.createElement('div'); // div du champ de l'ordre de l'option
			divOrdre.setAttribute("class",'coutOrdre')
			
            var divSuppr      = document.createElement('div'); // div du champ de l'ordre de l'option
			divSuppr.setAttribute("class",'suppression2')
			
            var divBoutonAjoutNiv3      = document.createElement('div'); // div du champ du bouton d'ajout de niveau 3
			divBoutonAjoutNiv3.setAttribute("class",'boutonAjoutNiv3')
			
            var divNiv3      = document.createElement('div'); // div du champ de l'ordre de l'option
			divNiv3.setAttribute("class",'optNiv3')
			divNiv3.setAttribute("id",'divOption'+compteur2+compteur22+'')
			
			
			// on cré les champs
			var value        = document.createElement('input'); // champs de la valeur de l'option
			value.setAttribute("class",'moyen')
			value.setAttribute("type",'text')
			value.setAttribute("name",'optionValue['+compteur2+compteur22+']')
			
            var cout        = document.createElement('input'); //champ du cout de l'option
			cout.setAttribute("class",'petit')
			cout.setAttribute("type",'text')
			cout.setAttribute("name",'optionCout['+compteur2+compteur22+']')
			
            var ordre        = document.createElement('input'); //champ de l'ordre de l'option
			ordre.setAttribute("class",'tPetit')
			ordre.setAttribute("type",'text')
			ordre.setAttribute("name",'optionOrdre['+compteur2+compteur22+']')
			
            var ajoutNiv2        = document.createElement('a'); //champ de l'ordre de l'option
			ajoutNiv2.setAttribute('href', '#'); 
			ajoutNiv2.setAttribute('onclick', 'ajoutNiv3('+compteur2+compteur22+','+compteur3+')'); 
			var txtA = document.createTextNode('Ajouter niveau 3'); 
  			ajoutNiv2.appendChild(txtA); 
			
            var supp        = document.createElement('a'); //champ de l'ordre de l'option
			supp.setAttribute('href', '#');
			var oImg = new Image();
		    oImg.id = 'gdim';
		    oImg.src = '../img/IconeSupprimer.jpg';
		    oImg.width = '18';
		    oImg.height = '18';
			oImg.border = '0';
		    oImg.alt = 'supprimer';
  			supp.appendChild(oImg); 
			
            // On enlève sur le click de la checkbox
			supp.onclick = function(){
               // Elément à enlever
               lediv      = this.parentNode;
               lediv2      = lediv.parentNode;
               // Elément auquel on enlève
               lefieldset   = lediv2.parentNode;
               // On enlève !
               lefieldset.removeChild(lediv2);
            }

            /**
            * Ajout des éléments au div grace a appendChild
            * qui ajoute à la fin.
            * On utilise aussi createTextNode pour ajouter du texte apres la case
            */
			
			// on met les champs dans les divs
			divCout.appendChild(cout);
			divOrdre.appendChild(ordre);
            divValue.appendChild(value);
            divBoutonAjoutNiv3.appendChild(ajoutNiv2);
			
            divSuppr.appendChild(supp);
		   
			// on met les 3 div dans le div principal de l'option
            divPrinci.appendChild(divSuppr);
            divPrinci.appendChild(divValue);
            divPrinci.appendChild(divCout);
            divPrinci.appendChild(divOrdre);
            divPrinci.appendChild(divBoutonAjoutNiv3);
            divPrinci.appendChild(divNiv3);

            // on ajoute le div principal de l'option dans le contenur
            conteneur.appendChild(divPrinci);
			
			compteur22++;
			cpteTour2++;
			compteur3++;
         }
		 
		 
		 
         function ajoutNiv3(i, j){
			compteur5 = i;
			if(cpteTour3 == 1){compteur4 = j;}
            // On récupère le fieldset
            var conteneur   = document.getElementById('divOption'+i+'');
       			
			// on cré les div
            var divPrinci      = document.createElement('div'); // div général de l'option
			divPrinci.setAttribute("class",'divOptionNiv3')
			
            var divValue      = document.createElement('div'); // div du champs de la valeur de l'option
			divValue.setAttribute("class",'champOption')
			
            var divCout      = document.createElement('div'); // div du champ du cout de l'option
			divCout.setAttribute("class",'coutOrdre')
			
            var divOrdre      = document.createElement('div'); // div du champ de l'ordre de l'option
			divOrdre.setAttribute("class",'coutOrdre')
			
            var divSuppr      = document.createElement('div'); // div du champ de l'ordre de l'option
			divSuppr.setAttribute("class",'suppression3')
			
			// on cré les champs
			var value        = document.createElement('input'); // champs de la valeur de l'option
			value.setAttribute("class",'moyen')
			value.setAttribute("type",'text')
			value.setAttribute("name",'optionValue['+compteur5+compteur4+']')
			
            var cout        = document.createElement('input'); //champ du cout de l'option
			cout.setAttribute("class",'petit')
			cout.setAttribute("type",'text')
			cout.setAttribute("name",'optionCout['+compteur5+compteur4+']')
			
            var ordre        = document.createElement('input'); //champ de l'ordre de l'option
			ordre.setAttribute("class",'tPetit')
			ordre.setAttribute("type",'text')
			ordre.setAttribute("name",'optionOrdre['+compteur5+compteur4+']')
			
            var supp        = document.createElement('a'); //champ de l'ordre de l'option
			supp.setAttribute('href', '#');
			var oImg = new Image();
		    oImg.id = 'gdim';
		    oImg.src = '../img/IconeSupprimer.jpg';
		    oImg.width = '18';
		    oImg.height = '18';
			oImg.border = '0';
		    oImg.alt = 'supprimer';
  			supp.appendChild(oImg); 
			
			supp.onclick = function(){
               // Elément à enlever
               lediv      = this.parentNode;
               lediv2      = lediv.parentNode;
               // Elément auquel on enlève
               lefieldset   = lediv2.parentNode;
               // On enlève !
               lefieldset.removeChild(lediv2);
            }

            /**
            * Ajout des éléments au div grace a appendChild
            * qui ajoute à la fin.
            * On utilise aussi createTextNode pour ajouter du texte apres la case
            */
			
			// on met les champs dans les divs
			divCout.appendChild(cout);
			divOrdre.appendChild(ordre);
            divValue.appendChild(value);
			
            divSuppr.appendChild(supp);
		   
			// on met les 3 div dans le div principal de l'option
            divPrinci.appendChild(divSuppr);
            divPrinci.appendChild(divValue);
            divPrinci.appendChild(divCout);
            divPrinci.appendChild(divOrdre);

            // on ajoute le div principal de l'option dans le contenur
            conteneur.appendChild(divPrinci);
			
			compteur4++;
			cpteTour3++;
         }
		 
		 

function Lien() {
	i = document.Barre.Categorie.selectedIndex;
	if (i == 0) return;
	url = document.Barre.Categorie.options[i].value;
	parent.location.href = url;
}
	
function Lien2() {
	j = document.Barre.Marque.selectedIndex;
	if (j == 0) return;
	url = document.Barre.Marque.options[j].value;
	parent.location.href = url;
}

function OpenPopUp2(fichierphp, hauteur, largeur){ // utilisation : <a href="#" onClick="OpenPopUp('test.php',hauteur,largeur)">cliquez ici</a>
//var Fichier = fichierphp;
//var Fichier = fichierphp + ".php";
var Hauteur = hauteur;
var Largeur = largeur;
var Left=window.screen.width/2-(Largeur/2);
var Top=window.screen.height/2-(Hauteur/2);
var Configuration="'toolbar=no, menubar=no, location=no, directories=no, status=no, resizable=yes, width=" + Largeur + ", height=" + Hauteur + ", left=" + Left + ", top=" + Top;
window.open(fichierphp,'NomDeMaPopUp',Configuration);
} 

			function goOption(id, k, nomOptionI, niveau2OptionI){
				//var id = id;
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					if(id == 'niveau1-'+k){
						// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
						if(xhr.readyState == 4 && xhr.status == 200){
							var reg=new RegExp("<!>", "g");
							leselect = xhr.responseText.split(reg);
							// On se sert de innerHTML pour rajouter les options a la liste
							document.getElementById('niveaux2-'+k).innerHTML = leselect[0];
							document.getElementById('niveaux3-'+k).innerHTML = leselect[1];
							//document.getElementsByTagName("input")[0].style.display = ""; // pour reaficher le bouton
							//document.getElementsByTagName("input")[9].disabled=false; //pour reactiver le bouton
							//document.getElementsByTagName("input")[9].value='Envoyer'; // pour changer l'etiquette du bouton
							document.getElementById('btn_ajout_panier').disabled=false; //pour reactiver le bouton
							document.getElementById('btn_ajout_panier').value='Envoyer'; // pour changer l'etiquette du bouton
						}
						// si en ouverture ou en envoyé ou en cours de reception des données on affiche le logo de chargement
						if(xhr.readyState == 1 || xhr.readyState == 2 || xhr.readyState == 3){
							document.getElementById('niveaux2-'+k).innerHTML = '<img src="img/loading.gif" alt="Chargement en cours..." />';
							document.getElementById('niveaux3-'+k).innerHTML = '<img src="img/loading.gif" alt="Chargement en cours..." />';
							//document.getElementsByTagName("input")[0].style.display = "none"; // pour cacher le bouon
							//document.getElementsByTagName("input")[9].disabled=true; //pour desactiver le bouton
							//document.getElementsByTagName("input")[9].value='Patientez...'; // pour changer l'etiquette du bouton
							document.getElementById('btn_ajout_panier').disabled=true; //pour desactiver le bouton
							document.getElementById('btn_ajout_panier').value='Patientez...'; // pour changer l'etiquette du bouton
						}
					}
					else if(id == 'niveau2-'+k){
						if(xhr.readyState == 4 && xhr.status == 200){
							var reg=new RegExp("<!>", "g");
							leselect = xhr.responseText.split(reg);
							document.getElementById('niveaux3-'+k).innerHTML = leselect[0];
							//document.getElementsByTagName("input")[0].style.display = ""; // pour reaficher le bouton
							//document.getElementsByTagName("input")[9].disabled=false; //pour reactiver le bouton
							//document.getElementsByTagName("input")[9].value='Envoyer'; // pour changer l'etiquette du bouton
							document.getElementById('btn_ajout_panier').disabled=false; //pour reactiver le bouton
							document.getElementById('btn_ajout_panier').value='Envoyer'; // pour changer l'etiquette du bouton
						}
						if(xhr.readyState == 1 || xhr.readyState == 2 || xhr.readyState == 3){
							document.getElementById('niveaux3-'+k).innerHTML = '<img src="img/loading.gif" alt="Chargement en cours..." />';
							//document.getElementsByTagName("input")[0].style.display = "none";// pour cacher le bouon
							//document.getElementsByTagName("input")[9].disabled=true;//pour desactiver le bouton
							//document.getElementsByTagName("input")[9].value='Patientez...'; // pour changer l'etiquette du bouton
							document.getElementById('btn_ajout_panier').disabled=true;//pour desactiver le bouton
							document.getElementById('btn_ajout_panier').value='Patientez...'; // pour changer l'etiquette du bouton
						}
					}

				}
				
				if(id == 'niveau1-'+k){
					// Ici on va voir comment faire du post
					xhr.open("POST","ajaxNiveau2.php",true);
					// ne pas oublier ça pour le post
					xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
					// ne pas oublier de poster les arguments
					// ici, l'id de l'auteur
					sel = document.getElementById('niveau1-'+k);
					idniveau1 = sel.options[sel.selectedIndex].value;
					xhr.send("idNiveau1="+idniveau1+"&k="+k+"&nomOptionI="+nomOptionI+"&niveau2OptionI="+niveau2OptionI); //k, nomOptionI et niveau2OptionI pour reaficher le nom des options mers
				}
				if(id == 'niveau2-'+k){
					// Ici on va voir comment faire du post
					xhr.open("POST","ajaxNiveau3.php",true);
					// ne pas oublier ça pour le post
					xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
					// ne pas oublier de poster les arguments
					// ici, l'id de l'auteur
					sel = document.getElementById('niveau2-'+k);
					idniveau2 = sel.options[sel.selectedIndex].value;
					xhr.send("idNiveau2="+idniveau2+"&k="+k);
				}
			}