// script.js
// Programmer: Jesse Fox

var timer;
var DELAY = 750;
var currentMenu = "";
var currentContent = "welcomeContent";
var currentHighlighted = "";
var currentTab = "";

// Returns the currently highlighted menu item back to its non-highlighted original appearance.
function updateMenu() {
	if (currentHighlighted != "") {
		document.getElementById(currentHighlighted).style.background = "url(images/item_default.gif) no-repeat center";
		document.getElementById(currentHighlighted).style.color = "#909977";
	}
}

// Hides the currently displayed submenu, if any.
function hideMenu() {
	if (currentMenu != "") {
		document.getElementById(currentMenu).style.display = "none";
		document.getElementById(currentTab).style.color = "#c0c1bd";
		currentMenu = "";
		currentTab = "";
	}
}

// Hides the currently displayed content. 
function hideContent() {
	document.getElementById(currentContent).style.display = "none";
}

// Shows a particular submenu specified by the parameter 'id', which is the HTML id of the submenu's div element.
function showMenu(id) {
	document.getElementById(id).style.display = "block";
	currentMenu = id;
	switch (currentMenu) {
		case "companyMenu":
			document.getElementById("history").style.color = "#424242";
			currentTab = "history";
			break;
		case "productsMenu":
			document.getElementById("etf").style.color = "#424242";
			currentTab = "etf";
			break;
		case "newsMenu":
			document.getElementById("news").style.color = "#424242";
			currentTab = "news";
			break;
		default:
			alert("Error highlighting initial tab!");
	}
}

// Shows content specified by the parameter 'id', which is the HTML id of the content's div element.
function showContent(id) {
	document.getElementById(id).style.display = "block";
	currentContent = id;
	var newHeight = document.getElementById(id).offsetHeight;
	newHeight += 60;
	if (newHeight > 500) {
		document.getElementById("right_side").style.height = String(newHeight) + "px";
	}
	else {
		document.getElementById("right_side").style.height = "500px";
	}
}

// Handles the mouseover event for each main menu item.
function mouseoverHandler(evt) {
	var caller;
	// If W3C compliant browser...
	if (typeof evt.target != "undefined") {
		caller = evt.target;
	}
	else { // IE
		caller = evt.srcElement;
	}
	if (caller.getAttribute("id") != currentHighlighted) {
		caller.style.background = "url(images/item_rollover.gif) no-repeat center";
		caller.style.color = "#FFFFFF";
		switch (caller.getAttribute("id")) {
			case "company":
				timer = setTimeout(function() { hideMenu(); hideContent(); showMenu("companyMenu"); showContent("historyContent"); updateMenu(); currentHighlighted = "company"; }, DELAY);
				break;
			case "products":
				timer = setTimeout(function() { hideMenu(); hideContent(); showMenu("productsMenu"); showContent("etfContent"); updateMenu(); currentHighlighted = "products"; }, DELAY);
				break;
			case "newsletters":
				timer = setTimeout(function() { hideMenu(); hideContent(); showMenu("newsMenu"); showContent("newsContent"); updateMenu(); currentHighlighted = "newsletters"; }, DELAY);
				break;
			case "tools":
				timer = setTimeout(function() { hideMenu(); hideContent(); showContent("toolsContent"); updateMenu(); currentHighlighted = "tools"; }, DELAY);
				break;
			case "contact":
				timer = setTimeout(function() { hideMenu(); hideContent(); showContent("contactContent"); updateMenu(); currentHighlighted = "contact"; }, DELAY);
				break;
			default:
				alert("Error recognizing menu selection!");
		}
	}
}

// Handles the mouseout event for each main menu item.
function mouseoutHandler(evt) {
	var caller;
	// Clear the active timer to prevent new content from being displayed.
	clearTimeout(timer);
	// If W3C compliant browser...
	if (typeof evt.target != "undefined") {
		caller = evt.target;
	}
	else { // IE
		caller = evt.srcElement;
	}
	// If the highlighted item isn't displaying its content, return to non-highlighted appearance.
	if (caller.getAttribute("id") != currentHighlighted) {
		caller.style.background = "url(images/item_default.gif) no-repeat center";
		caller.style.color = "#909977";
	}
}

