///// Globale variabelen

var MainMenu = [];

var MouseOnMain = false;
var MouseOnSub = false;

var fully_loaded = false;
var interVal = null;

var timeoutNumber = 500; // timeout in milliseconden

var selectedMain = 'notExist';
var selectedSub = 'notExist';

///// Helpfuncties

function findPosX(obj){
	var curleft = 0;
	if (obj.offsetParent){
		while (obj.offsetParent){
			curleft += obj.offsetLeft;
			obj = obj.offsetParent;
		}
	}
	return curleft;
}

function findPosY(obj){
	var curtop = 0;
	if (obj.offsetParent){
		while (obj.offsetParent){
			curtop += obj.offsetTop;
			obj = obj.offsetParent;
		}
	}
	return curtop;
}

///// Menu aanmaken

function addItem(Title, OffImg, OnImg, ClickImg){

	var off = new Image(); off.src = OffImg;
	var on = new Image(); on.src = OnImg;
	var clck = new Image(); clck.src = ClickImg;

	MainMenu[Title] = [off, on, clck, []];
}

function addSubItem(MainTitle, Title, URL, Target, OffImg, OnImg, ClickImg){

	var off = new Image(); off.src = OffImg;
	var on = new Image(); on.src = OnImg;
	var clck = new Image(); clck.src = ClickImg;

	MainMenu[MainTitle][3][Title] = [URL, Target, off, on, clck];   	 
}

function createMenu(){
	
	var i, j, tmpobj, tmpstr;

	var SubMenuString = '';
	var MainMenuString = '';

	tmpobj = null;
	tmpstr = '';

	for(i in MainMenu){
		MainMenuString += '<img id="' + i + '" src="' + MainMenu[i][0].src + '" onmouseover="MainOver(this)" onmouseout="MainOut(this)">';
		
		for(j in MainMenu[i][3]){
			tmpobj = MainMenu[i][3][j];
			tmpstr += '<img id="' + (i + '|' + j) + '" src="' + tmpobj[2].src + '" onmouseover="SubOver(this)" onmouseout="SubOut(this)" onclick="goTo(this)">';
		}
		
		SubMenuString += '<div onmouseover="SubDivOver()" onmouseout="SubDivOut(this)" id="' + i + 'SubMenu" style="position: absolute; display: none;"><nobr>' + tmpstr + '</nobr></div>';
		tmpstr = '';
	}
	
	document.write('<nobr>' + MainMenuString + '</nobr>');
	document.write(SubMenuString);
}

///// Event functies

function MainOver(ctrl){

	MouseOnMain = true;

	hideSubMenus();

	var whichOne = (ctrl.id == selectedMain)? 2: 1;

	ctrl.src = MainMenu[ctrl.id][whichOne].src;

	if(ctrl.id == selectedMain && document.getElementById(selectedMain + '|' + selectedSub)){
		document.getElementById(selectedMain + '|' + selectedSub).src = MainMenu[selectedMain][3][selectedSub][4].src;
	}
	
	if(document.getElementById(ctrl.id + 'SubMenu')){
		var tmpObj = document.getElementById(ctrl.id + 'SubMenu');
		tmpObj.style.left = findPosX(ctrl) + 'px';
		tmpObj.style.top = (findPosY(ctrl) + ctrl.height) + 'px';
		tmpObj.style.display = 'block';
	}
}

function MainOut(ctrl){

 	MouseOnMain = false;

	clearTimeout(interVal);

	if(ctrl.id != selectedMain){
		ctrl.src = MainMenu[ctrl.id][0].src;
		interVal = setTimeout('checkState()', timeoutNumber); 
	}
}

function SubDivOver(){
	MouseOnSub = true;
}

function SubDivOut(ctrl){

	MouseOnSub = false;
	clearTimeout(interVal);

	if(ctrl.id != selectedMain + 'SubMenu'){
		interVal = setTimeout('checkState()', timeoutNumber);
	}
}

function SubOver(ctrl){

	var splitID = ctrl.id.split('|');
	var Main = splitID[0];
	var Sub = splitID[1];

	var whichOneMain = (Main == selectedMain)? 2: 1;
	var whichOneSub = (Sub == selectedSub)? 4: 3;

	ctrl.src = MainMenu[Main][3][Sub][whichOneSub].src;
	document.getElementById(Main).src = MainMenu[Main][whichOneMain].src;
	window.status = ctrl.id.replace('|', ' | ');	
}

function SubOut(ctrl){

	var splitID = ctrl.id.split('|');
	var Main = splitID[0];
	var Sub = splitID[1];

	if(ctrl.id != (selectedMain + '|' + selectedSub)){
		ctrl.src = MainMenu[Main][3][Sub][2].src;
	}

	if(Main != selectedMain){
		document.getElementById(Main).src = MainMenu[Main][0].src;
	}

	window.status = '';
}

function goTo(ctrl){

	var splitID = ctrl.id.split('|');
	var Main = splitID[0];
	var Sub = splitID[1];
	var Obj = MainMenu[Main][3][Sub];

	if(document.getElementById(selectedMain + '|' + selectedSub)){
		document.getElementById(selectedMain + '|' + selectedSub).src = MainMenu[selectedMain][3][selectedSub][2].src;
	}

	selectedMain = 'notExist';
	selectedSub = 'notExist';

	if(top == self){
		window.open(Obj[0]);
	} else {
		top.frames[Obj[1]].location.href = Obj[0];
	}

	MouseOnSub = false;
	hideSubMenus();
}

///// Overige functies

function checkState(){
	if(!MouseOnMain && !MouseOnSub){
		ActivateMenu(selectedMain, selectedSub, false);
	}
}

function hideSubMenus(){

	for(var i in MainMenu){
		document.getElementById(i).src = MainMenu[i][0].src;
	}

	if(document.getElementById(selectedMain + '|' + selectedSub)){
		document.getElementById(selectedMain + '|' + selectedSub).src = MainMenu[selectedMain][3][selectedSub][2].src;
	}

	var divs = document.getElementsByTagName('div');

	for(var i = 0; i < divs.length; i++){
		if(divs[i].getAttribute('id').indexOf('SubMenu') != -1){
			divs[i].style.display = 'none';
		}
	}
}

function ActivateMenu(selMain, selSub, loadEvent){

	if(loadEvent){ clearTimeout(interVal);}

	hideSubMenus();

	selectedMain = selMain;
	selectedSub = selSub;

	if(document.getElementById(selectedMain)){

		var mainObj = document.getElementById(selectedMain);
		mainObj.src = MainMenu[selectedMain][2].src;

		if(document.getElementById(selectedMain + 'SubMenu')){
			var subObj = document.getElementById(selectedMain + 'SubMenu');
			subObj.style.left = findPosX(mainObj) + 'px';
			subObj.style.top = (findPosY(mainObj) + mainObj.height) + 'px';
			subObj.style.display = 'block';
		}
		
		if(document.getElementById(selectedMain + '|' + selectedSub)){
			document.getElementById(selectedMain + '|' + selectedSub).src = MainMenu[selectedMain][3][selectedSub][4].src;
		}
	}	
}

///// CSS aanmaken

document.write('<style type="text/css">');
document.write('img { cursor: ' + (window.ActiveXObject? 'hand': 'pointer') + ';}');
document.write('</style>');

///// Pagina geladen

window.onload = function(){ fully_loaded = true; }