// Fonction pour les bouttons
function toggle_div(bouton, id) { // On déclare la fonction toggle_div qui prend en param le bouton et un id
	var div = document.getElementById(id); // On récupère le div ciblé grâce à l'id
	if(div.style.display=="none") { // Si le div est masqué
		div.style.display = "block"; // on l'affiche
	} 
	else { // S'il est visible
		div.style.display = "none"; // on le masque  
	}
}

// Fonction qui recupere les element checked (oui) du formulaire
function myFunction() {
	var MonTableau = new Array();
	var categories = new Array();
	var elems = document.getElementsByTagName("input");
	var elems_cat = document.getElementsByTagName("b");
	// parcours des balises b des categories
	for (var j = 0 ; j < elems_cat.length ; j++) {
		categories.push(elems_cat[j].textContent);
	}
	//// Parcours des inputs
	for (var i = 0 ; i < elems.length ; i++) {
		if (elems[i].type == "radio" && elems[i].value == 1 && elems[i].checked) {
			MonTableau.push(elems[i].name, elems[i].id, elems[i].parentNode.id);
		}
	}
	generate(MonTableau, categories);
}

// Fonction qui genere le nouveau formulaire
function generate(tab, cat){
	///////////// creation du noeud parent ou on va afficher le formulaire dynamique ///////////////////////
	var main = document.getElementById('affiche'); 
	main.innerHTML += "<h2><u>Voici votre formulaire: </u></h2>";
	
	///////////// creation de conteneur du formulaire dynamique /////////////////
	var divParent = document.createElement('form');
	divParent.setAttribute('action', 'traitement.php'); // page qui va traiter notre formulaire
	divParent.setAttribute('method', 'POST'); // methode de traitement
	main.appendChild(divParent);
	//////////////////////////////////////////////////////////////////////////
	
	if (tab.length == 0) { // on verifie si le formulaire n'est pas vide, dans ce cas on averti l'utiliasteur
		divParent.innerHTML += "Vous devez selectionner au moins un champs pour générer le formulaire !";
	}
	else {
		// Le tableau fonctionne comme ceci:
		// - tab[i]  = nom du champs qui prendra le parametre name
		// - tab[i+1] = type du cahmps qui prendre le parametre type (text, radio...)
		// tab[i] et tab[i+1] sont toujours liés au même input
		for (var i = 0 ; i < tab.length ; i += 3) { // on parcours notre tableau 	
			 if (tab[i+1] == "radio") { // si on doit créer un element de type radio
				var input = document.createElement('input');
				var input1 = document.createElement('input');
				var label = document.createElement("label");
				label.innerHTML=tab[i]+": ";
				input.setAttribute('name',cat[tab[i+2]-1]+"_"+tab[i]);
				input.setAttribute('type',tab[i+1]);
				input1.setAttribute('name',cat[tab[i+2]-1]+"_"+tab[i]);
				input1.setAttribute('type',tab[i+1]);
				input.setAttribute('value',0);
				input1.setAttribute('value',1);
				input1.setAttribute('checked','checked');
				divParent.appendChild(label);
				divParent.innerHTML += "<br><br>";
				divParent.innerHTML += "Non";
				divParent.appendChild(input);
				divParent.innerHTML += "Oui";
				divParent.appendChild(input1);
				divParent.innerHTML += "<br></br>";
			 }
			 else { // sinon on genere tout autre element que le type radio
				var input = document.createElement('input'); 
				var label = document.createElement("label"); // on donne pour chaque champs un attribut label
				label.innerHTML=tab[i]+": ";
				input.setAttribute('name',cat[tab[i+2]-1]+"_"+tab[i]); // attribut name du champs
				input.setAttribute('type',tab[i+1]); // attribut type du champs
				divParent.appendChild(label); 
				divParent.appendChild(input);	
				divParent.innerHTML += "<br><br>";
			 }
		}
		// On crée le bouton input pour le traitement du formulaire
		var input2 = document.createElement("input");
		input2.setAttribute('type','submit'); 
		input2.setAttribute('value','Envoyer');
		divParent.appendChild(input2);
	}
	// On nettoie les champs car on ajoute le formulaire généré a la place !
	var form = document.getElementById('form');
	form.innerHTML = "";
}