﻿/* menu script. requre prototype */
function prepareMenu()
{$$("#topMenu li a, #topMenu li span").each(menuItem_AddEvents);}

function menuItem_AddEvents(element,index)
{
Event.observe(element, "mouseover", menuItemActivate);
}

var arrMenuActived;

function menuItemActivate()
{
var li = this.parentNode;
var ul = li.parentNode;
var div = ul.parentNode;
var parentLvlLi = (div.className!="lvl0")?($(ul.attributes["parent"].value)):null;
var targetUl = (div.className!="lvl2")?($$("#topMenu ul[parent="+li.id+"]")):null;
targetUl = (targetUl!=null && targetUl.size()>0)?targetUl.first():null;

clearTimeout(menuHideLevel_TimerId);
menuHideLevel_TimerId = null;
menuHideLevel = null; 


/*
we should watch for: 
- He left Li
- He left ul 
- The arrival of a child Ul

When you go to a child UL, deactivation its own UL canceled and observe child UL
*/

Event.observe(div, "mouseout", handlerDivOut);
Event.observe(li, "mouseout", handlerLiOut);
if(targetUl) Event.observe(targetUl.parentNode, "mouseover", handlerOverChild);


var objectsToShow = {};
objectsToShow[li.id] = li;
objectsToShow[ul.id] = ul;
if(parentLvlLi)
{
    objectsToShow[parentLvlLi.id] = parentLvlLi; //will show parent li
    objectsToShow[parentLvlLi.parentNode.id] = parentLvlLi.parentNode; //will show parent ul
}
if(div.className == "lvl2")
{
    var topLi = $(parentLvlLi.parentNode.attributes["parent"].value);
    objectsToShow[topLi.id] = topLi; //will show parent li
}



if(targetUl)objectsToShow[targetUl.id] = targetUl;

if(arrMenuActived == null) //store original activated elements
    arrMenuActived = $$("#topMenu .active");

var arrObjectsToHide = $$("#topMenu .active");

for(var i=0;i<arrObjectsToHide.length; i++)
{
    var obj = arrObjectsToHide[i];
    if(objectsToShow[obj.id] == null)
        Element.removeClassName(obj, "active");
}

for(var id in objectsToShow) Element.addClassName(objectsToShow[id], "active");
}

var menuHideLevel_TimerId = null;
var menuHideLevel = null;

function handlerOverChild(element)
{ // mouse over child: safe parent, drop hide parent timer

clearTimeout(menuHideLevel_TimerId);
menuHideLevel = null;

Event.stopObserving(this.previousSibling, 'mouseout', handlerDivOut);
Event.observe(this, 'mouseout', handlerDivOut);

//$('topMenu').appendChild(document.createTextNode(" handlerOverChild "));
}

function handlerLiOut(element)
{ // hide child
//$$("#topMenu .lvl2 .active").each(function(element){element.Element.removeClassName('active');})

}

function handlerDivOut(element)
{
/*
we should watch for: 
- He left ul 
- The arrival of a child Ul

When you go to a child UL, deactivation its own UL canceled and observe child UL
*/
Event.stopObserving(this, 'mouseout', handlerDivOut)
menuHideLevel_TimerId  = setTimeout(menuHideUl, 1500);
menuHideLevel = this.id;
}

function menuHideUl()
{
clearTimeout(menuHideLevel_TimerId);
menuHideLevel_TimerId = null;

///$('topMenu').appendChild(document.createTextNode(" menuHideUl: " + menuHideLevel));

if(menuHideLevel) 
{
    var obj = $('#' + menuHideLevel + ' .active' );
    Element.removeClassName(obj, 'active');
    if(obj && obj.parentNode.className == "lvl2")
    {//set hide parent timer
        menuHideLevel_TimerId  = setTimeout(menuHideUl, 1500);
        menuHideLevel = this.previousSibling.className;
    }
    else 
    {
        menuHideLevel = null;  
        menuReActivateItems();
    }
}
}

function menuReActivateItems()
{
$$("#topMenu .active").each(function(element){Element.removeClassName(element, 'active');})
arrMenuActived.each(function(element){Element.addClassName(element, 'active');})
}


