var DHTML = (document.getElementById || document.all || document.layers);
if ( !DHTML ) alert('Uw browser ondersteund geen Dhtml. Deze website zal hierdoor niet optimaal bekeken kunnen worden!');

var activeId;
var activeSubmenu;

window.onload = function() {
	setEvents();
	document.getElementById("theme-nav").onmouseout = hideAll;
	if(activeId == null)
	{
		document.getElementById("theme-nav").onmouseover = timeOut;
	}
	document.getElementById("container").onmouseover = hideAll;
}

function setEvents()
{
	var hoofdItem = document.getElementById("depth1").getElementsByTagName("a");
	for (var i=0;i<hoofdItem.length;i++)
	{
		hoofdItem[i].onmouseover = showSubnav;
	}
	
	var subItem = document.getElementById("theme-nav").getElementsByTagName("div");
	for (var i=0;i<subItem.length;i++)
	{
		if(activeId == null)
		{
			subItem[i].onmouseover = timeOut;
		}
		subItem[i].onmouseout = hideSubnav;
	}
	
	viewActive(activeId);
}

function hideAll(e)
{
	var relTarg;
	if (!e) var e = window.event;
	e.cancelBubble = true;
	if (e.stopPropagation) e.stopPropagation();
	if (e.relatedTarget) relTarg = e.relatedTarget;
	else if (e.toElement) relTarg = e.toElement;
	if (relTarg.id != 'top') return;
	
	var hoofdItem = document.getElementById("depth1").getElementsByTagName("a");
	{
		for (var i=0;i<hoofdItem.length;i++)
		{
			hoofdItem[i].className = "";
		}	
	}
	
	var submenu = document.getElementById("theme-nav").getElementsByTagName("div");
	for (var i=0;i<submenu.length;i++)
	{
		if(submenu[i].className == "theme-subnav")
		{
			submenu[i].style.display = "none";
		}
	}
	
	viewActive(activeId)
}


function setActive(activeId)
{
	if (!e) var e = window.event;
	if (e.target) var target = e.target;
	else if (e.srcElement) var target = e.srcElement;
	activeId = target.id;
	return activeId;
}

function viewActive(activeId)
{
	if(activeId != null)
	{
		var active = activeId;
		var hoofdItem = document.getElementById(activeId);
		var a = active.substring(0,5);
		var b = "sub";
		var c = active.substring(5,9);
		var submenu = a + b + c;
				
		hoofdItem.className = "active";
		document.getElementById(submenu).style.display = "block";
	}
}

function showSubnav(e)
{
	if (!e) var e = window.event;
	if (e.target) var target = e.target;
	else if (e.srcElement) var target = e.srcElement;

	var hoofdItem = document.getElementById("depth1").getElementsByTagName("a");
	for (var i=0;i<hoofdItem.length;i++)
	{
		hoofdItem[i].className = "";
	}	
	
	var hoofditem = target.id;
	
	document.getElementById(hoofditem).className = "hover";

	var submenu = document.getElementById("theme-nav").getElementsByTagName("div");
	for (var i=0;i<submenu.length;i++)
	{
		if(submenu[i].className == "theme-subnav")
		{
			submenu[i].style.display = "none";
		}
	}
	
	var a = hoofditem.substring(0,5);
	var b = "sub";
	var c = hoofditem.substring(5,9);
	var submenu = a + b + c;
	
	activeSubmenu = submenu;

	document.getElementById(submenu).style.display = "block";
	
	if(activeId == null)
	{
		timeOut();
	}
}

function hideSubnav(e)
{	
	/* Mouseout check  */
	if (!e) var e = window.event;
	e.cancelBubble = true;
	if (e.stopPropagation) e.stopPropagation();
	var tg = (window.event) ? e.srcElement : e.target;
	if (tg.nodeName != 'DIV') return;
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	if (reltg.nodeName == 'UL' || reltg.nodeName == 'LI') return;

		
	if (tg.className == 'spacer')
	{
		if(reltg.id.length == 12) return;
	}
	
	if(reltg!=null)
	{
		reltg = reltg.parentNode;
		if (reltg == tg) return;
	}
	/* End Mouseout check */
	
	var hoofdItem = document.getElementById("depth1").getElementsByTagName("a");
	for (var i=0;i<hoofdItem.length;i++)
	{
		hoofdItem[i].className = "";
	}	
	
	var submenu = document.getElementById("theme-nav").getElementsByTagName("div");
	for (var i=0;i<submenu.length;i++)
	{
		if(submenu[i].className == "theme-subnav")
		{
			submenu[i].style.display = "none";
		}
	}
	
	viewActive(activeId);
}


var checkIt
function timeOut()
{
	if (checkIt) clearTimeout(checkIt);
	checkIt = setTimeout('hide();',6000);
}

function hide()
{
	var hoofdItem = document.getElementById("depth1").getElementsByTagName("a");
	{
		for (var i=0;i<hoofdItem.length;i++)
		{
			hoofdItem[i].className = "";
		}	
	}
	
	var submenu = document.getElementById("theme-nav").getElementsByTagName("div");
	for (var i=0;i<submenu.length;i++)
	{
		if(submenu[i].className == "theme-subnav")
		{
			submenu[i].style.display = "none";
		}
	}
}