function clickHandler(evt) {
	var caller;
	// If W3C compliant browser...
	if (typeof evt.target != "undefined") {
		caller = evt.target;
	}
	else { // IE
		caller = evt.srcElement;
	}
	// If the submenu item just clicked isn't the one already displayed...
	if (caller.getAttribute("id") != currentTab) {
		document.getElementById(currentTab).style.color = "#c0c1bd";
		caller.style.color = "#424242";
		currentTab = caller.getAttribute("id");
		hideContent();
		// The id of the appropriate content to show is the
		// id of the clicked tab with "Content" concatenated onto it.
		showContent(currentTab + "Content");
		
	}
}

function setListeners() {
	// Preload the rollover image for instant rollover response.
	var preload = new Image();
	preload.src = "images/item_rollover.gif";
	// If W3C complaint browser...
	if (typeof window.addEventListener != "undefined") {
		// Add events for the main menu located on the left side of the web page.
		document.getElementById("company").addEventListener("mouseover", mouseoverHandler, false);
		document.getElementById("company").addEventListener("mouseout", mouseoutHandler, false);
		document.getElementById("products").addEventListener("mouseover", mouseoverHandler, false);
		document.getElementById("products").addEventListener("mouseout", mouseoutHandler, false);
		document.getElementById("newsletters").addEventListener("mouseover", mouseoverHandler, false);
		document.getElementById("newsletters").addEventListener("mouseout", mouseoutHandler, false);
		document.getElementById("tools").addEventListener("mouseover", mouseoverHandler, false);
		document.getElementById("tools").addEventListener("mouseout", mouseoutHandler, false);
		document.getElementById("contact").addEventListener("mouseover", mouseoverHandler, false);
		document.getElementById("contact").addEventListener("mouseout", mouseoutHandler, false);
		// Add click events for each possible item on a sub menu on the right side of the web page.
		document.getElementById("history").addEventListener("click", clickHandler, false);
		document.getElementById("process").addEventListener("click", clickHandler, false);
		document.getElementById("fee").addEventListener("click", clickHandler, false);
		document.getElementById("etf").addEventListener("click", clickHandler, false);
		document.getElementById("stock").addEventListener("click", clickHandler, false);
		document.getElementById("ls").addEventListener("click", clickHandler, false);
		document.getElementById("bonds").addEventListener("click", clickHandler, false);
		document.getElementById("options").addEventListener("click", clickHandler, false);
		document.getElementById("news").addEventListener("click", clickHandler, false);
		document.getElementById("archive").addEventListener("click", clickHandler, false);
	}
	else { // IE
		// Add events for the main menu located on the left side of the web page.
		document.getElementById("company").attachEvent("onmouseover", mouseoverHandler);
		document.getElementById("company").attachEvent("onmouseout", mouseoutHandler);
		document.getElementById("products").attachEvent("onmouseover", mouseoverHandler);
		document.getElementById("products").attachEvent("onmouseout", mouseoutHandler);
		document.getElementById("newsletters").attachEvent("onmouseover", mouseoverHandler);
		document.getElementById("newsletters").attachEvent("onmouseout", mouseoutHandler);
		document.getElementById("tools").attachEvent("onmouseover", mouseoverHandler);
		document.getElementById("tools").attachEvent("onmouseout", mouseoutHandler);
		document.getElementById("contact").attachEvent("onmouseover", mouseoverHandler);
		document.getElementById("contact").attachEvent("onmouseout", mouseoutHandler);
		// Add click events for each possible item on a sub menu on the right side of the web page.
		document.getElementById("history").attachEvent("onclick", clickHandler);
		document.getElementById("process").attachEvent("onclick", clickHandler);
		document.getElementById("fee").attachEvent("onclick", clickHandler);
		document.getElementById("etf").attachEvent("onclick", clickHandler);
		document.getElementById("stock").attachEvent("onclick", clickHandler);
		document.getElementById("ls").attachEvent("onclick", clickHandler);
		document.getElementById("bonds").attachEvent("onclick", clickHandler);
		document.getElementById("options").attachEvent("onclick", clickHandler);
		document.getElementById("news").attachEvent("onclick", clickHandler);
		document.getElementById("archive").attachEvent("onclick", clickHandler);
	}
}