// JavaScript Document

var totalTabs = 7;
var activeTabIndex = null;
var currentTab = null;
var currentTabInfo = null;

//set style defaults (current)
var defaultFontSize = "12px";
var defaultColor = "#000";
var defaultBgColor = "transparent";
var defaultBorderBottom = "1px solid #CCCCCC";

//set new styles (active)
var newFontSize = "14px";
var newColor = "#990000";
var newBgColor = "#fff";
var newBorderBottom = "1px solid #990000";

//set onmouseover styles (hover)
var hoverBgColor = "#DCEAF1";

window.onload = initializeTabMenu;

function initializeTabMenu() {
	activeTabIndex = 1;
	
	currentTab = document.getElementById("tabRollover" + activeTabIndex);
	currentTabInfo = document.getElementById("tabInfo" + activeTabIndex);
	
	for (i=1; i <= totalTabs; i++) {		
		var tab = document.getElementById("tabRollover" + i);
		
		tab.onmouseover = (function(index) {
			return function(){
				tabOver(index);
			}
		})( i );
		
		tab.onmouseout = (function(index) {
			return function(){
				tabOut(index);
			}
		})( i );
		
		tab.onclick = (function(index) {
			return function(){
				showNewTabInfo(index);
			}
		})( i );		
	}
}

function tabOver(index) {
	var tab = document.getElementById("tabRollover" + index);
	
	if (index != activeTabIndex) {
		tab.style.backgroundColor = hoverBgColor;
	}
	else {
		return false;
	}
}

function tabOut(index) {
	var tab = document.getElementById("tabRollover" + index);
	
	if (index != activeTabIndex) {
		tab.style.backgroundColor = defaultBgColor;
	}
	else {
		return false;
	}
}

function showNewTabInfo(index) {
	currentTab = document.getElementById("tabRollover" + activeTabIndex);
	currentTabInfo = document.getElementById("tabInfo" + activeTabIndex);
	
	var tab = document.getElementById("tabRollover" + index);
	var tabInfo = document.getElementById("tabInfo" + index);
	
	if (index != activeTabIndex) {
		currentTab.style.fontSize = defaultFontSize;
		currentTab.style.color = defaultColor;
		currentTab.style.backgroundColor = defaultBgColor;
		currentTab.style.borderBottom = defaultBorderBottom;
		currentTabInfo.style.display = "none";
		
		tab.style.fontSize = newFontSize;
		tab.style.color = newColor;
		tab.style.backgroundColor = newBgColor;
		tab.style.borderBottom = newBorderBottom;
		tabInfo.style.display = "block";
		
		activeTabIndex = index;
	}
	else {
		return false;	
	}
}