var IE = document.all?true:false;
var arrSubmenubuttons = [];
var arrSubmenus = [];

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 initSubMenu()
{
	if (!IE) document.captureEvents(Event.MOUSEMOVE)
	document.onmousemove = themousemoved;
	
	var arrBttnIds = [1,6,7,9];
var arrSubPages = [["index.php?p=14","index.php?p=16","index.php?p=32"],["index.php?p=51","index.php?p=11","index.php?p=44","index.php?p=48","index.php?p=50"],["index.php?p=28","index.php?p=41"],["index.php?p=47","index.php?p=49"]];
var arrSubPagesNames = [["Routebeschrijving","Betaalmogelijkheden","Openingstijden"],["Kindercollectie","Merken","FitFlop","Nieuw: Bufflox","Modestad"],["Reparatie","Onderhoudstips"],["Dames najaar","Heren najaar"]];
	
	arrSubmenus = [];
	arrSubmenubuttons = [];
	
	for(var i = 0, len = arrBttnIds.length; i < len; ++i)
	{
		var bttnId = arrBttnIds[i];
		var bttn = document.getElementById("menuItem"+bttnId);
		var pntBttn = findPos(bttn);

		var divIdName = 'subMenu'+bttnId;
		
		if(document.getElementById(divIdName))
			var divMenu = document.getElementById(divIdName);
		else
		{
			var divMenu = document.createElement('div');
			divMenu.setAttribute('id',divIdName);
		}
		
		var divMenuHTML = '<table style="border-collapse:collapse;" cellspacing="0">';
		
		var hyperlinks = arrSubPages[i];
		var hyperlinknames = arrSubPagesNames[i];
		for(var j = 0, len2 = hyperlinks.length; j < len2 ; ++j)
		{
			divMenuHTML += "<tr class='submenuItem' onclick='window.location=\""+hyperlinks[j]+"\"' onmouseover='this.className=\"submenuItem_mo\"' onmouseout='this.className=\"submenuItem\"'><td></td><td style='color:#000000;font-weight:bold;'>"+hyperlinknames[j]+"</td><td></td></tr>";
		}
		divMenuHTML += '<tr style="border-style:none;height:20px;border-collapse:collapse;margin:0px;padding:0px;"><td style="background-image:url(\'/images/submenu/bttm_leftcorner.png\');background-position:top left;border-collapse:collapse;margin:0px;padding:0px;width:5px;"></td><td  style="background-image:url(\'/images/submenu/bttm_middle.png\');background-position:top center;border-collapse:collapse;margin:0px;padding:0px;"></td><td style="background-image:url(\'/images/submenu/bttm_rightcorner.png\');background-position:top right;border-collapse:collapse;margin:0px;padding:0px;width:5px;"></td></tr>';
		divMenuHTML += '</table>';
		
		divMenu.innerHTML = divMenuHTML;
		document.body.appendChild(divMenu);
			
		divMenu.style.zIndex = "400";
		divMenu.style.position = "absolute";
		divMenu.style.color = "#000000";
		divMenu.style.left = ((pntBttn[0]+(bttn.width/2))-(divMenu.offsetWidth/2))+"px";
		divMenu.style.top  = (pntBttn[1]-divMenu.offsetHeight)+"px";
		divMenu.style.visibility = "hidden";
		
		arrSubmenus.push(divMenu);
		arrSubmenubuttons.push(bttn);
	}
	
	initCollectieSubMenu();
}

function initCollectieSubMenu()
{
	var bttn = document.getElementById('menuItem3');
	var pntBttn = findPos(bttn);

	var divIdName = 'subMenu3';
			
	if(document.getElementById(divIdName))
		var divMenu = document.getElementById(divIdName);
	else
	{
		var divMenu = document.createElement('div');
		divMenu.setAttribute('id',divIdName);
	}

	var divMenuHTML = '<table style="border-collapse:collapse;" cellspacing="0">';
		divMenuHTML += "<tr class='submenuItem' onclick='window.location=\"index.php?p=3&collectie=algemeen\";' onmouseover='this.className=\"submenuItem_mo\"' onmouseout='this.className=\"submenuItem\"'><td></td><td style='color:#000000;font-weight:bold;'>Algemeen</td><td></td></tr>";
		divMenuHTML += "<tr class='submenuItem' onclick='window.location=\"index.php?p=3&collectie=dames\";' onmouseover='this.className=\"submenuItem_mo\"' onmouseout='this.className=\"submenuItem\"'><td></td><td style='color:#000000;font-weight:bold;'>Dames</td><td></td></tr>";
		divMenuHTML += "<tr class='submenuItem' onclick='window.location=\"index.php?p=3&collectie=heren\";' onmouseover='this.className=\"submenuItem_mo\"' onmouseout='this.className=\"submenuItem\"'><td></td><td style='color:#000000;font-weight:bold;'>Heren</td><td></td></tr>";
		divMenuHTML += '<tr style="border-style:none;height:20px;border-collapse:collapse;margin:0px;padding:0px;"><td style="background-image:url(\'/images/submenu/bttm_leftcorner.png\');background-position:top left;border-collapse:collapse;margin:0px;padding:0px;width:5px;"></td><td  style="background-image:url(\'/images/submenu/bttm_middle.png\');background-position:top center;border-collapse:collapse;margin:0px;padding:0px;"></td><td style="background-image:url(\'/images/submenu/bttm_rightcorner.png\');background-position:top right;border-collapse:collapse;margin:0px;padding:0px;width:5px;"></td></tr>';
	divMenuHTML += '</table>';
	
	divMenu.innerHTML = divMenuHTML;
	document.body.appendChild(divMenu);
	
	divMenu.style.zIndex = "400";
	divMenu.style.position = "absolute";
	divMenu.style.color = "#000000";
	divMenu.style.left = ((pntBttn[0]+(bttn.width/2))-(divMenu.offsetWidth/2))+"px";
	divMenu.style.top  = (pntBttn[1]-divMenu.offsetHeight)+"px";
	divMenu.style.visibility = "hidden";
	
	arrSubmenus.push(divMenu);
	arrSubmenubuttons.push(bttn);
}


function themousemoved(e)
{
	var tempX = 0;
	var tempY = 0;
	
	if (IE) { 
		tempX = event.clientX + document.body.scrollLeft;
		tempY = event.clientY + document.body.scrollTop;
	} else {
		tempX = e.pageX;
		tempY = e.pageY;
	}  
	if (tempX < 0)
		tempX = 0;
	if (tempY < 0)
		tempY = 0;  
	
	for(var i = 0, len = arrSubmenus.length; i < len; ++i)
	{
		var divMenu = arrSubmenus[i];
		var bttn = arrSubmenubuttons[i];
		
		var pntBttn = findPos(bttn);
		
		var minX = Math.min(divMenu.offsetLeft,pntBttn[0]);
		var maxX = Math.max((divMenu.offsetLeft + divMenu.offsetWidth),(pntBttn[0] + bttn.offsetWidth));
		var minY = Math.min(divMenu.offsetTop,pntBttn[1]);
		var maxY = Math.max((divMenu.offsetTop + divMenu.offsetHeight),(pntBttn[1] + bttn.offsetHeight));
		
		if( (tempX >= minX) && (tempX <= maxX) &&
			(tempY >= minY) && (tempY <= maxY) )
			divMenu.style.visibility = "visible";
		else
			divMenu.style.visibility = "hidden";
		
	}
	
	return true;
}

function showMenu()
{
	document.getElementById('subMenu').style.visibility = "visible";
}

function hideMenu()
{
	document.getElementById('subMenu').style.visibility = "hidden";
}