// JavaScript Document

var menuNames = new Array("Home", "Angebote", "Referenzen", "Über uns", "Kontakt", "Anfahrt", "Impressum");
var menuHRef = new Array("index.php"
, "angebote.php"
, "ref_figurasanta.php"
, "ueber_uns.php"
, "kontakt.php"
, "anfahrt.php"
, "impressum.php"
);

var subMenuNames = new Array();
var subMenuLinks = new Array();
for (var i = 0; i < menuNames.length; i++) {
	subMenuNames[i] = new Array();
	subMenuLinks[i] = new Array();
}

subMenuNames[0] = new Array();
subMenuNames[1] = new Array("Webdesign", "Internetportale", "Online-Shops", "Anfahrtspläne");
subMenuNames[2] = new Array("Referenzen", "Feedback");
subMenuNames[3] = new Array();
subMenuNames[4] = new Array();
subMenuNames[5] = new Array("Anfahrtsbeschreibung", "Anfahrtsplan", "Google Routenplaner');
subMenuNames[5] = new Array();
subMenuNames[6] = new Array();

subMenuLinks[0] = new Array();
subMenuLinks[1] = new Array("angebote.php"
, "angebote1.php"
, "angebote3.php"
, "angebote2.php"
);
subMenuLinks[2] = new Array("ref_figurasanta.php"
, "feedback_buehn.php"
);
subMenuLinks[3] = new Array();
subMenuLinks[4] = new Array();
subMenuLinks[5] = new Array("anfahrt.php"
, "anfahrtsplan.php", 'google_routenplaner.php"
);
subMenuLinks[6] = new Array();

var subSubMenuNames = new Array();
var subSubMenuLinks = new Array();
for (var i = 0; i < subMenuNames.length; i++) {
	subSubMenuNames[i] = new Array();
	subSubMenuLinks[i] = new Array();
	for (var j = 0; j < subMenuNames[i].length; j++) {
		subSubMenuNames[i][j] = new Array();
		subSubMenuLinks[i][j] = new Array();
	}
}

var naviBoxes = new Array();
var linkWidths = new Array();
var totalWidth;
var space;
var activeMenuIndex = -1;
var activeSubMenuIndex = -1;
var activeSubSubMenuIndex = -1;

function showNavigation() {
	var navigationBox = document.getElementById("navigation");
	totalWidth = determineWidth(navigationBox);
	var totalTextWidth = 0;
	// remove the hard-coded navigation - if any
	var menuItems = navigationBox.childNodes;
	for (var i = menuItems.length - 1; i >=0; i--) {
		navigationBox.removeChild(menuItems[i]);
	}
	for (var i = 0; i < menuNames.length; i++) {
		var menuItem = document.createElement("div");
		menuItem.id = "menu_" + i;
		menuItem.className = "naviBox";
		width = totalWidth / menuNames.length;
		menuItem.style.width = width.toFixed(0);
		if (i == 0) {
			menuItem.style.textAlign = "left";
		} else if (i == menuNames.length - 1) {
			menuItem.style.textAlign = "left";
		} else {
			menuItem.style.textAlign = "left";
		}
		menuItem.onmouseover = highLightMenu;
		menuItem.onclick = followLink;
		menuItem.onmouseout = displaySubMenuOrClear;
		naviBoxes[i] = menuItem;
		navigationBox.appendChild(menuItem);
		var menuItemLink = document.createElement("a");
		menuItemLink.href = menuHRef[i];
		menuItemLink.appendChild(document.createTextNode(menuNames[i]));
		menuItem.appendChild(menuItemLink);
		var linkWidth =  determineWidth(menuItemLink);
		linkWidths[i] = linkWidth;
		totalTextWidth += linkWidth;
	}
	space = Math.floor ((totalWidth - totalTextWidth) / (menuNames.length - 1));
	for (var i = 0; i < menuNames.length; i++) {
		naviBoxes[i].style.width = getNaviBoxWidth(i);
	}
}

function getNaviBoxWidth(index) {
	if (index == menuNames.length - 1) {
		return linkWidths[index];
	} else {
		return linkWidths[index] + space;
	}
}

function determineWidth(element) {
	if (document.all) {
		var myBox = element.getBoundingClientRect();
		var width = myBox.right - myBox.left;
	} else {
		var myBox = document.getBoxObjectFor(element);
		var width = myBox.width;
	}
	return width;
}

/**
* Returns the borders of the elemnt as an array of coordinates. [xMin, xMax, yMax, yMin]
*/
function determineBorder(element) {
	var lowerBorder = new Array();
	if (document.all) {
		var myBox = element.getBoundingClientRect();
		lowerBorder[0] = myBox.left - 2 + document.body.scrollLeft;
		lowerBorder[1] = myBox.right - 2 + document.body.scrollLeft;
		lowerBorder[2] = myBox.bottom - 2 + document.body.scrollTop;
		lowerBorder[3] = myBox.top - 2 + document.body.scrollTop;
	} else {
		var myBox = document.getBoxObjectFor(element);
		lowerBorder[0] = myBox.x;
		lowerBorder[1] = myBox.x + myBox.width;
		lowerBorder[2] = myBox.y + myBox.height;
		lowerBorder[3] = myBox.y;
	}
	return lowerBorder;
}

function getEventSource(evt)  {
	if (document.all) {
		return event.srcElement;
	} else {
		return evt.target;
	}
}

function highLightMenu(evt) {
	if (activeSubMenuIndex >= 0) {
		clearSubMenu();
	}
	var source = getEventSource(evt);
	while (source.parentNode != null) {
		if (source.id != null && source.id.indexOf("menu_") == 0) {
			break;
		} else {
			source = source.parentNode;
		}
	}
	var eventMenuIndex = parseInt(source.id.substring(5, source.id.length));
	if (eventMenuIndex == activeMenuIndex) {
		return;
	} 
	clearMenu();
	activeMenuIndex = eventMenuIndex;
	source.className = "naviBoxOver";
	if (subMenuNames[activeMenuIndex].length == 0) {
		return;
	}
	
	var lowerBound = determineBorder(source);
	var minWidth = getNaviBoxWidth(activeMenuIndex);
	createSubMenu("subMenu", "subMenuItem_", lowerBound[2], lowerBound[0], lowerBound[1], minWidth, subMenuNames[activeMenuIndex], subMenuLinks[activeMenuIndex], highLightSubMenu);
}

function highLightSubMenu(evt) {
	var source = getEventSource(evt);
	while (source.parentNode != null) {
		if (source.id != null && source.id.indexOf("subMenuItem_") == 0) {
			break;
		} else {
			source = source.parentNode;
		}
	}
	var eventMenuItemIndex = parseInt(source.id.substring(12, source.id.length));
	if (eventMenuItemIndex == activeSubMenuIndex) {
		return;
	} 
	clearSubMenu();
	activeSubMenuIndex = eventMenuItemIndex;
	source.className = "subMenuItemOver";
	if (subMenuNames[activeMenuIndex][activeSubMenuIndex].length == 0) {
		return;
	}
	
	var lowerBound = determineBorder(source);
	var minWidth = 0;
	createSubMenu("subSubMenu", "subSubMenuItem_", lowerBound[3], lowerBound[1], lowerBound[0], minWidth, subSubMenuNames[activeMenuIndex][activeSubMenuIndex], subSubMenuLinks[activeMenuIndex][activeSubMenuIndex], highLightSubSubMenu);
}

function highLightSubSubMenu(evt) {
	var source = getEventSource(evt);
	while (source.parentNode != null) {
		if (source.id != null && source.id.indexOf("subSubMenuItem_") == 0) {
			break;
		} else {
			source = source.parentNode;
		}
	}
	var eventMenuItemIndex = parseInt(source.id.substring(15, source.id.length));
	if (eventMenuItemIndex == activeSubSubMenuIndex) {
		return;
	} 
	clearSubSubMenu();
	activeSubSubMenuIndex = eventMenuItemIndex;
	source.className = "subMenuItemOver";
}


function createSubMenu(id, subMenuIdPrefix, top, left, right, minWidth, subMenuItemNames, subMenuItemLinks, onMouseOverFunction) {
	var subMenu = document.createElement("DIV");
	subMenu.id = id;
	subMenu.style.position = "absolute";
	subMenu.style.top = top;
	subMenu.style.left = 0;
	subMenu.style.visibility = "hidden";
	document.body.appendChild(subMenu);
	var maxWidth = minWidth;
	var subMenuHeight;
	var subMenuItems = new Array();
	for (var i in subMenuItemNames) {
		var subMenuItem = createSubMenuItem (subMenuIdPrefix + i, subMenuItemLinks[i], subMenuItemNames[i], onMouseOverFunction);
		subMenu.appendChild(subMenuItem);
		var width = determineWidth(subMenuItem);
		if (width > maxWidth) {
			maxWidth = width;
		}
		subMenuItems[i] = subMenuItem;
		if (i == subMenuItemNames.length - 1) {
			subMenuHeight = determineBorder(subMenuItem)[2] - top;
		}
	}
	for  (var i in subMenuItems) {
		subMenuItems[i].style.width = maxWidth;
	}
	subMenu.style.width = maxWidth;
	subMenu.style.height = subMenuHeight;
	subMenu.onmouseout = displaySubMenuOrClear;
	var rightCorner = determineBorder(document.getElementById("navigation"))[1];
	if (left + maxWidth > rightCorner) {
		subMenu.style.left = right - maxWidth;
	} else {
		subMenu.style.left = left;
	}
	subMenu.style.visibility = "visible";
}

function createSubMenuItem (id, linkDest, linkText, omMouseOverFunction) {
	var subMenuItem = document.createElement("DIV");
	subMenuItem.id = id;
	subMenuItem.className = "subMenuItem";
	if (omMouseOverFunction != null) {
		subMenuItem.onmouseover = omMouseOverFunction;
	}
	subMenuItemLink = document.createElement("A");
	subMenuItemLink.href = linkDest;
	subMenuItemLink.appendChild(document.createTextNode(linkText));
	subMenuItem.appendChild(subMenuItemLink);
	subMenuItem.onclick = followLink;
	return subMenuItem;
}

function clearMenu() {
	var currentSubMenu = document.getElementById("subMenu");
	if (currentSubMenu != null) {
		document.body.removeChild(currentSubMenu);
	}
	var currentSubSubMenu = document.getElementById("subSubMenu");
	if (currentSubSubMenu != null) {
		document.body.removeChild(currentSubSubMenu);
	}
	for (var i = 0; i < naviBoxes.length; i++) {
		naviBoxes[i].className = "naviBox";
	}
	activeMenuIndex = -1;
	activeSubMenuIndex = -1;
	activeSubSubMenuIndex = -1;
}

function clearSubMenu() {
	var currentSubSubMenu = document.getElementById("subSubMenu");
	if (currentSubSubMenu != null) {
		document.body.removeChild(currentSubSubMenu);
	}
	var count = 0;
	var menuItem;
	while ((menuItem = document.getElementById("subMenuItem_" + count)) != null) {
		menuItem.className = "subMenuItem";
		count++;
	}
	activeSubMenuIndex = -1;
	activeSubSubMenuIndex = -1;
}

function clearSubSubMenu() {
	var count = 0;
	var menuItem;
	while ((menuItem = document.getElementById("subSubMenuItem_" + count)) != null) {
		menuItem.className = "subMenuItem";
		count++;
	}
	activeSubSubMenuIndex = -1;
}

function displaySubMenuOrClear(evt) {
	if (activeMenuIndex >=0 && isMouseOverElemnt(evt,  "subMenu") == false 
		&& isMouseOverElemnt(evt,  "subSubMenu") == false 
		&& isMouseOverElemnt(evt,  "menu_" + activeMenuIndex) == false) {
		clearMenu();
	} else if (activeSubMenuIndex >=0 && isMouseOverElemnt(evt,  "subSubMenu") == false) {
		clearSubSubMenu();
	}
}

function isMouseOverElemnt(evt,  elementName) {
	var element = document.getElementById(elementName);
	if (element == null) {
		return false;
	}
	if (document.all) {
		var pointerX = event.clientX;
		var pointerY = event.clientY;
		var myBox = element.getBoundingClientRect();
		return (pointerX >= myBox.left) && (pointerX < myBox.right) && 
			(pointerY >= myBox.top) && (pointerY < myBox.bottom);
	} else {
		var pointerX = evt.clientX + document.body.scrollLeft;
		var pointerY = evt.clientY + document.body.scrollTop;
		var myBox = document.getBoxObjectFor(element);
		return (pointerX >= myBox.x) && (pointerX < myBox.x + myBox.width) && 
			(pointerY >= myBox.y) && (pointerY < myBox.y + myBox.height);
	}
}

function followLink(evt) {
	if (activeSubSubMenuIndex >=0) {
		window.location = subSubMenuLinks[activeMenuIndex][activeSubMenuIndex][activeSubSubMenuIndex];
	} else if (activeSubMenuIndex >=0) {
		window.location = subMenuLinks[activeMenuIndex][activeSubMenuIndex];
	} else if (activeMenuIndex >=0) {
		window.location = menuHRef[activeMenuIndex];
	}
}