// global variables to represent state
var global_menuOpen   = [false, false, false, false];
var global_mouseInTop = [false, false, false, false];
var global_mouseInSub = [false, false, false, false];

// (hopefully) 1 to 1 mapping so global_subMenu[i] will be the sub menu for global_topMenu[i]
// not sure if we even need subMenu elements...just need to be able to access top menu from subMenu events
var global_topMenu = new Object();
var global_subMenu = new Object();
var global_menuContainer = new Object();

var global_timeout = 200;

var down = new Object();
var up = new Object();

Event.observe(window, 'load', function() {
    // Get all subMenu containers
    var subMenus = $$("ul.topLevel li.topLevelDrop div");

    subMenus.each(function(element, k) {
        global_menuContainer[k] = element;
    });

    // Get all top level menu items
    var menuItems = $$("ul.topLevel li.topLevelDrop");
    
    // Add a mouseover and mouseout event to each top level menu item
    menuItems.each(function(element, i) {
        // populate global top menu array
        global_topMenu[i] = element;
        
        Event.observe(element, 'mouseover', function() {
            clearTimeout(down[i]);
            // we know mouse is in the top level
            global_mouseInTop[i] = true;
            
            // check to see if the menu is already open before trying to slide it down
            down[i] = setTimeout("checkAndSlideDown(" + i + ")", global_timeout);
        });
        
        Event.observe(element, 'mouseout', function() {
            clearTimeout(up[i]);
            // we know mouse is no longer in top level
            global_mouseInTop[i] = false;
            
            // check to see if mouse is in menu before closing
            up[i] = setTimeout("checkAndSlideUp(" + i + ")", global_timeout);
        });
    });
    
    // Get all sub menu items
    // var subMenuItems = $$("ul.subLevel");
    var subMenuItems = $$("ul.topLevel li.topLevelDrop div");
    
    // Add a mouseover and mouseout event to each sub level menu item
    subMenuItems.each(function(element, j) {
        // populate global sub menu
        global_subMenu[j] = element;
        
        Event.observe(element, 'mouseover', function() {
            clearTimeout(up[j]);
            // We know that mouse is in sub menu
            global_mouseInSub[j] = true;
        });
        
        Event.observe(element, 'mouseout', function() {
            clearTimeout(up[j]);
            // we know mouse is not in sub menu
            global_mouseInSub[j] = false;
            
            // check to see if mouse is in menu before closing
            up[j] = setTimeout("checkAndSlideUp(" + j + ")", global_timeout);
        });
    });
});

function checkAndSlideDown(i) {
    if (!global_menuOpen[i] && global_mouseInTop[i]) {
        global_menuOpen[i] = true;
        Effect.SlideDown(global_menuContainer[i], { duration : .2, queue : { position: 'end', scope: 'effectqueue'+i, limit: 1 }});
    }
}

function checkAndSlideUp(i) {
    if (!global_mouseInSub[i] && !global_mouseInTop[i] && global_menuOpen[i]) {
        global_menuOpen[i] = false;
        Effect.SlideUp(global_menuContainer[i], { duration : .2, queue : { position: 'end', scope: 'effectqueue'+i, limit: 1 }});
    }
}