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

    menu.addClass('menu');
    menu.coords = menu.getCoordinates();
    
    /* initialize child menus */
    menuitems.each(function(menuitem){
        menuitem.addClass('menuitem');
        
        // image preloading
        if (menuitem.getElement('img')){
            menuitem.img = menuitem.getElement('img');
            menuitem.img_off = new Asset.image(menuitem.img.src);   
            menuitem.img_on = new Asset.image(menuitem.img.src.replace(/\./,"_o\."));   
        }
                
        // sub menu
        menuitem.submenu = menuitem.getElement('ul');
        if (menuitem.submenu){
            menuitem.submenu.fx = new Fx.Styles(menuitem.submenu, {duration: 500, transition: Fx.Transitions.Circ.easeOut});
            menuitem.submenu.coords = menuitem.submenu.getCoordinates();
            menuitem.submenu.addClass('submenu').setStyles({'display':'none','opacity':0,'position':'absolute'});
            menuitem.submenu.addEvent('mouseleave', function(e){
                if (inBounds(menuitem.submenu, e) == false)
                    menuitem.fireEvent('mouseleave', e);
            });

            // sub menu items
            menuitem.submenu.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.submenu, e) == false)
                        menuitem.fireEvent('mouseleave', e);
                });
            });
            
            // check the links, widen them to fit the dd
            menuitem.submenu.getElements('a').each(function(a){
                a.setStyles({'display':'block', 'width': menuitem.submenu.coords.width });
                a.addEvent('mouseout', function(e){
                    if (inBounds(menuitem.submenu, e) == false)
                        menuitem.fireEvent('mouseleave', e);
                });
            });
        }
        
        menuitem.coords = menuitem.getCoordinates();
        
        
        /* mouse enter */
        menuitem.addEvent('mouseenter', function(e){
            menuitem.addClass('menuitem-selected');
            
            if (menuitem.img)
                menuitem.img.src = menuitem.img_on.src;
            
            if (menuitem.submenu){
                menuitem.submenu.setStyles({
                    'visibility':'hidden',
                    'display':'block',
                    'top': menuitem.getSize().y,
                    'left': menuitem.getPosition().left
                });
                                
                menuitem.submenu.fx.clearTimer();
                menuitem.submenu.fx.custom({
                    'opacity':[0, .85],
                    'height':[0, menuitem.submenu.coords.height]
                });
            }
        });
        
        /* mouse leave */
        menuitem.addEvent('mouseleave', function(e){
            menuitem.removeClass('menuitem-selected');
            
            if (menuitem.img)
                menuitem.img.src = menuitem.img_off.src;

            if (menuitem.submenu){
                menuitem.submenu.fx.clearTimer();
                menuitem.submenu.fx.custom({
                    'opacity':[.85, 0],
                    'height':[menuitem.submenu.coords.height, 0]
                });
            }
        });

    });
});

function inBounds(element, e){
    e = new Event(e);
    
    var coords = $(element).getCoordinates();
    var x = e.client.x;
    var y = e.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;
};