// the id of the current running timer object
var timeoutId;

/**
 * Rmoves the display=block attribute for all <ul> 
 * below the first level <li> elements
 * except the choosen one given by elementId. Shows
 * the choosen one if it's display class is not set to 'block'. 
 *
 * Also starts a timer that will hide the current showed <ul>
 * element after a time of 2s. This timer will be restarted 
 * at each call of this function.
 *
 */
function switchMenu(elementId) {
	if (timeoutId) {
		window.clearTimeout(timeoutId);
	}

	$("#nav > li > ul").each(function hide(){
		if (this.id != elementId) {
			this.style.display = "none";
		}
	});
		
	if ($("#" + elementId).css("display") != 'block') {
		$("#" + elementId).css("display", "block");
	}
	timeoutId = window.setTimeout("release()", 2000);
} 

/**
 * Restores the initial view state by removing the element style
 * attribute display for all <ul> elements below the first level <li>
 * elements.  
 */
function release() {
	$("#nav > li > ul").each(function hide(){
		this.style.display = "";
	});
}

/**
 * Hides the div element with the given oldlayerid id and shows
 * the one with the given newlayerid id.
 */
function showLayer(oldlayerid,newlayerid){
  document.getElementById(oldlayerid).style.visibility = "hidden";
  document.getElementById(oldlayerid).style.display = "none";

  document.getElementById(newlayerid).style.visibility = "visible";
  document.getElementById(newlayerid).style.display = "block";
}