var topLevelItems = new Hash();
// number of main navigation items, set in initNavigation
var numberOfItems = 0;
// temporary style properties for submenus (hidden instead of display:none so jquery can calculate the correct size)
var TEMP_VIS_PROPS = { visibility: "hidden", display: "block" };
// index breakpoint indicating which submenu items can open to the right (> index open to left)
var OPEN_RIGHT = 3;
		
		
/*
* grab all main nav items and set number to global variable
* put the plain keys in array to use for further reference
*/
function initNavigation() {
	var mainItems = getElementsByClass("topLevelItem", "a", "navigation", true);
	numberOfItems = mainItems.length;
	for(i=0;i<numberOfItems;i++) {
		var elmId = mainItems[i].id;
		var cutIdx = elmId.indexOf("_",0);
		var key = elmId.substr(cutIdx+1);
		topLevelItems.set(i,key);
	}
}
		
/*
* hide all other submenus
* calculate the position for the current submenu specified by index
* open it and attach the mouse out events to opening parent und submenu
*/
function openSubMenu(key) {
	var subItem = document.getElementById("sub_"+key);
	hideVisibleSubs(key);
	setPosition(key);
	Element.setStyle(subItem, {
		'display': 'block'
	});
	toggleActiveClassAtAnchor(key,true);
	addMouseOutEvents(key);
}
		
/*
* add mouseout event listening to opening main item and open subitem
*/
function addMouseOutEvents(key) {
	var parentElement = document.getElementById("mainAnchor_"+key);
	var subElement = document.getElementById("sub_"+key);
	jQuery(subElement).mouseleave(function() {
		closeSubMenu(key);
	});
	jQuery(parentElement).mouseleave(function() {
		closeSubMenu(key);
	});	
}
		
/* 
* if the specified index is > OPEN_RIGHT
* open the submenus to the left
* to calculate correct width (incl. width definitions by styles) the element has to use display:block
* this is done by the swap function which resets to original style definitions automatically
* calucation of left position:
* parentOffsetLeft: left position of opening parent item (use of jQuery to ensure pos returned is relative to document, not parent item)
* xOuter: parentOffsetLeft + width of opening parent item (!! check if necessary 2 use outerWith of jQuery!!)
* xOuter - width of submenu to be opened = x position of submenu to be opened
* calculation of top position:
* parentOffsetTop: top postion of opening parent item (use of jQuery to ensure pos returned is relative to document, not parent item)
* parentOffsetTop - parentItem height => yFinal: top position of sub item
*/
function setPosition(key) {
	var itemWidth = 0;
	var subItem = document.getElementById("sub_"+key);
	var parentItem = document.getElementById("mainAnchor_"+key);
	jQuery.swap(jQuery(subItem)[0], TEMP_VIS_PROPS, function(){
	     itemWidth = jQuery(subItem).outerWidth();
	});
	var parentOffset = jQuery(parentItem).offset();
	var parentOffsetLeft = parentOffset.left;
	var parentOffsetTop = parentOffset.top;
	var yFinal = parentOffsetTop + jQuery(parentItem).outerHeight();
	var xOuter = parentOffsetLeft + parentItem.offsetWidth;
	if(topLevelItems.index(key) > OPEN_RIGHT) {
		var xOffset = xOuter - itemWidth;
		Element.setStyle(subItem,{
			'left': xOffset+'px',
			'top': yFinal+'px'
		});
		//alert("left pos "+xOffset);
	} else {
		Element.setStyle(subItem,{
			'left' : parentOffsetLeft+'px',
			'top': yFinal+'px'
		});
		
	}
}

/*
* set all sub divs except the one specified by given index to display: none
* remove hightlight classes from respective anchor elements
*/
function hideVisibleSubs(key) {
	for(var i=0;i<numberOfItems;i++) {
		if(topLevelItems.get(i) != key) {
			var hideElm = document.getElementById("sub_"+topLevelItems.get(i));
			toggleActiveClassAtAnchor(topLevelItems.get(i),false);
			Element.setStyle(hideElm, {
				'display': 'none'
			});
		}
	}
}

/* close sub menu specified by index and remove highlight class from parent li element */
function closeSubMenu(key) {
	toggleActiveClassAtAnchor(key, false);
	hideElm = document.getElementById("sub_"+key);
	Element.setStyle(hideElm, {
		'display': 'none'
	});
}

/* toggle styleclass at mainAnchor element specified by index, 
 * boolean add to decide whether to add or remove
 * change styleClass only if class != hightlight class to mark current item
 * 
 */
function toggleActiveClassAtAnchor(key, add) {
	var mainAnchorElm = document.getElementById("mainAnchor_"+key);
	var anchorParent = mainAnchorElm.parentNode;
	if(add==true) {
		if(!jQuery(mainAnchorElm).hasClass("topLevelItemHL")) {
			jQuery(mainAnchorElm).removeClass("topLevelItem");
			jQuery(mainAnchorElm).addClass("topLevelItemActive");
		}
		jQuery(anchorParent).removeClass("topLevelListItem");
		jQuery(anchorParent).addClass("topLevelListItemActive");
	} else {
		if(!jQuery(mainAnchorElm).hasClass("topLevelItemHL")) {
			jQuery(mainAnchorElm).removeClass("topLevelItemActive");
			jQuery(mainAnchorElm).addClass("topLevelItem");
		}
		jQuery(anchorParent).removeClass("topLevelListItemActive");
		jQuery(anchorParent).addClass("topLevelListItem");
	}
}