/**********************************
 *  GRACE Site Menu Tab Lib
 *  
 *  Uses Scriptaculous to work the tabs
 *  for the main menu, complete with
 *  "stickiness".
 *  
 *  By Kevin Mann
 **********************************/

// The DOM pointer to the main tabs for the page
var main_tabs;

// The pointer to the <ul> elements for the level two menus
var sub_tab_uls;

// The number of the main tab that is selected, if any
var selected = null;

// Timer for closing a tab.  Set it on a timer so the user
// has time to hover over a link before we shut the second-level
// menu on them.
var close_timer = null;

// Settable timer delay for closing second-level menus
var close_delay = 350;

function tab_load_handler(){
	
	main_tabs   = $$('ul.menulist li'); // Get main menu
	sub_tab_uls = $$('ul.mini-list'); // Get sub-tabs
	
	if(main_tabs != null && sub_tab_uls != null){
		for(var i = 0; i < main_tabs.length; i++){
			// Really, the better way is to bind these to the parent
			// and use just one event handler.  BUT, with the tabs floated,
			// the parent has no size.  As such, the user technically cannot
			// mouse over it.  Hence... bind to the child nodes.
			main_tabs[i].observe('mouseover', handleTabOver);
			main_tabs[i].observe('mouseout',  handleTabOut);
			
			if(main_tabs[i].hasClassName("selected") && selected == null){
				selected = i;
			}
			
			var elem = $(main_tabs[i].id + '-s');
			if(elem){
				elem.observe('mouseover', handleTwoLevelHover);
				elem.observe('mouseout',  handleTwoLevelHoverOut);
				
				var tab_loc = main_tabs[i].viewportOffset();
				var tab_width = main_tabs[i].getWidth();
				var elem_width = elem.getWidth();
			
				elem.setStyle({left: ((tab_loc[0]+(tab_width/2).round()) - (elem_width/2).round()) + "px"});
			}
		}
		reselectDefault();
	}
}

// If the window is resized, we need to reposition all the second-level menus.
// Do that here.
function window_resize_handler(event){
	if(main_tabs != null && sub_tab_uls != null){
		for(var i = 0; i < main_tabs.length; i++){

			var elem = $(main_tabs[i].id + '-s');
			if(elem){
				var tab_loc = main_tabs[i].viewportOffset();
				var tab_width = main_tabs[i].getWidth();
				var elem_width = elem.getWidth();
			
				elem.setStyle({left: ((tab_loc[0]+(tab_width/2).round()) - (elem_width/2).round()) + "px"});
			}
		}
	}
}

// Handles the hover of a mouse
function handleTabOver(event){
	cancel_timer();
	deselectAll();
	selectTab(this);
}

// handles loss of hover
function handleTabOut(event){
	cancel_timer();
	close_timer = setTimeout(disappearAfterTime, close_delay);
}

// handle hover over second-level menu
function handleTwoLevelHover(){
	// Just cancel the timer and keep the tab selected.  That's
	// all there is to it.
	cancel_timer();
}

// Handles loss of mouse focus for second-level menu
function handleTwoLevelHoverOut(){
	// Cancel any running timers and schedule a close.
	cancel_timer();
	close_timer = setTimeout(disappearAfterTime, close_delay);
}

// Handler for timeout.  Runs through and deselects everything,
// then re-selects the default.
function disappearAfterTime(){
	deselectAll();
	reselectDefault();
}

// This function cancels the running close-tab
// timer, if there is one.
function cancel_timer(){
	if(close_timer != null){
		clearTimeout(close_timer);
		close_timer = null;
	}
}

// Selects/hovers a given tab, including
// showing the second-level menu
function selectTab(tab){
	if(typeof(tab) == "number"){
		tab = $('m-tab-' + tab);
	}
	if(tab != null){
		tab.addClassName("selected");
		// Now open the second-level menu, if there is one
		var menu_two = $(tab.id + '-s');
		if(menu_two){
			menu_two.setStyle({display: "block"});
		}
	}else if(console) console.error("Could not find tab to select!");
}

// Deselects/unhovers a given tab, including
// hiding the second-level menu
function deselectTab(tab){
	if(typeof(tab) == "number"){
		tab = $('m-tab-' + tab);
	}
	if(tab != null){
		tab.removeClassName("selected");
		
		// Now open the second-level menu, if there is one
		var menu_two = $(tab.id + '-s');
		if(menu_two){
			menu_two.setStyle({display: "none"});
		}
	}else if(console) console.error("Could not find tab to deselect!");
}

// A quickie function to simply run through and remove
// any class=selected modifier.
function deselectAll(){
	if(main_tabs != null){
		for(var i = 0; i < main_tabs.length; i++){
			deselectTab(i);
		}
	}
}

// Used to reselect the tab that was selected when the page loaded 
function reselectDefault(){
	if(selected != null){
		selectTab(selected);
	}
}

// Start up roll-over code
document.observe("dom:loaded", tab_load_handler);
Event.observe(document.onresize ? document : window, "resize", window_resize_handler);