﻿// JavaScript menu

/* Ce JS est destiné à afficher des menus déroulants sous IE6

	Il ne devrait pas interférer avec les styles CSS fonctionnant sous
	Firefox et IE7+
	
	Il nécessite l'appel de setHover() dans le onload du <body> (voir plus loin pour cette fonction)

*/

/* Note développement : ajouter des paramètres permettant d'indiquer les tags des éléments afin que le code
	marche aussi bien avec des <ul><li> qu'avec des <div> 
*/


/* Cette fonction doit être appelée au chargement de la page (onload). 
	Elle ajoute le onhover/out à tous les LI de l'élément passé en paramètre. 
	Pour préciser une temporisation, changer la valeur de la variable "letemps"
	avant d'appeler setHover().
*/

var letemps = 500;

function setHover(menuid){
	//alert("setHover("+menuid+")");
	//console.log("setHover("+menuid+")");
	
	if (menuid == null) { menuid = 'menu'; }
	var menu = document.getElementById(menuid);
	if (menu == undefined) { return; }
	
	var LI = menu.getElementsByTagName('li');
	var nLI = LI.length;
	
	for(i=0; i < nLI; i++){
		LI[i].onmouseover = function() {
			hover(this, letemps);
		}
		LI[i].onmouseout = function() {
			hoverout(this, letemps);
		}
	}
	
	//setHoverHint();
}		




/* Cette fonction devrait être générique : elle affiche le premier UL trouvé dans l'élément passé.
	Préciser "time" si le hoverout est temporisé. Le hover ne le sera pas mais annulera un hoverout temporisé le cas échéant.
*/
function hover(obj, time){
	//alert('pi');
	
	UL = obj.getElementsByTagName('ul');	// cherche un sous-menu <ul> ds le <li> (obj)
	
	if(UL.length > 0){
		
		var sousMenu = UL[0];	// le premier <ul> trouvé
		
		if (typeof(time) == "undefined") {
			sousMenu.style.display = 'block';
		}
		else {	// une temporisation est définie
			showhover(sousMenu);
			//window.status += '; in ('+obj.id+'): '+UL[0].menutoContext;
			sousMenu.style.display = 'block';
		}
		
	}	
}

/* Cette fonction devrait être générique : elle cache le premier UL trouvé dans l'élément passé.
	Préciser "time" si le hoverout est temporisé.
*/
function hoverout(obj, time) {
	
	UL = obj.getElementsByTagName('ul');
	if(UL.length > 0){
		
		var sousMenu = UL[0];
		
		if (time == undefined) {
			clearhover(sousMenu);
		}
		else {
			sousMenu.menutoContext=setInterval(function() { clearhover(sousMenu); },time);
			//window.status += '; out ('+obj.id+'): '+UL[0].menutoContext;
		}
		
	}
				
}

/* fonction appelée quand l'élément est montré. C'est ici qu'on peut gérer plus précisemment la gestion de
	la temporisation et éventuellement cacher des éléments de même type déjà ouverts (un seul élément ouvert en même temps).
	
	obj : le UL contenu dans le LI, autrement dit le sous-menu 
*/
function showhover(obj) {
	
	if (obj.menutoContext != undefined) { 
		clearInterval(obj.menutoContext); 
		obj.menutoContext = undefined; 
	}
	
	var niv = obj.parentNode.getAttribute("in_niveau");
	var lis = obj.parentNode.parentNode.getElementsByTagName("li");
	
	//alert(lis.length);
	//console.log(niv, lis);
	
	if (niv == null) { niv = -1; }	// attribut indéfini, valeur par défaut pour comparaison

	
	// Boucle sur les éléments de menu et ferme ceux du même niveau (concept: un seul bloc menu à la fois)
	// NOTE : ceci nécessite que les <li> ait l'attribut 'in_niveau' renseigné
	
	for (var i=0; i < lis.length; i++) {
		
		if (lis[i] != obj.parentNode && lis[i].getAttribute('in_niveau') == niv) {
			//alert(lis[i].id);
			var ul = lis[i].getElementsByTagName('ul');
			if (ul.length > 0) {	// seulement si un UL est présent dans le LI
				//window.status = "; "+ul[0].parentNode.id;
				//console.log("Closing ", ul[0].parentNode.id);
				
				clearhover(ul[0]);
			}
		}
		
	}
}

/* fonction appelée quand l'élément doit disparaitre (après temporisation le cas échéant).
On gère ici la disparition par CSS et l'annulation de l'interval. Cette fonction peut être modifiée.
*/
/* obj : le UL contenu dans le LI */
function clearhover(obj) {
	//window.status += ";cl "+obj.parentNode.id;
	
	var interval = obj.menutoContext
	/*if (obj.parentNode) {
		window.status += ";"+obj.parentNode.id+" clear "+interval;
	}
	else {
		window.status += "; error "+obj+" ."+interval;
	}*/
	obj.style.display = '';
	
	if (interval != undefined) {
		clearInterval(interval);
	}
	
	// fermer les hovers plus bas dans la hiérarchie également
	
	/*uls = obj.getElementsByTagName('ul');
	//window.status = uls.length;
	for (var i=0; i < uls.length; i++) {
		//window.status += "; "+uls[i].parentNode.id;
		clearhover(uls[i]);
	}*/
}


