// prepare drop-down menu
window.onload = function() {
	// background color variables
	color_highlight = "#c93";
	color_normal = "#630";

	// get menu buttons
	buttons = document.getElementById("menu").childNodes;

	// prepare menu buttons
	for (i = 0; i < buttons.length; i++) {
		// skip newline nodes
		if (buttons[i].nodeValue != "\n") {
			// skip drop-down menus for now
			if (buttons[i].getElementsByTagName("ul").length > 0) {
				// display drop-down menus
				buttons[i].onmouseover = function() {
					this.getElementsByTagName("ul")[0].style.display = "block";
					this.style.backgroundColor = color_highlight;
				}

				// hide drop-down menus
				buttons[i].onmouseout = function() {
					this.getElementsByTagName("ul")[0].style.display = "none";
					this.style.backgroundColor = color_normal;
				}

				// highlight current selection in drop-down menus
				for (n = 0; n < buttons[i].getElementsByTagName("li").length; n++) {
					buttons[i].getElementsByTagName("li")[n].onmouseover = function() {
						this.style.backgroundColor = color_highlight;
					}

					buttons[i].getElementsByTagName("li")[n].onmouseout = function() {
						this.style.backgroundColor = color_normal;
					}
				}
			}

			// highlight current menu selection
			else {
				buttons[i].onmouseover = function() {
					this.style.backgroundColor = color_highlight;
				}

				// hide drop-down menus
				buttons[i].onmouseout = function() {
					this.style.backgroundColor = color_normal;
				}
			}
		}
	}
}

// show or hide division near mouse position
function popupDiv(div, event) {
	// get popup
	var popup = document.getElementById(div);

	// get screen width and height
	if (window.innerWidth) {
		window_width = window.innerWidth;
		window_height = window.innerHeight;
	}
	else if (document.documentElement.clientWidth) {
		window_width = document.documentElement.clientWidth;
		window_height = document.documentElement.clientHeight;
	}
	else {
		window_width =  document.body.clientWidth;
		window_height =  document.body.clientHeight;
	}

	// get popup width and height
	if (popup.currentStyle) {
		popup_width = parseInt(popup.currentStyle.width);
		popup_height = parseInt(popup.currentStyle.height);
	}
	else {
		popup_style = window.getComputedStyle(popup, "");
		popup_width = parseInt(popup_style.getPropertyValue("width"));
		popup_height = parseInt(popup_style.getPropertyValue("height"));
	}

	// hide popup
	if (document.getElementById(div).style.display == "block") {
		document.getElementById(div).style.display = "none";
	}

	// position popup as close to mouse click as possible
	else {
		// position popup horizontally
		if (window_width > event.clientX + popup_width + 20) {
			popup.style.left = event.clientX + "px";
		}
		else {
			popup.style.left = window_width - (popup_width + 20) + "px";
		}

		// position popup vertically
		if (window_height > event.clientY + popup_height + 20) {
			popup.style.top = event.clientY + "px";
		}
		else {
			popup.style.top = window_height - (popup_height + 20) + "px";
		}

		// show popup
		popup.style.display = "block";
	}
}