var selectedMenuOptionID='';
var selectedMenuOptionParentID='';
var selectedMenuOptionGrandparentID='';

function highlightMenuOption(eventObj, menuOptionID, menuBoxID, parentMenuOptionID, parentMenuBoxID, grandparentMenuOptionID, childMenuBoxID) {
    //highlight menu option's background color
	var menuOption = getStyleObject(menuOptionID);
	menuOption.backgroundColor = '#8f9f9f';
	//show menu box, if any
	if ( menuBoxID !='' )
	 changeObjectVisibility(menuBoxID, 'visible');
	//highlight parent menu option's background color, if any
	if ( parentMenuOptionID !='' ) {
	 var parentmenuOption = getStyleObject(parentMenuOptionID);
	 parentmenuOption.backgroundColor = '#8f9f9f';
	} 	
	//show parent's menu box, if any
	if ( parentMenuBoxID !='' )
	 changeObjectVisibility(parentMenuBoxID, 'visible');
	//highlight grandparent menu option's background color, if any
	if ( grandparentMenuOptionID !='' ) {
	 var grandparentmenuOption = getStyleObject(grandparentMenuOptionID);
	 grandparentmenuOption.backgroundColor = '#8f9f9f';
	}
	//show child menu box, if any
	if ( childMenuBoxID !='' )
	 changeObjectVisibility(childMenuBoxID, 'visible');
}

function unhighlightMenuOption(eventObj, menuOptionID, menuBoxID, parentMenuOptionID, parentMenuBoxID, grandparentMenuOptionID, childMenuBoxID) {
   //only if this option doesn't have suboptions or it has but the mouse did not move out to the right
   //alert(eventObj.clientX);
   if ( !(childMenuBoxID!='' && eventObj.clientX>330) ) {
   //unhighlight menu option's background color, depending whether its selected
	var menuOption = getStyleObject(menuOptionID);
	if (selectedMenuOptionID==menuOptionID || selectedMenuOptionParentID==menuOptionID || selectedMenuOptionGrandparentID==menuOptionID)
	 menuOption.backgroundColor = 'E7ECF0';
	else
	 menuOption.backgroundColor = '#003366';
	//hide menu box, if any
	if ( menuBoxID !='' )
	 changeObjectVisibility(menuBoxID, 'hidden');
	//unhighlight parent menu option's background color, if any, and depending whether its selected
	if ( parentMenuOptionID !='' ) {
	 var parentmenuOption = getStyleObject(parentMenuOptionID);
	 if (selectedMenuOptionID==parentMenuOptionID || selectedMenuOptionParentID==parentMenuOptionID || selectedMenuOptionGrandparentID==parentMenuOptionID)
	  parentmenuOption.backgroundColor = 'E7ECF0';
	 else
	 parentmenuOption.backgroundColor = '#003366';
	} 	
	if ( !(grandparentMenuOptionID!='' && eventObj.clientX<340) ) { 
	 //hide parent's menu box, if any
	 if ( parentMenuBoxID !='' )
	  changeObjectVisibility(parentMenuBoxID, 'hidden');
	}//if
	//unhighlight grandparent menu option's background color, if any, and depending whether its selected
	if ( grandparentMenuOptionID !='' ) {
	 var grandparentmenuOption = getStyleObject(grandparentMenuOptionID);
	 if (selectedMenuOptionID==grandparentMenuOptionID || selectedMenuOptionParentID==grandparentMenuOptionID || selectedMenuOptionGrandparentID==grandparentMenuOptionID)
	  grandparentmenuOption.backgroundColor = 'E7ECF0';
	 else
	 grandparentmenuOption.backgroundColor = '#003366';
	}
	//hide child menu box, if any
	if ( childMenuBoxID !='' )
	 changeObjectVisibility(childMenuBoxID, 'hidden');
   }//if
}

