var OFFSET_TOP = 0;		// used to offset the popup position from the calculated position.
var OFFSET_LEFT = 1;

// When isImmediateMode is true, the dropdown menus are shown as soon as the mouse over the tab occurs.
// When it is false, there will be a delay of DOWN_TIMEOUT seconds, to avoid unintentional rollover.
// isImmediateMode is toggled by the mouse over the tab long enough or out of the tabs long enough.
var isImmediateMode = false;

var AT = 0;
var ON = 1;
var OFF = 2;

var UP = 0;
var DOWN = 1;

var DOWN_TIMEOUT = 280;
var UP_TIMEOUT = 280;
var EXIT_TIMEOUT = 600;

function HeaderMenuTab(id, key) {
	
	this.getId = function() { return tabId; }
	this.getKey = function() { return tabKey; }
	this.setImage = setImage;
	this.setState = setState;
	this.isDown = function() { return state == DOWN; }
	this.isUp = function() { return state == UP; }
	this.setDownTimeout = setDownTimeout;
	this.cancelDownTimeout = cancelDownTimeout;
	this.setUpTimeout = setUpTimeout;
	this.cancelUpTimeout = cancelUpTimeout;
	
	var tabId = id;
	var tabKey = key;
	var state = UP;
	
	var tabNode = document.getElementById("tab-" + tabId);
	var popupNode = document.getElementById("popup-" + tabId);
	var imageNode = document.getElementById("tabImage-" + tabKey);

	//debug("calling ElementPosition, id: " + tabId + ", node null ? " + (tabNode == null));
	
	var images = new Array(3);
	images[AT] = new Image();
	images[AT].src = "/images/headerNav-" + tabKey + "-at.gif";
	images[ON] = new Image();
	images[ON].src = "/images/headerNav-" + tabKey + "-on.gif";
	images[OFF] = new Image();
	images[OFF].src = "/images/headerNav-" + tabKey + "-off.gif";
	
	var downTimeout = null;
	var upTimeout = null;
	
	function setImage(index) {
		imageNode.src = images[index].src;
	}
	
	function setState(s) {
		if (s == DOWN) {
			for (var i = 0; i < headerMenuTabs.length; i++) {
				if (headerMenuTabs[i].getId() != tabId) headerMenuTabs[i].setState(UP);
			}
			var position = new ElementPosition(tabNode);
			popupNode.style.left = (position.left + OFFSET_LEFT) + "px" ;
			popupNode.style.visibility = "visible";
		} else {
			popupNode.style.visibility = "hidden";
		}
		
		state = s;
	}
	
	function setDownTimeout() {
		downTimeout = setTimeout(downHandler, DOWN_TIMEOUT);
	}

	function cancelDownTimeout() {
		clearTimeout(downTimeout);
		downTimeout = null;
	}
	
	function downHandler() {
		isImmediateMode = true;
		setState(DOWN);
	}
	
	function setUpTimeout() {
		upTimeout = setTimeout(upHandler, UP_TIMEOUT);
	}
	
	function cancelUpTimeout() {
		clearTimeout(upTimeout);
		upTimeout = null;
	}

	function upHandler() {
		setState(UP);
		setTimeout(exitImmediateMode, EXIT_TIMEOUT);
	}
	
}

function exitImmediateMode() {
	if (!isImmediateMode) return;
	
	var isExit = true;
	for (var i = 0; i < headerMenuTabs.length && isExit; i++) {
		isExit = headerMenuTabs[i].isUp();
	}
	if (isExit) {
		isImmediateMode = false;
	}
}

var headerMenuTabs = new Array();

function getTab(id, key) {
	//debug("getTab, id: " + id);
	var tab = null;
	for (var i = 0; i < headerMenuTabs.length && tab == null; i++) {
		if (headerMenuTabs[i].getId() == id) {
			tab = headerMenuTabs[i];
		}
	}
	if (tab == null) {
		tab = new HeaderMenuTab(id, key);
		headerMenuTabs[headerMenuTabs.length] = tab;
	}
	
	return tab;
}

function onMouseOverTab(tabId, tabKey) {
	//debug("onMouseOverTab, id: " + tabId);
	var tab = getTab(tabId, tabKey);
	tab.setImage(ON);
	
	if (tab.isDown()) {
		tab.cancelUpTimeout();
		return;
	}
	
	if (isImmediateMode) {
		tab.setState(DOWN);
	} else {
		tab.setDownTimeout();
	}
}

function onMouseOutTab(tabId, tabKey) {
	//debug("onMouseOutTab, id: " + tabId);
	var tab = getTab(tabId, tabKey);
	tab.setImage((tabId == currentTab) ? AT : OFF);
	
	if (tab.isDown()) {
		tab.setUpTimeout();
	} else {
		tab.cancelDownTimeout();
	}
		
}