/*
	Javascript for mainNavigation
	*****************************
	
	Displays a sub panel when the pointer hovers over a main navigation item, with a short delay.

*/

addLoadEvent(prepMainNav);

var delayIv;
var nowHoveringOn;
var nowLeaving;
var panelHideIv;
var navWidth = 854;			// Total width of the main navigation bar
var moreItemWidth = 85;		// Width of the "Meer..." item
var totalItemsWidth = 0;	// Width of all items together, except "Meer..."

function prepMainNav()
{
	if (!getElm("mainNavigation")) return false;
	
	var navElm = getElm("mainNavigation");
	var navItemsArr = new Array();

	var currElm = navElm.firstChild;

	var count = 0;
	while (count < navElm.childNodes.length)
	{
		// Pushes the top li-elements in the navItemsArr array.
		if (currElm.className == "category")
		{
			navItemsArr.push(currElm);
		}
		
		currElm = currElm.nextSibling;
		count++;
	}
	
	for (i=0; i<navItemsArr.length; i++)
	{
		// Adds events to each top li element
		
		var currElm = navItemsArr[i];
		
		currElm.onmouseover = function()
		{
			clearTimeout(panelHideIv);
			hideAllPanels(this);
			nowHoveringOn = this;
			delayIv = setTimeout("nowHoveringOn.className = 'category active'", 200);
		}
		
		currElm.onmouseout = function()
		{
			clearTimeout(delayIv);
			clearTimeout(panelHideIv);
			nowLeaving = this;
			panelHideIv = setTimeout("nowLeaving.className = 'category'", 200);
		}
		
		// Measure width of element
		totalItemsWidth = totalItemsWidth + currElm.offsetWidth;
	}
	
	// Give padding to elements so the items fill out nicely
	totalItemsWidth = totalItemsWidth - moreItemWidth;	// Substract the width of the "Meer..." item.
	var padding = Math.round((((navWidth - moreItemWidth) - totalItemsWidth) / (navItemsArr.length - 1))/2);
	
	for (i=0; i<(navItemsArr.length - 1); i++)
	{
		// Add padding to left and right side of the a elements within the list items.
		var currElm = navItemsArr[i].getElementsByTagName("a")[0];
		currElm.style.paddingLeft = padding + "px";
		currElm.style.paddingRight = padding + "px";
	}
	
	navElm.style.visibility = "visible";
	
	function hideAllPanels(exceptThisOne)
	{
		for (i=0; i<navItemsArr.length; i++)
		{
			if (navItemsArr[i] != exceptThisOne) navItemsArr[i].className = "category";
		}
	}
}

/* Basic functions */
function getElm(id)
{
	if (document.getElementById(id))
	{
		return document.getElementById(id);
	}
	else
	{	
		return false;
	}
}

function addLoadEvent(func)
{
	var oldonload = window.onload;
	if (typeof window.onload != 'function')
	{
		window.onload = func;
	} else
	{
		window.onload = function()
		{
			oldonload();
			func();
		}
	}
}