DOM = {
	WRAPPER: $('WRAPPER'),
		HEADER: $('HEADER'),
		MENUSIDE: $('MENU-SIDE'),
		CONTAINER: $('CONTAINER')
};


/* [0] Instanciation
===========================================*/
var pageManager = new pageManagerClass();
pageManager.setPage(null, '/view', DOM.CONTAINER, ['dashboard', 'machines', 'users', 'sync', 'settings'] );




/* [1] Toggle du sub-menu-side <-> navigation
===========================================*/
function navSubMenu(subsection){
	/* [1] Format du param
	------------------------------------------------*/
	// Contient l'element courant
	var current = document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink="'+pageManager.vars[0]+'"]');

	// Contiendra l'element cible
	var target = null;

	// si @subsection est un element, on le prends
	target = (subsection instanceof Element) ? subsection : null; 

	// Si string, on trouve l'element correspondant
	target = (typeof subsection == 'string') ? document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink="'+subsection+'"]') : target;

	// Si rien trouve, on prend le premier element correspondant a la premiere page
	target = (target == null) ? document.querySelector('#CONTAINER > .sub-menu-side > span[data-sublink]') : target;
	console.log( target );

	// Si le param n'est toujours pas bon, on retourne une erreur
	if( target == null ) return false;

	/* [2] Gestion de l'affichage de l'element
	------------------------------------------------*/
	// On desactive l'element courant
	if( current != null )
		current.remClass('active');
	// On active le nouveau
	if( target != null )
		target.addClass('active');

	/* [3] Gestion de pageManager
	------------------------------------------------*/
	// Si element, on recupere le data-link
	var page = null;

	// On met a jour la variable page-manager si data-link trouve
	if( target.getData('sublink') )
		pageManager.vars[0] = target.getData('sublink');

}






/* [2] Toggle du side-menu <-> navigation
===========================================*/
function navMenu(section){
	/* [1] Format du param
	------------------------------------------------*/
	// Contient l'element courant
	var current = document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.page+'"]');

	// Contiendra l'element cible
	var target = null;

	// si @section est un element, on le prends
	target = (section instanceof Element) ? section : null; 

	// Si string, on trouve l'element correspondant
	target = (typeof section == 'string') ? document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+section+'"]') : target;

	// Si rien trouve, on prend le premier element correspondant a la premiere page
	target = (target == null) ? document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.pagelist[0]+'"]') : target;

	// Si le param n'est toujours pas bon, on retourne une erreur
	if( target == null ) return false;

	/* [2] Gestion de l'affichage de l'element
	------------------------------------------------*/
	// On desactive l'element courant
	if( current != null )
		current.remClass('active');
	// On active le nouveau
	if( target != null )
		target.addClass('active');

	/* [3] Gestion de pageManager
	------------------------------------------------*/
	// Si element, on recupere le data-link
	var page = null;

	// On charge la page si data-link trouve
	if( target.getData('link') ){
		DOM.HEADER.addClass('loading'); // Animation de chargement

		pageManager.setPage( target.getData('link') );

		pageManager.activeXHR.addEventListener('loadend', function(){

			// On retire l'icone de chargement
			DOM.HEADER.remClass('loading');

			// On gere la navigation du sous-menu
			navSubMenu(null);

			// GESTION DE LA NAVIGATION DU SOUS-MENU
			document.querySelector('#CONTAINER > .sub-menu-side').addEventListener('click', function(e){
				var target = e.target

				while( target != document.body && !target.getData('sublink') )
					target = target.parentNode;

				if( target.getData('sublink') )
					navSubMenu(target);
			}, false);

		}, false);
	}

}navMenu(pageManager.page);




















/* [4] Gestion de la navigation (physique)
===========================================*/
DOM.MENUSIDE.addEventListener('click', function(e){
	var target = e.target;

	// On remonte dans les parents au bon niveau
	while( target != document.body && !target.getData('link') )
		target = target.parentNode;

	// Si on a trouve l'element, on l'utilise pour la page
	if( target.getData('link') )
		navMenu(target.getData('link'));
}, false);