/***********************************************************
	*                                                          *
	*           SCRIPT POST-HTML - SCRIPT PRINCIPAL            *
	*                                                          *
	************************************************************
	*                                                          *
	* [0] Variables                                            *
	* [1] Gestionnaires de navigation                          *
	*      [a] pageManager.js                                  *
	*      [b] API.js                                          *
	* [2] Gestion des liens                                    *
	*      [a] catégories                                      *
	*      [b] sous-parties                                    *
	* [3] Gestion de l'authentification                        *
	* [4] Gestion des formulaires                              *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	***********************************************************/


/* [0] VARIABLES
==============================================================*/
/* pageManager */
var pageM;
/* API */
var API;

/* Structure de la page */
var DOM = {
	DRAGNDROP  : document.querySelector('#DRAGNDROP'),
	WRAPPER    : document.querySelector('#WRAPPER'),
		MENU      : document.querySelector('#MENU'),
		HEADER    : document.querySelector('#HEADER'),
		SUBHEADER : document.querySelector('#SUBHEADER'),
			SUBSECTIONS : document.querySelector("#SUBHEADER > nav"),
		CONTAINER : document.querySelector('#CONTAINER'),
	AUTHFILTER : document.querySelector('#AUTH_FILTER'),
	AUTH       : document.querySelector('#AUTH'),
	LOGOUT     : document.querySelector('#HEADER #LOGOUT')

};

/* VRAI = utilisateur connecté */
var connected = !( DOM.AUTH.children[0].innerHTML == 'Connexion' );


/* [1] GESTIONNAIRES DE NAVIGATION
==============================================================*/


	/* [a] pageManager.js
	==============================================================*/
	pageM = new pageManager(); // instance principale

	/* initialisation du gestionnaire */
	pageM.setPage(null, 'page', DOM.CONTAINER, ['home', 'groups', 'ue', 'modules', 'marks', 'auth', 'settings'] );


	/* [b] API.js
	==============================================================*/
	API = new APIClass();

	/* [c] gestion des classes 
	================================================*/
	function addClass(el, pClass){
		if( el.className.length > 0 && el.className != pClass ) el.className = el.className + ' ' + pClass;
		else                                                    el.className = pClass;
	}

	function remClass(el, pClass){
		if( el.className.indexOf(pClass) > -1 ) // si la class de l'élement contient la classe à enlever 
			el.className = el.className.substr(0, el.className.indexOf(pClass)) + '' + el.className.substr(el.className.indexOf(pClass)+pClass.length);
	}



/* [2] GESTION DES LIENS
==============================================================*/


	/* [a] CATÉGORIES
	==============================================================*/
	/* GESTION DES CATEGORIES (SECTIONS)
	*
	* @param section<Element>		l'élément à activer
	*
	* [1] selectionne l'élément, l'affichage de la page associée est géré par pageManager.js
	* [2] déselectionne l'élément précédemment selectioné
	*
	*/
	function selectSection(section){

		// si @subSection est un <Element> de type <li> qui a la propriété "data-link" [ET] section pas déjà active
		if( section instanceof Element && section.tagName == 'SPAN' && section.dataset.hasOwnProperty('link') ){

			// on charge la page
			pageM.setPage( section.dataset.link );

			/* on active les sous-parties */
			pageM.xhr[pageM.xhr.length-1].addEventListener('load', function(){

				// on récupère les sections du document
				var sections = document.querySelectorAll('#CONTAINER section[name]'); 
				if( sections != null ){ // si on en trouve
					
					DOM.SUBSECTIONS.innerHTML = "";              // on efface le #SUBHEADER > nav <=> les liens des sous-parties

					for( var i = 0 ; i < sections.length ; i++ ) // pour chaque section, on créé un lien correspondant
						if( i == 0 ) // on active le premier
							DOM.SUBSECTIONS.innerHTML += "<span data-sectname='" +sections[i].getAttribute('name')+ "' class='active'>" +sections[i].title+ "</span>";
						else         // pas les autres
							DOM.SUBSECTIONS.innerHTML += "<span data-sectname='" +sections[i].getAttribute('name')+ "'>" +sections[i].title+ "</span>";
				}

				// si dans pageManager.js, on a une sous-partie et qu'elle existe physiquement
				var selectedSubSectionFromURL = document.querySelector('#SUBHEADER > nav > span[data-sectname='+pageM.vars[0]+']');
				
				console.log( selectedSubSectionFromURL );

				if( selectedSubSectionFromURL != null ) // si on trouve, on charge la sous-partie
					selectSubSection( selectedSubSectionFromURL );
				else // sinon, on selectionne celle définie dans le HTML
					selectSubSection( document.querySelector('#SUBHEADER > nav > span.active') );
		
			}, false);
			

			// on récupère la section déja selectionnée si elle existe
			var last = document.querySelector('#MENU span.active');

			if( last != null )                // si une section est déjà activée
				remClass(last, 'active'); // on désactive la courante
			
			addClass(section, 'active'); // on active @section
			
		}else // sinon on affiche l'erreur
			console.log("[selectSection_Error] - ("+section+")");

	}

	/* activation au chargement en fonction de la page courante de pageManager.js */
	var lastSection = document.querySelector('#MENU span[data-link='+pageM.page+']');
	if( lastSection != null )
		selectSection(lastSection); // on l'active

	/* Gestion des liens du menu */ 
	DOM.MENU.addEventListener('click', function(e){ selectSection( e.target ); }, false);






	/* [b] SOUS-PARTIES
	==============================================================*/
	/* GESTION DES SOUS-PARTIES (SOUS-CATÉGORIES)
	*
	* @param subSection<Element>		l'élément à activer
	*
	* [1] selectionne l'élément, l'affichage de la page associée est géré en CSS3
	* [2] déselectionne l'élément précédemment selectioné
	*
	*/
	function selectSubSection(subSection){

		// si @subSection est un <Element> de type HGROUP [ET] 
		if( subSection instanceof Element && subSection.tagName == 'SPAN' && subSection.dataset.hasOwnProperty('sectname') ){

			// on essaie de récupérer l'ancien "lien"
			var lastActive = document.querySelector('#SUBHEADER > nav > span.active');
			if( lastActive != null ) // si on a trouvé qqch
				remClass(lastActive, 'active'); // on le désactive
		
			// on essaie de récupérer l'ancienne section active
			var lastSection = document.querySelector('#CONTAINER section.active');
			if( lastSection != null ) // si on a trouvé qqch
				remClass(lastSection, 'active'); // on la désactive

			// on active la page associée
			var target = document.querySelector('#CONTAINER section[name='+subSection.dataset.sectname+']');
			if( target != null )
				addClass(target, 'active');

			// on définit la sous-page de pageManager.js
			pageM.vars[0] = subSection.dataset.sectname;
			pageM.updateURL();
	
			addClass(subSection, 'active'); // on active @subSection
		}

	}

	/* gestion du clic sur les sous-parties */
	DOM.SUBSECTIONS.addEventListener('click', function(e){ selectSubSection(e.target); }, false);



