/**
 * navigation script for showing / hiding sub items.
 * requires jQuery min. version 1.6.0
 */
var topLevelItems = new Array();
// 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;
//width of side shadow
var SHADOW_WIDTH = 4;
		
/*
* 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[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);
	jQuery(subItem).css("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
* 
* xOffset (open to left): parentOffsetLeft + width of opening parent item - shadow width
* xOffset (open to right): xOuter - width of submenu to be opened + shadow width = x position of submenu to be opened
* 
* shadow needs to be added / subtracted to avoid visible offset of opening box (border of table needs to be aligned with border of opening item)
* 
* 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;
	/* since js1.6 but ie7 support js 1.5 only */
	/* var menuIndex = topLevelItems.indexOf(key); */
	var menuIndex = jQuery.inArray(key,topLevelItems);

	if(menuIndex > OPEN_RIGHT) {
		var xOffset = xOuter - itemWidth + SHADOW_WIDTH;
		var cssObj = {
			'left': xOffset+'px',
			'top': yFinal+'px'
		}
		jQuery(subItem).css(cssObj);
	} else {
		var xOffset = parentOffsetLeft - SHADOW_WIDTH;
		var cssObj = {
	      'left' : xOffset+'px',
	      'top' : yFinal+'px'
	    };
		jQuery(subItem).css(cssObj);
	}
}

/*
* 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[i] != key) {
			var hideElm = document.getElementById("sub_"+topLevelItems[i]);
			toggleActiveClassAtAnchor(topLevelItems[i],false);
			jQuery(hideElm).css("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);
	jQuery(hideElm).css("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");
	}
}