// jquery pulldown menu stuff

// this is called from body onload, not onready, so that positioning works
function init_menus(){
    //console.log("intitializing menus");
    // object to hold menu hide and hover timeouts
    window.menuTimeouts = new Object(); 
    window.menuHoverTimeouts = new Object();

    // put the active class on the ancestors of the active menu item
    var activeMenuItem = $('ul.list-menu.pulldown li.active')[0];
    $(activeMenuItem).parents('li').each( function(){
        $(this).addClass('active');
        $(this).children('a').addClass('active');
    });
    
    // MENUS:
    // detach the menus from their proper parents and attach to the outer 
    // container for consistent positioning
    //$('.viewlet.pulldown-menu').each( prepare_menu );
    
    // bind select the collection li, and attach a hover listener to it
    $('ul.list-menu.pulldown > li').hover(menuMouseOver, menuMouseOut);
    
}


// save the position of the dropdown menu, then detach it and reattaching
// it to page inner, then positioning it back again, for cross browser compatibility
// TODO: bring this back later, fixes them for IE7
// XXX: this won't work with the way we are doing traversal now, grr
function prepare_menu(){
    // 'this' is the submenu div
    //console.log("prepare_menu() this: ", this);

    // save original position based on original parent li
    var position = $(this).offset(); 
    var height = $(this).height();
    // detach from parent and reattach to outer page container
    // this is to make sure z-index will put it always in foreground
    $('.page.container').after( $(this).remove() );

    // set the position of the menu now that it has been reattached
    $(this).css("position", "absolute");
    $(this).css("z-index", "2");
    $(this).css("top", position.top ).css("left", position.left-1 );
}

// clear timeouts for own submenu
// clear timeouts for child submenu
// show child show submenu
function menuMouseOver(evt){
    //console.log("menuMouseOver() this: ", this );
  
    // clear any timeouts running on containing submenu
    var thisSubmenu = $(this).parents('.submenu')[0];
    if( thisSubmenu ){
        var thisSubmenuId = $(thisSubmenu).attr('id');
        clearTimeout( window.menuTimeouts[thisSubmenuId]);
    }
    
    // clear any timeouts running on child submenu
    var childSubmenu = $(this).children('.submenu')[0];
    if( childSubmenu ){
        var childSubmenuId = $(childSubmenu).attr('id');
        clearTimeout( window.menuTimeouts[childSubmenuId]);
    }
    // instantly close any sibling submenus
    $(this).siblings('li').children('.submenu').hide();
    // show child menu submenus 
    $(childSubmenu).show();
    
    // instantly remove the hover trail from siblings
    $(this).siblings('li.hover-trail').removeClass('hover-trail');
    // add the hover class to current el and it's ancestors
    $(this).parents('li').add(this).each( function(){ 
        // if this element is scheduled for timeout, clear it
        var node = this;
        clearTimeout( window.menuHoverTimeouts[ $(this).attr('id') ] );
        $(this).addClass('hover-trail');
    });
    
}

// set a time out to hide this submenu and children
// called on mouse out of the li element
function menuMouseOut(evt){
    //console.log("menuMouseOut(), this: " + this );
   
    // set a time out to hide this el's child submenu
    // (it will be cancelled on a move into the submenu
    var childSubmenu = $(this).children('.submenu')[0];
    if( childSubmenu ){
        var childSubmenuId = $(childSubmenu).attr('id');
        window.menuTimeouts[ childSubmenuId ] = setTimeout( function(){ 
            $(childSubmenu).hide(); 
        }, 400 );
    }
  
    // set a timeout to remove the hover trail
    var node = this;
    window.menuHoverTimeouts[ $(node).attr('id') ] = setTimeout( function(){ 
        $(node).removeClass('hover-trail');
    }, 400 )

}