function selectMenuOption () {
    if ( selectedMenuOptionID!='xxx' && selectedMenuOptionID!='' ) {
     //setting background color
     var menuOption = getStyleObject(selectedMenuOptionID);
	 menuOption.backgroundColor = 'E7ECF0';
	 //setting font to span (grandchild of the div)
	 var menuOptionObject = getObject(selectedMenuOptionID);
	 menuOptionObject.getElementsByTagName("a")[0].className='menu_link_highlighted';
	 //do the same with parent, if any
	 if ( selectedMenuOptionParentID!='' ) {
	  //setting background color
      var parentMenuOption = getStyleObject(selectedMenuOptionParentID);
	  parentMenuOption.backgroundColor = 'E7ECF0';
	  //setting font to span (grandchild of the div)
	  var parentMenuOptionObject = getObject(selectedMenuOptionParentID);
	  parentMenuOptionObject.getElementsByTagName("a")[0].className='menu_link_highlighted';
	 }//parent
	 //do the same with grandparent, if any
	 if ( selectedMenuOptionGrandparentID!='' ) {
	  //setting background color
      var grandparentMenuOption = getStyleObject(selectedMenuOptionGrandparentID);
	  grandparentMenuOption.backgroundColor = 'E7ECF0';
	  //setting font to span (grandchild of the div)
	  var grandparentMenuOptionObject = getObject(selectedMenuOptionGrandparentID);
	  grandparentMenuOptionObject.getElementsByTagName("a")[0].className='menu_link_highlighted';
	 }//parent
	 
	} //if there is selection
	
	 //menuOptionObject.childNodes[0].className='menu_link_highlighted'; //works ie not firefox
	 //menuOptionObject.childNodes[0].childNodes[0].className='menu_title_highlighted'; //works ie not firefox
	 //var menuOptionLink = getObject(menuOptionID+'link');
}


/******auxiliar functions******/
function getObject(objectId) {
    // cross-browser function to get an object given its id
    if(document.getElementById && document.getElementById(objectId)) {
	// W3C DOM
	return document.getElementById(objectId);
    } else if (document.all && document.all(objectId)) {
	// MSIE 4 DOM
	return document.all(objectId);
    } else if (document.layers && document.layers[objectId]) {
	// NN 4 DOM.. note: this won't find nested layers
	return document.layers[objectId];
    } else {
	return false;
    }
} // getObject

function getStyleObject(objectId) {
    // cross-browser function to get an object's style object given its id
    if(document.getElementById && document.getElementById(objectId)) {
	// W3C DOM
	return document.getElementById(objectId).style;
    } else if (document.all && document.all(objectId)) {
	// MSIE 4 DOM
	return document.all(objectId).style;
    } else if (document.layers && document.layers[objectId]) {
	// NN 4 DOM.. note: this won't find nested layers
	return document.layers[objectId];
    } else {
	return false;
    }
} // getStyleObject

function changeObjectVisibility(objectId, newVisibility) {
    // get a reference to the cross-browser style object and make sure the object exists
    var styleObject = getStyleObject(objectId);
    if(styleObject) {
	styleObject.visibility = newVisibility;
	return true;
    } else {
	// we couldn't find the object, so we can't change its visibility
	return false;
    }
} // changeObjectVisibility




/*
function showMenu(menuNumber, eventObj) {
    //    alert(eventObj);
    hideAllMenus();
    var menuId = 'menu' + menuNumber;
    if(changeObjectVisibility(menuId, 'visible')) {
	var menuTitle = getStyleObject('menuTitle' + menuNumber);
	menuTitle.backgroundColor = '#339999';
	eventObj.cancelBubble = true;
	return true;
    } else {
	return false;
    }
}

var numMenus = 4;

function hideAllMenus() {
    for(counter = 1; counter <= numMenus; counter++) {
	changeObjectVisibility('menu' + counter, 'hidden');
	var menuTitle = getStyleObject('menuTitle' + counter);
	menuTitle.backgroundColor = '#003366';
    }
}

document.onclick = hideAllMenus;
*/