/* [3] GESTION DE L'AUTHENTIFICATION
==============================================================*/

// ouvre l'interface d'authentification quand click
DOM.LOGOUT.addEventListener('click', function(e){ // sur bouton
	DOM.AUTHFILTER.className = 'active';
}, false);

if( !connected )  // sur zone verte si pas connecté
	DOM.MENU.children[0].addEventListener('click', function(e){
		addClass(DOM.AUTHFILTER, 'active');
	}, false);

		

// ferme l'interface d'authentification quand clic sur filtre
DOM.AUTHFILTER.addEventListener('click', function(e){
	remClass(DOM.AUTHFILTER, 'active');
}, false);




/* [4] GESTION DES FORMULAIRES
==============================================================*/
/* INITIALISE UN FORMULAIRE POUR QU'IL INTERPRETE UN OBJET LORS DE SA SOUMISSIONS
*
* @param pForm<Element>				le formulaire cible
* @param pHandler<Function>			fonction exécutée lors de la soumission du formulaire
*
* [1] parcourt les élements du formulaire @pForm et active un évènement lors du "submit"
* [2] retourne l'objet à @pHandler lors du "submit"
*
*
* @example
*
* <form id='nomFormulaire'>
*
*	<input type='text'   name='nomDuChamp1' value='valeurDuChamp1'>
*	<input type='mail'   name='nomduChamp2' value='valeurDuChamp2'>
*
*   <input type='submit' value='VALIDER'>
*   
* </form>
*
* @explaination
*
* Lors du clic sur le bouton [VALIDER], la fonction @pHandler s'exécutera avec pour paramètre un objet
* OBJ{ id: nomFormulaire, nomDuChamp1: valeurDuChamp1, nomDuChamp2: valeurDuChamp2 }
*
*/
function initForm(pForm, pHandler){

	// vérification des arguments
	var isForm = pForm instanceof Element && pForm.tagName == 'FORM';
	var isFunc = pHandler instanceof Function;

	// si les arguments sont corrects
	if( pForm instanceof Element && pForm.tagName == 'FORM' ){

		var submitButton = null; // contiendra le bouton d'envoi du formulaire

		for( var i = 0 ; i < pForm.children.length ; i++ )
			if( pForm.children[i].type == 'button' ){
				submitButton = pForm.children[i]; // on définit le bouton
				break;                            // on sort du for
			}

		// on définit l'évènement de validation du formulaie
		function submitEvent(){

			var obj = {}         // on créé l'objet qui va être envoyé

			for( var i = 0 ; i < pForm.children.length ; i++ ) // on parcourt les enfants
				if( pForm.children[i].tagName == 'INPUT' && pForm.children[i].type != 'button' ) // si c'est un champ et que c'est pas le bouton
					obj[pForm.children[i].name] = pForm.children[i].value;                       // alors on enregistre le champ dans l'objet

			// on exécute la fonction @pHandler en lui envoyant les arguments
			pHandler(obj);

		}

		// on définit l'évènement du clic sur le bouton
		submitButton.addEventListener('click', function(e){
			submitEvent(e.target.parentNode);           // on envoie le formulaire
		}, false);

		// on définit l'évènement de l'appui sur la touche [ENTRER]
		pForm.addEventListener('keydown', function(e){
			if(e.keyCode==13) submitEvent(e.target); // si c'est la bonne touche, on submit le formulaire
		}, false);



	}else
		console.log('[initForm_Error] - ('+pForm+', '+pHandler+')');


}







initForm( // initialisation du formulaire de connection
	DOM.AUTH, // formulaire (élément DOM)
	function(request){ // handler
		// ajout d'informations à la requête
		request.level_0 = 'user';
		request.level_1 = (connected) ? 'exit' : 'authentification';
		
		API.send(request, function(response){
			if( response.request == 'success' )// si connection ok
				document.location = '';
			else
				document.querySelector('#AUTH .errorbox').innerHTML = 'Identifiants incorrects.';
		});
	}
);