/***********************************************************
	*                                                          *
	*           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 des formulaires                              *
	* [4] Gestion de la messageBox                             *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	*                                                          *
	***********************************************************/


/* [0] VARIABLES
==============================================================*/
var msgBoxTimeout = null;

/* pageManager */
var pageM;
/* API */
var API;

/* Structure de la page */
var DOM = {
	menu       : document.getElementById('MENU'),
	container  : document.getElementById('CONTAINER'),
	msgBox     : document.getElementById('MSGBOX')
};







/* [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();







/* [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 == 'LI' && section.dataset.hasOwnProperty('link') && section.className != 'active' ){

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

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

			if( last != null )                // si une section est déjà activée
				last.className = '';          // on désactive la courante
			
			section.className     = '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 */
	lastSection = document.querySelector('[data-link='+pageM.page+']');
	lastSection.className = 'active'; // 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 == 'HGROUP' ){

			if( subSection.className != 'active' ){ // si @subSection pas déjà active
		
				// on récupère la sous-partie selectionnée en cours
				var last = document.querySelector('hgroup.active');

				if( last != null )                   // si un sous-partie est déjà selectionnée
					last.className = '';             // on la désactive
				
				subSection.className     = 'active'; // on active @subSection
		
			}else // sinon on affiche l'erreur
				console.log("[selectSubSection_Error] - ("+subSection+")");
			
		}

	}

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








/* [3] 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' && pForm.children[i].name == 'submit' ){
				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].name != 'submit' ) // 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+')');


}







/* [4] GESTION DE LA MESSAGEBOX
==============================================================*/
function messageBox(message, type){

	/* on affecte le message */
	DOM.msgBox.innerHTML = message;

	/* on définit le style s'il est correct */
	if( ['success', 'info', 'warning', 'error'].indexOf(type) > -1 )
		DOM.msgBox.className = type;
	else
		DOM.msgBox.className = 'info';



	if( msgBoxTimeout != null ) // si une autre message box est en cours, on arrête son timeout
		clearTimeout(msgBoxTimeout);

	msgBoxTimeout = setTimeout(	function(){
		DOM.msgBox.className = '';
	}, 2000);

}