var timerRunning = false; // boolean flag
var myTimer = null;
var linkNum = null;
var showTimer = null;
var openNum = null;
var menuLength = 8;
var browser = navigator.appName;

function show(Hnum){
	clearTimeout(myTimer);
	closemenu();

	// Indicate which sub menu needs to be opened
	openNum = Hnum;
	
	// Set the timer to show the submenu
	showTimer = setTimeout("shownow()",400);
}

function shownow(){
	var Hnum = openNum;
	var e;
	var menuObj;
	var menuLink;

	menuObj = 'Link' + Hnum;
	e = document.getElementById(menuObj);
	if ( null !== e ) {
		e.style.display = 'block';
	}

	menuLink = 'menu_' + Hnum;
	e = document.getElementById(menuLink);
	if ( null !== e ) {
		if (Hnum == menuLength - 1) {
			e.className = 'menu-parent menu-end-hover';
		} else {
			e.className = 'menu-parent-hover';
		}
	}
}

function checkmouseover(Hnum){
	clearTimeout(showTimer);
	clearTimeout(myTimer);
	linkNum = Hnum;
	myTimer = setTimeout('closemenu()',400); // myTimer holds the id of the timer
}

function clearTimer(){
	clearTimeout(myTimer);
}

function closemenu(){
	var i;
	var e;
	var menuObj;
	var menuLink;

	for(i=0;i<menuLength;i=i+1){
		menuObj = 'Link' + i;
		e = document.getElementById(menuObj);
		if ( null !== e ) {
			e.style.display = 'none';
		}

		menuLink = 'menu_' + i;
		e = document.getElementById(menuLink);
		if ( null !== e ) {
			if (i == menuLength - 1) {
				e.className = 'menu-parent menu-end';
			} else {
				e.className = 'menu-parent';
			}
		}
	}
}

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages(div) {
	if (!preloadFlag) {
		image_file = changeImages.arguments[1];
		image_url = image_file.substring(0,image_file.indexOf("/template"));
		preloadImages(image_url);
	}
	if (document.images) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
			imagename = document[changeImages.arguments[i]].src
		}
	}
	if (imagename.indexOf('rollover') > 0) document.getElementById('tool-menu-'+div).style.display = 'block';
	else document.getElementById('tool-menu-'+div).style.display = 'none';
}

var preloadFlag = false;
var preloadImages_array = [];
function preloadImages(image_url) {
	var imageList = [
		'bg_tool_rollover.gif',
		'toolicon_blog_rollover.gif',
		'toolicon_community_rollover.gif',
		'toolicon_etrainer_rollover.gif',
		'toolicon_fed_rollover.gif',
		'toolicon_fooddata_rollover.gif',
		'toolicon_goal_rollover.gif',
		'toolicon_more_tools_rollover.gif',
		'toolicon_motivation_barrier_rollover.gif',
		'toolicon_today_rollover_new.gif',
		'toolicon_weighin_rollover.gif'];
	var i;
	
	if (document.images) {
		for(i = 0; i < imageList.length; i++) {
			preloadImages_array[i] = newImage(image_url + '/style3/header/' + imageList[i]);
		}

		preloadFlag = true;
	}
}

/* This function switches the display state of the section help box. */ 
function switchHelpState(section, save_help_state) {
	var section_help = document.getElementById('user-guide-content');
	var switch_location = '/personal/myaccount/help_switch.php';
	var state = 0;
	var style_type = 'none';
	
	if (section_help.style.display == 'none') {
		state = 1;
		style_type = 'block';
	}
	
	if (save_help_state) {
		var switchHelpState = YAHOO.util.Connect.asyncRequest(
		'POST',
		switch_location+'?section='+section+'&state='+state
		);
	}
	
	section_help.style.display = style_type;
}

/* This function toggles the login link to its expanded form. */
function toggleLoginForm() {
	document.getElementById('loggedOutControls').style.display = 'none';
	document.getElementById('loggedOutForm').style.display = 'block';
	document.getElementById('loggedOutFormControls').style.display = 'block';
	document.getElementById('login_link').href = '';
}

var toolbar = function() {
	var menuObj;
	var menuTimer;

	return {
		initialize : function() {
			menuObj = null;
			menuTimer = null;
		},
		changeImage : function(id, image) {
			var result = false;

			var faceObj = document.getElementById('tool-item-image-' + id);
			if ( null !== faceObj ) {
				faceObj.src = image;
				result = true;
			}

			return result;
		},
		displayTip : function(id, visible) {
			var result = false;

			var tooltipObj = document.getElementById('tool-item-tip-' + id);
			if ( null !== tooltipObj ) {
				if ( visible ) {
					tooltipObj.style.display = 'block';
				} else {
					tooltipObj.style.display = 'none';
				}
				result = true;
			}

			return result;
		}, 
		expandMenu : function(id) {
			var result = false;

			this.keepMenuOpen();
			this.closeMenu();
			menuObj = document.getElementById('tool-item-menu-' + id);
			if ( null !== menuObj ) {
				menuObj.style.display = 'block';
				results = true;
			}

			return result;
		},
		collapseMenu : function(id, image) {
			var result = false;

			if ( null !== menuObj ) {
				var me = this;
				menuTimer = window.setTimeout(
					function () {
						menuTimer = null;
						me.closeMenu();
						me.changeImage(id, image);
					},
					200);
				result = true;
			}

			return result;
		},
		closeMenu : function() {
			if ( null !== menuObj ) {
				menuObj.style.display = 'none';
				menuObj = null;
			}
		}, 
		keepMenuOpen : function() {
			var result = false;

			if ( null !== menuTimer ) {
				window.clearTimeout(menuTimer);
				menuTimer = null;
				result = true;
			}

			return result;
		}
	};
}();
toolbar.initialize();


/** 
 * This function toggles the visibility of the given element.
 * @param id  		The id of the element.
 * @param display 	The display value to make the element visible 
 *					(eg. 'block', 'list-item', etc.)
 */
function toggleVisibility(
	id,
	display)
{
	var e = document.getElementById(id);
	if (e.style.display == 'none') {
		e.style.display = display;
	}
	else{
		e.style.display = 'none';
	}
}

/** 
 * Sets style.display on the given element.
 * @param id  		The id of the element.
 * @param display 	The display valu (eg. 'block', 'list-item', etc.)
 */
function setVisibility(
	id,
	display)
{
	var e = document.getElementById(id);
	e.style.display = display;
}

