// Fonction qui recupère les élèments checked du formulaire
function myFunction() {
	var MonTableau = new Array();
	var categories = new Array();
	var elems_champ = document.getElementsByTagName("input");
	var elems_categ = document.getElementsByClassName("entete");
	// parcours des balises div des categories
	for (var j = 0 ;j < elems_categ.length ;j++) {
		categories.push(elems_categ[j].id);
	}
	// Parcours des balises inputs des champs
	for (var i = 0 ;i < elems_champ.length ;i++) {
		if (elems_champ[i].type == "checkbox" && elems_champ[i].checked) {
			MonTableau.push(elems_champ[i].name, elems_champ[i].id, elems_champ[i].parentNode.parentNode.parentNode.parentNode.id);
		}
	}
	generate(MonTableau, categories);
}

// Fonction qui genère le nouveau formulaire
function generate(tab, cat){
	// création du noeud parent où on va afficher le formulaire dynamique
	var main = document.getElementById('affichage');
	main.setAttribute('style','display:inherit');
	
	// création de conteneur du formulaire dynamique
	var divParent = document.createElement('form');
	divParent.setAttribute('action', 'traitement.php');	// page de traitement
	divParent.setAttribute('method', 'POST');			// methode de traitement
	divParent.setAttribute('id', 'sky-form');			// id de mise en forme CSS
	divParent.setAttribute('class', 'sky-form');		// classe de mise en forme CSS
	main.appendChild(divParent);

	var form = document.getElementById('sky-form');
	// création du <header> nécaissaire à la mise en forme
	var header = document.createElement('header')
	header.innerHTML = 'Votre formulaire';
	form.appendChild(header);
	// création de <fieldset> nécaissaire à la mise en forme
	var fieldset = document.createElement('fieldset')
	fieldset.setAttribute('id', 'dynamic_fieldset');
	form.appendChild(fieldset);

	// on verifie si le formulaire n'est pas vide, dans ce cas on averti l'utiliasteur
	if (tab.length == 0) {
		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 champ qui prendra le paramètre name
		// - tab[i+1] = type du champ qui prendra le paramètre type
		// - tab[i] et tab[i+1] seront toujours liés au même champ input

		// on parcours notre tableau
		for (var i = 0 ;i < tab.length ;i += 3) {

			// si on doit créer un element de type radio
			if (tab[i+1] == "radio") {

				//on créer le conteneur <section>
				var section = document.createElement('section')

				//on créer le <label> et les <input>
				var label = document.createElement('label');
				var input1 = document.createElement('input');
				var input2 = document.createElement('input');

				//label
				label.setAttribute('class', 'label');
				label.innerHTML=tab[i]+"&nbsp;:";

				//input 1
				var label1 = document.createElement('label');
				label1.setAttribute('class', 'radio');

				input1.setAttribute('name',cat[tab[i+2]-1]+"_"+tab[i]);
				input1.setAttribute('type',tab[i+1]);
				input1.setAttribute('value',0);

				label1.appendChild(input1);
				label1.innerHTML += "<i></i>";
				label1.innerHTML += "Non";

				//input 2
				var label2 = document.createElement('label');
				label2.setAttribute('class', 'radio');

				input2.setAttribute('name',cat[tab[i+2]-1]+"_"+tab[i]);
				input2.setAttribute('type',tab[i+1]);
				input2.setAttribute('value',1);
				input2.setAttribute('checked','checked');

				label2.appendChild(input2);
				label2.innerHTML += "<i></i>";
				label2.innerHTML += "Oui";

				//on créer le <div> qui contiendra les inputs
				var div = document.createElement('div')
				div.setAttribute('class', 'inline-group');

				section.appendChild(label);
				div.appendChild(label1);
				div.appendChild(label2);
				section.appendChild(div);
				fieldset.appendChild(section);

			}

			// sinon on genere tout autre element que le type radio
			else {

				//on créer le <label> et le <input>
				var label = document.createElement('label');
				var input = document.createElement('input');

				//label
				label.setAttribute('class', 'label');
				label.innerHTML=tab[i]+"&nbsp;:";

				//input
				var label_input = document.createElement('label');
				label_input.setAttribute('class', 'input');

				input.setAttribute('name',cat[tab[i+2]-1]+"_"+tab[i]);	// attribut name du champs
				input.setAttribute('type',tab[i+1]);					// attribut type du champs
				if (tab[i] != "Rue") {
					input.setAttribute('required', 'required');
				}

				label_input.appendChild(input);

				//on créer le conteneur <section>
				var section = document.createElement('section')
				section.appendChild(label);
				section.appendChild(label_input);
				fieldset.appendChild(section);

			}

		}

		// création du <header> nécaissaire à la mise en forme
		var footer = document.createElement('footer')

		// création du <button> pour le traitement du formulaire
		var submit = document.createElement("button");
		submit.setAttribute('type','submit');
		submit.setAttribute('class','button');
		submit.innerHTML="Envoyer";

		// Ajout du <button> au formulaire
		footer.appendChild(submit);
		form.appendChild(footer);

	}

	// On efface le formulaire dédié à la génération !
	var form = document.getElementById('form');
	form.innerHTML = "";

}