// Add event listeners to first and second level menu items
// to reveal the next level through a style change
window.addEvent('domready', function () {
    $$('.nav_first_level').each(function (el) {
        
        var fx = new Fx.Morph(el, {
            duration: 100,
            transition: Fx.Transitions.Quad.easeIn
        });
        // get the div element of the next level
        if (el.getElementsByTagName("div").length >= 1) {
            var hiddenmenu = el.getElementsByTagName("DIV")[0];
            //alert(hiddenmenu.nodeName);
            
            el.addEvents({
                'mouseenter': function () {
                    // loop through all of the sibling LI elements to remove background image
                    // because IE7 places the background image on top of revealed elements!
                    listItems = el.parentNode.getElementsByTagName("LI");
                    for (i=0 ; i < listItems.length; i++)
                    {
                       listItems[i].className = "nav_first_level_expanded";
                    }
                    hiddenmenu.style.display = "block";
                },
                'mouseleave': function () {
                    // restore the background image
                    listItems = el.parentNode.getElementsByTagName("LI");
                    for (i=0 ; i < listItems.length; i++)
                    {
                       listItems[i].className = "nav_first_level";
                    }
                    hiddenmenu.style.display = "none";
                }
            });
        };
    });
    $$('.nav_second_level').each(function (el) {
        
        var fx = new Fx.Morph(el, {
            duration: 100,
            transition: Fx.Transitions.Quad.easeIn
        });
        
        // get the div element of the next level
        if (el.getElementsByTagName("div").length >= 1) {
            var hiddenmenu = el.getElementsByTagName("DIV")[0];
            //alert(hiddenmenu.nodeName);
            
            el.addEvents({
                'mouseenter': function () {
                    hiddenmenu.style.display = "block";
                },
                'mouseleave': function () {
                    hiddenmenu.style.display = "none";
                }
            });
        };
    });
});