var theLayers = new Object();
theLayers['main'] = new Array(
	'Explanation (this is a true link)','http://www.xs4all.nl/~ppk/js/index.html?ppknav.html','',
	'Link 2.0','10.html','sub2',
	'Link 3.0','30.html','weereen',
	'Yet another link','40.html','sub4',
	1
);
theLayers['sub2'] = new Array(
	'Let\'s put a hideously long text into it and see what happens','22.html','sub3',
	'Link 2.1','21.html','',
	2
);
theLayers['uitleg21'] = new Array(
	'More stuff','21.html','',
	3
);
theLayers['sub4'] = new Array(
	'Link 4.1','41.html','sub41',
	'Link 4.2','42.html','',
	'Link 4.3','43.html','uitleg21',
	2
);
theLayers['sub41'] = new Array(
	'Link 4.1.1','411.html','',
	'Link 4.1.2','411.html','sub411',
	3
);
theLayers['sub411'] = new Array(
	'Boring stuff','41.html','',
	4
);
theLayers['sub3'] = new Array(
	'Link!','','',
	3
);
theLayers['weereen'] = new Array(
	'In IE5 you can\'t','','',
	'mouseover outside the text','','',
	'if there\'s no arrow','','',
	'anywhere in the box','','',
	2
);

document.write('<LINK REL="stylesheet" HREF="http://www.xs4all.nl/~ppk/js/ppknav/navistyles.css">');

if (document.layers)
	document.write('<STYLE>div.naviblock div {width: 150px;}#ppknav {clip: rect(0 1000 1000 0)} div#pijl {position: absolute}</STYLE>');

if (document.all && !document.getElementById)
	document.write('<STYLE>div.naviblock div {width: 150px;}div#pijl {position: absolute}</STYLE>');

if (document.all && !document.getElementById && navigator.userAgent.indexOf('Win') != -1)
	alert('');



// To enlarge the 'active area' in Opera

if (window.opera)
	document.write('<STYLE>#ppknav {height: 200px; margin-bottom: -200px;}</STYLE>');

document.write('<DIV ID="ppknav">');

if (document.all && !document.getElementById)
	document.write('<BR>');


document.write('<DIV CLASS="naviblock" ID="pijl">');
document.write('<DIV><A HREF="#" onMouseOver="show(\'main\',0,this)"><IMG SRC="http://www.xs4all.nl/~ppk/js/ppknav/pijltjes.gif" WIDTH=18 HEIGHT=10 BORDER=0></A></DIV>');
document.write('</DIV>');

// writing this takes bloody ages in Opera 5

var maxlevel = 0;
for (var i in theLayers)
{
	document.write('<DIV CLASS="naviblock" ID="' + i + '">');
	var level = theLayers[i][theLayers[i].length-1];
	theLayers[i].zindex = level;
	if (level > maxlevel) maxlevel = level;
	for(var j = 0;j<theLayers[i].length-1;j+=3)
	{
		if (theLayers[i][j+2])
		{
			document.write('<DIV><A HREF="' + theLayers[i][j+1] + '"');
			document.write('onMouseOver="show(\'' + theLayers[i][j+2] + '\',' + level + ',this)"');
			document.write('><IMG SRC="http://www.xs4all.nl/~ppk/js/ppknav/pijltjes.gif" WIDTH=18 HEIGHT=10 ALIGN=right VSPACE=3 BORDER=0>' + theLayers[i][j] + '</A></DIV>');
		}
		else
		{
			document.write('<DIV><A HREF="' + theLayers[i][j+1] + '"');
			document.write('onMouseOver="show(\'\',' + level + ',this)"');
			document.write('>' + theLayers[i][j] + '</A></DIV>');		
		}
	}	
	document.write('</DIV>');
}
document.write('</DIV>');



var remember = new Array();
var remember2 = new Array();

function show(name,lvl,obj)
{
	checkUserInput();
	if (remember[lvl] && remember[lvl] == name) return;
	if (remember[lvl])
	{
		closeItAll(lvl);
	}
	if (name)
	{
		var lyr = new getObj(name);
		lyr.style.top  = findPos(obj,lvl) + 10;
		if (!lvl)
			lyr.style.left = 10;
		else 

// Formule: (lvl * (div width - 2*spatiering)) + spatiering

			lyr.style.left = (lvl*130) + 10;
		lyr.style.visibility = 'visible';
	}
	remember[lvl] = name;
	if (obj.parentNode) y = obj.parentNode;
	else if (obj.parentElement) y = obj.parentElement;
	else return;
	if (y.className) return;
	y.className = 'over';
	if (remember2[lvl]) remember2[lvl].className = '';
	remember2[lvl] = y;
}


var remember3 = new Array();

function findPos(obj,lvl)
{
	var curpos = 0;
	if (document.getElementById)
	{
		obj = obj.parentNode;
		while (obj.id != 'ppknav')
		{
			curpos += obj.offsetTop;
			obj = obj.parentNode;
		}
	}
	else if (document.all)
	{
		obj = obj.parentElement;
		while (obj.id != 'ppknav')
		{
			curpos += obj.offsetTop;
			obj = obj.parentElement;
		}
	}
	else if (document.layers)
	{
		remember3[lvl] = obj.y;
		for (var i =0;i<=lvl;i++)
			curpos += remember3[i]
	}
	return curpos;
}

function closeItAll(lvl)
{
	for (var i=remember.length - 1;i>=lvl;i--)
	{
		if (remember[i])
		{
			var x = new getObj(remember[i]);
			x.style.visibility = 'hidden';
		}
		remember[i] = null;
		if (remember2[i])
		{
			remember2[i].className = '';
			remember2[i] = null;
		}
	}
}

var checkIt;

function checkUserInput()
{
	if (checkIt) clearTimeout(checkIt);
	checkIt = setTimeout('closeItAll(0)',5000);
}

function getObj(name)
{
	if (document.getElementById)
	{
	      this.obj = document.getElementById(name);
	      this.style = document.getElementById(name).style;
	}
	else if (document.all)
	{
	      this.obj = document.all[name];
	      this.style = document.all[name].style;
	}
	else if (document.layers)
	{
	      this.obj = document.ppknav.document.layers[name];
	      this.style = document.ppknav.document.layers[name];
	}
}

// function required for NN6, the object pijl is not yet present when the code
// is directly executed

function init()
{
	for (var i in theLayers)
	{
		var x = new getObj(i);
		x.style.zIndex = theLayers[i].zindex;
	} 
	var tmp = new getObj('pijl');
	tmp.style.visibility = 'visible';
}

//var old = (window.onload) ? window.onload : function () {};
//window.onload = function () {old(); init()}

window.onload = init;

function clickClose(e)
{
	if (!document.getElementById) return;
	if (window.Event) theTarget = e.target;
	else theTarget = window.event.srcElement;
	while (theTarget.tagName != 'HTML' && theTarget.parentNode.className != 'naviblock')
	{
		theTarget = theTarget.parentNode;
	}
	if (theTarget.tagName == 'HTML')
		closeItAll(0);
}

document.onclick = clickClose;