var activeItem = null;
var naviTimeOut = null;
var activeStateBefore = "";
var timeoutDelay = 150;
var subNaviOffset = 118;


function findPos ( obj )
{
	var curleft = curtop = 0;
	if ( obj.offsetParent )
	{
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		}
		while ( obj = obj.offsetParent );
	}
	return [curleft,curtop];
}


function setNaviTimeout ()
{
	clearNaviTimeout();
	naviTimeOut = setTimeout( hide, timeoutDelay );
}


function clearNaviTimeout ()
{
	if ( naviTimeOut )
	{
		clearTimeout( naviTimeOut );
	}
}


function deselectActiveItem ()
{
	if ( activeItem != null && activeItem.getElementsByTagName( 'a' )[0] )
	{
		activeItem.getElementsByTagName( 'a' )[0].className = activeStateBefore;
	}
	activeItem = null;
}


function hide ()
{
	var subNaviTarget = document.getElementById( 'subnaviDropdown' );
	subNaviTarget.innerHTML = '';
	subNaviTarget.style.display = "none";
	deselectActiveItem();
}


function initNavi ()
{
	var subNaviTarget = document.getElementById( 'subnaviDropdown' );

	for ( var c=1; c<5; c++ )
	{
		var mainNavi = document.getElementById( 'nav' + c );

		for ( var i=0, il=mainNavi.childNodes.length; i<il; i++ )
		{
			var node = mainNavi.childNodes[i];
			if ( node.nodeType == 1
					&& node.nodeName.toLowerCase() == 'li'
					&& node.getElementsByTagName('ul')[0] )
			{
				node.onmouseover = function ()
				{
					clearNaviTimeout();
					if ( activeItem != this )
					{
						deselectActiveItem();
						subNaviTarget.innerHTML = '';
						subNaviTarget.appendChild( this.getElementsByTagName( 'ul' )[0].cloneNode( true ) );
						var aCoords = findPos( this );
						subNaviTarget.style.left = (aCoords[0] + subNaviOffset) + 'px';
						subNaviTarget.style.top = aCoords[1] + 'px';
						subNaviTarget.style.display = "block";
						if ( this.getElementsByTagName( 'a' )[0] )
						{
							activeStateBefore = this.getElementsByTagName( 'a' )[0].className;
							this.getElementsByTagName( 'a' )[0].className = "hilite";
						}
						activeItem = this;
					}
				};
				node.onmouseout = function ()
				{
					setNaviTimeout();
				};
			}
		}
	}

	subNaviTarget.onmouseover = function ()
	{
		clearNaviTimeout();
		this.style.display = 'block';
	};

	subNaviTarget.onmouseout = function ()
	{
		setNaviTimeout();
	};
}

window.onload = initNavi;