var timer;

function initMenu() {
	var menuTable = document.getElementById('menu');
	var menuTbody = document.createElement('tbody');
	
	for(i = 0; i < menu.length; i++) {
		var menuRow   = document.createElement('tr');
		var menuCell  = document.createElement('td');
		var menuCell2 = document.createElement('td');
		var menuImage = document.createElement('img');
		var menuText  = document.createTextNode(menu[i].menuText);
		var menuDiv   = document.createElement('div');
		
		menuImage.src    = 'images/icons/item_off.gif';
		menuImage.hspace = '5';
		menuImage.id     = 'image_' + i;
		
		menuCell.style.backgroundColor = menu[i].menuColor;
		menuCell.style.color           = '#FFFFFF';
		menuCell.style.padding         = '2px';
		menuCell.style.cursor          = 'hand';
		menuCell.style.fontFamily      = 'Verdana';
		menuCell.style.fontSize        = '7pt';
		menuCell.style.fontWeight      = 'Bold';
		menuCell.id                    = i;
		
		menuCell2.style.textAlign       = 'right';
		menuCell2.style.backgroundColor = menu[i].menuColor;
		menuCell2.style.color           = '#FFFFFF';
		menuCell2.style.padding         = '2px';
		menuCell2.style.fontFamily      = 'Verdana';
		menuCell2.style.fontSize        = '7pt';
		menuCell2.style.fontWeight      = 'Bold';
		
		if(menu[i].menuItems) {
			menuCell.onmouseover           = swapState;
			menuCell.onmouseout            = swapState;
			
			menuDiv.style.backgroundColor = menu[i].menuColor;
			menuDiv.style.color           = '#FFFFFF';
			menuDiv.style.position        = 'absolute';
			menuDiv.style.top             = 148 + (i * 17);
			menuDiv.style.left            = 317;
			menuDiv.style.fontFamily      = 'Verdana';
			menuDiv.style.fontSize        = '7pt';
			menuDiv.style.fontWeight      = 'Bold';
			menuDiv.style.padding         = '0px';
			menuDiv.style.border          = '1px solid #FFFFFF';
			menuDiv.style.visibility      = 'hidden';
			menuDiv.onmouseover           = keepMenu;
			menuDiv.onmouseout            = requestHide;
			menuDiv.id                    = 'menu_' + i;
			
			for(var j = 0; j < menu[i].menuItems.length; j++) {
				var itemDiv  = document.createElement('div');
				var itemText = document.createTextNode(menu[i].menuItems[j].text);
				var itemImage = document.createElement('img');
				
				itemDiv.style.padding      = '2px';
				itemDiv.style.cursor       = 'hand';
				itemDiv.style.width        = '150px';
				itemDiv.onmouseover        = swapItem;
				itemDiv.onmouseout         = swapItem;
				itemDiv.onclick            = handleClick;
				itemDiv.id                 = i + '_' + j;
				
				itemImage.src    = 'images/icons/item_off.gif';
				itemImage.hspace = 5;
				itemImage.id     = 'image_' + i + '_' + j;
				
				itemDiv.appendChild(itemImage);
				itemDiv.appendChild(itemText);
				menuDiv.appendChild(itemDiv);
								
				if(j < (menu[i].menuItems.length - 1)) {
					itemDiv.style.borderBottom = '1px solid #FFFFFF';
				}
			}
			var menuText2 = document.createTextNode('+');
			document.body.appendChild(menuDiv);
		} else {
			menuCell.onmouseover = swapItem;
			menuCell.onmouseout  = swapItem;
			menuCell.onclick     = handleClick;
			var menuText2 = document.createTextNode('');
		}
		
		menuCell.appendChild(menuImage);
		menuCell.appendChild(menuText);
		menuCell2.appendChild(menuText2);
		menuRow.appendChild(menuCell);
		menuRow.appendChild(menuCell2);
		menuTbody.appendChild(menuRow);
	}
	menuTable.appendChild(menuTbody);
	
	if(document.getElementById('medewerkersTable')) {
		initMedewerkers();
	}
	
	var smallMap         = document.getElementById('smallMap');
	smallMap.onmouseover = showMap;
	smallMap.onmouseout  = requestMapHide;
	
	var bigMap           = document.getElementById('bigMap');
	bigMap.onmouseover   = keepMap;
	bigMap.onmouseout    = requestMapHide;
}

function swapItem(evt) {
	evt         = (evt) ? evt : event;
	var element = (evt.target) ? evt.target : evt.srcElement;
	var id      = element.id;
	
	if(evt.type == 'mouseover') {
		document.getElementById('image_' + id).src = 'images/icons/item_on.gif';
		if(id.substr(0,1) != id) {
			document.getElementById('image_' + id.substr(0,1)).src = 'images/icons/item_on.gif';
		} else {
			hideMenus();
		}
		document.getElementById(id).style.textDecoration = 'underline';
	} else {
		document.getElementById('image_' + id).src = 'images/icons/item_off.gif';
		if(id.substr(0,1) != id) {
			document.getElementById('image_' + id.substr(0,1)).src = 'images/icons/item_off.gif';
		}
		document.getElementById(id).style.textDecoration = 'none';
	}
}

function swapState(evt) {
	evt         = (evt) ? evt : event;
	var element = (evt.target) ? evt.target : evt.srcElement;
	var id      = element.id;
	
	if(evt.type == 'mouseover') {
		document.getElementById('image_' + id).src = 'images/icons/item_on.gif';
		showMenu(id);
	} else {
		document.getElementById('image_' + id).src = 'images/icons/item_off.gif';
		requestHide();
	}
}

function showMenu(id) {
	hideMenus();
	keepMenu();
	document.getElementById('menu_' + id).style.visibility = 'visible';
}

function hideMenus() {
	for(var i = 0; i < menu.length; i ++) {
		if(document.getElementById('menu_' + i)) {
			document.getElementById('menu_' + i).style.visibility = 'hidden';
		}
	}
}

function requestHide() {
	timer = setTimeout("hideMenus()", 500);
}

function keepMenu() {
	if(timer) {
		clearTimeout(timer);
	}
}

function handleClick(evt) {
	evt         = (evt) ? evt : event;
	var element = (evt.target) ? evt.target : evt.srcElement;
	var id      = element.id;
	
	var i = element.id.split("_")[0];
	var j = element.id.split("_")[1];
	
	if(i && j) {
		var myUrl = menu[i].menuItems[j].href;
	} else {
		var myUrl = menu[i].href;
	}
	
	if(myUrl != '#') {
		document.location.href = myUrl;
	}
}

function showMap(evt) {
	evt                     = (evt) ? evt : ((event) ? event : null);
	
	var x                   = (evt.clientX) ? evt.clientX : evt.pageX;
	x                      += 10;
	
	var y                   = (evt.clientY) ? evt.clientY : evt.pageT;
	y                      += document.body.scrollTop;
	y                      += 10;
	
	var bigMap              = document.getElementById('bigMap');
	bigMap.style.left       = x + 'px';
	bigMap.style.top        = y + 'px';
	bigMap.style.visibility = 'visible';
}

function requestMapHide() {
	timer = setTimeout("hideMap()", 500);
}

function keepMap() {
	if(timer) {
		clearTimeout(timer);
	}
}


function hideMap() {
	document.getElementById('bigMap').style.visibility = 'hidden';
}