window.addEvent('domready', function(){
    /* top level elements */
    var menu = $('navigation');
    var menuitems = $ES('ul#navigation>li');

    menu.addClass('menu');
    menu.coords = menu.getCoordinates();

    /* initialize child menus */
    menuitems.each(function(menuitem){
        menuitem.addClass('menuitem');
        
        // sub menu
        menuitem.child = menuitem.getElement('ul');
        if (menuitem.child){
            menuitem.child.fx = new Fx.Styles(menuitem.child, {duration: 250, transition: Fx.Transitions.Circ.easeInOut});
            menuitem.child.coords = menuitem.child.getCoordinates();
            menuitem.child.addClass('submenu').setStyles({'display':'none','opacity':0,'position':'absolute'});
            menuitem.child.addEvent('mouseleave', function(e){
                if (inBounds(menuitem.child, e) == false)
                    menuitem.fireEvent('mouseleave', e);
            });

            // sub menu items
            menuitem.child.getElements('li').each(function(child_el){
                child_el.addClass('submenuitem');
                child_el.addEvent('mouseover', function(e){
                    child_el.addClass('submenuitem-selected');
                });
                child_el.addEvent('mouseout', function(e){
                    child_el.removeClass('submenuitem-selected');
                    if (inBounds(menuitem.child, e) == false)
                        menuitem.fireEvent('mouseleave', e);
                });
            });
            
            // check the links, widen them to fit the dd
            menuitem.child.getElements('a').each(function(a){
                a.setStyles({'display':'block',
                    'width': menuitem.child.coords.width
                });
                
                a.addEvent('mouseout', function(e){
                    if (inBounds(menuitem.child, e) == false)
                        menuitem.fireEvent('mouseleave', e);
                });
            });
        }
        
        menuitem.coords = menuitem.getCoordinates();
        

        /* mouse enter */
        menuitem.addEvent('mouseenter', function(){
            menuitem.addClass('menuitem-selected');
            if (menuitem.child){
                menuitem.child.fx.clearTimer();
                menuitem.child.fx.custom({'opacity':[0,.9],
                    'width':[0, menuitem.child.coords.width],
                    'height':[menuitem.coords.height, menuitem.child.coords.height]
                });
                menuitem.child.setStyle('visibility','hidden').setStyle('display','block');
                menuitem.child.setStyles({
                    'top': menuitem.coords.top,
                    'left': menuitem.coords.width + menu.coords.left
                });
                
            }
        });
        
        /* mouse leave */
        menuitem.addEvent('mouseleave', function(e){
            menuitem.removeClass('menuitem-selected');
            if (menuitem.child){
                menuitem.child.fx.clearTimer();
                menuitem.child.fx.custom({
                    'opacity':[.9,0],
                    'width':0,
                    'height':[menuitem.coords.height]
                });
            }
        });

    });
});

function inBounds(element, event){
    var coords = $(element).getCoordinates();
    var x = event.client.x;
    var y = event.client.y;
    
    var x_contained = (x > coords.left && x < coords.left + coords.width) ? true : false;
    var y_contained = (y > coords.top && y < coords.top + coords.height) ? true : false;
        
    return (x_contained && y_contained) ? true : false;
};