// Préciser ici les padding des "ul" de niveau 2 (en px)
var paddingTop = 0;
var paddingBottom = 0;

// Indiquer ici le temps de transition pour l'ouverture d'un menu
var tempsTransitionMenuDeroulant = 800;

// Indiquer ici le type de transition (voir http://mootools.net/docs/core/Fx/Fx.Transitions)
var typeTransitionMenuDeroulan = Fx.Transitions.Cubic.easeOut;

//////////////////////////////////////////////////

var paddingHauteur = paddingTop + paddingBottom;
// Préciser ici le nom de la classe du "a" de niveau 1 actif
var classActive = "trail";

var ulNiveau2;

window.addEvent('domready', menuDeroulant);

function menuDeroulant()
{
	for (idMenu=0; idMenu<getNbMenus(); idMenu++)
	{
		if ($('menu_'+idMenu))
		{
			$('menu_'+idMenu).addEvents(
				{ 
				    'mouseenter': menuMouseOver,
				    'mouseleave': menuMouseOut
				}
			);
		}
	}
	var sfEls = document.getElementById("menu").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}

function getNbMenus() {
	var nbMenus = 0;
	// On cible le "ul" de niveau 1
	if ($('menu'))
	{
		var ulNiveau1 = $('menu').getElementsByTagName('ul')[0];
		if(ulNiveau1)
		{
			// On parcourt les "li"
			for(i=0; i<ulNiveau1.getElementsByTagName('li').length; i++)
			{
				// On cible un "li"
				var liElt = ulNiveau1.getElementsByTagName('li')[i];		
				// On vérifie que c'est bien un "li" de niveau 1
				if (liElt && liElt.parentNode.className == 'level_1')
				{
					// On vérifie qu'il y a un bien un sous-menu
					/*if(liElt.getElementsByTagName('ul').length > 0)
					{	
						nbMenus++;
					}*/
					nbMenus++;
				}
			}
		}
	}
	return nbMenus;	
}

function overflow() {
	ulNiveau2.style.overflow = 'visible';
}

function menuMouseOver ()
{	
    // On cible le "ul" du sous-menu
	ulNiveau2 = this.getElementsByTagName('ul')[0];
	if (ulNiveau2) 
	{	
		// On cible le "a" de niveau 1
		var aNiveau1 = this.getElementsByTagName('a')[0];	
		if (aNiveau1 && aNiveau1.parentNode.parentNode.className.indexOf("level_1")>=0)
		{
			// On change la classe du "a" de niveau 1 pour qu'il soit actif
			aNiveau1.className += " " + classActive;
		}	
		// On affiche le sous-menu et on réinitialise sa hauteur
		ulNiveau2.style.display = "block";
		ulNiveau2.style.height = "auto";
		var hauteur = - paddingHauteur;
		// On récupère la hauteur du sous-menu
		if (ulNiveau2.offsetHeight) 
		{
			hauteur+=ulNiveau2.offsetHeight;
		}
		else if (ulNiveau2.style.pixelHeight) 
		{
			hauteur+=ulNiveau2.style.pixelHeight;
		}
		// On replie le sous-menu
		ulNiveau2.style.height = '0';
		// Tween
		
		$(ulNiveau2.id).set('tween',
			{
				duration: tempsTransitionMenuDeroulant,
				transition: typeTransitionMenuDeroulan
			}
		).tween('height', hauteur+'px');
		//
		setTimeout("overflow()", tempsTransitionMenuDeroulant);
	}
}

function menuMouseOut ()
{	
	// On cible le "a" de niveau 1
	var aNiveau1 = this.getElementsByTagName('a')[0];	
	if (aNiveau1)
	{
		if (aNiveau1.parentNode.parentNode.className.indexOf("level_1")>=0)
		{
			// On change la classe du "a" de niveau 1 pour qu'il soit actif
			aNiveau1.className = aNiveau1.className.substring(0, aNiveau1.className.lastIndexOf(classActive));
		}	
		// On change la classe du menu de niveau 1
		aNiveau1.className.replace(" active", "");	
	}
	// On cible le "ul" du sous-menu
	var ulNiveau2 = this.getElementsByTagName('ul')[0];
	if (ulNiveau2)
	{
		// On masque le sous-menu
		ulNiveau2.style.display = "none";
		// On réinitialise la hauteur du sous-menu
		ulNiveau2.style.height = "auto";
		ulNiveau2.style.overflow = 'hidden';
	}
}