// Integer used to track the total number of menu groups.
//var iGroupCount=0;

// Integer used to track the total number of menu items.
var iItemCount=0;

// Object placeholder for the srcElement of an event.
var oWorkItem="";

// Object placeholder for the last know menu.
var oDistinctMenu="";

// Object placeholder for the last known menu group.
var oDistinctGroup="";

// Boolean used to monitor the overall status of the menu.
var bOpenMenu=false;

// All click events for the menu go through here.
// When mouse capture is set, all click events for everything goes through here.
function fnSwitchMenu(){
	oWorkItem=event.srcElement;

	// If the object that was clicked is a menu label, then continue.
	if(oWorkItem.component=="menulabel"){
		// If the last known menu is different than the menu that was clicked, close that previous menu item.
		// This is what makes the menu follow the mouse.  It works in part with the fnHighlight function.
		if((oDistinctMenu!=oWorkItem)&&(oDistinctMenu!="")){
			oDistinctGroup=eval("oGroup" + oDistinctMenu.groupid);
			oDistinctGroup.style.display="none";
			oDistinctMenu.menustatus="closed";
			oDistinctMenu.className="menulabel";
		}
		// Set the last known menu and menu group to the current object.
		oDistinctMenu=oWorkItem;
		oDistinctGroup=eval("oGroup" + oWorkItem.groupid);
		// If the current menu is closed, open it and give the menu mouse capture.
		if(oDistinctMenu.menustatus=="closed"){
			oDistinctMenu.menustatus="open";	
			oDistinctMenu.className="menulabel3";
			oDistinctGroup.style.display="block";
			if(bOpenMenu==false){
				bOpenMenu=true;
				oMenuContainer.setCapture();
			}
		}
		else{
			// If the menu is not closed, then close it and remove mouse capture.
			bOpenMenu=false;
			oMenuContainer.releaseCapture();
			oDistinctMenu.menustatus="closed";
			oDistinctGroup.style.display="none";
		}
	}
	if(oWorkItem.component=="menuitem"){
		// If the object is a menu item, then process its MENUACTION.
		if(oWorkItem.menuaction!="Invalid"){
			//eval(oWorkItem.menuaction + "()");
			eval(oWorkItem.menuaction);
		}
		// Remove capture from the menu and close it by clicking on the same menu item.
		oMenuContainer.releaseCapture();
		oDistinctMenu.click();
		// Since the mouse is probably not over the menu anymore and the menu was closed, go ahead and set the className back to the original setting.
		oDistinctMenu.className="menulabel";
	}
	// If the object is not any part of the menu, and the menu is open, close the menu, remove capture, but stop the event from processing.
	if(!oWorkItem.component){
		if(bOpenMenu==true){
			oDistinctMenu.className="menulabel";
			oMenuContainer.releaseCapture();
			oDistinctMenu.click();
			event.returnValue=false;
		}
	}
}

// This function is used when the mouse moves over menu labels and menu items.
function fnHighlight(){
	// Only continue if the mouse is within the client area.  This is only a concern when setCapture has been used.
	if((event.clientX>0)&&(event.clientY>0)&&(event.clientX<document.body.offsetWidth)&&(event.clientY<document.body.offsetHeight)){
		oWorkItem=event.srcElement;
		// If the clicked object is a menu label, continue.
		if(oWorkItem.component=="menulabel"){
			// If the clicked object's label is the original, use the menulabel2 to highlight it.
			if(oWorkItem.className=="menulabel"){
				oWorkItem.className="menulabel2";
				// If the last known menu is open, close it.  We know this menu is not open because of the className.
				if((oDistinctMenu!="")&&(oDistinctMenu.menustatus=="open")){
					fnSwitchMenu(oWorkItem);
					event.returnValue=false;
				}
			}
			else{
				// If the clicked object's label is not the original, and its menustatus is closed, set it back to the original.
				if(oWorkItem.menustatus=="closed"){
					oWorkItem.className="menulabel";
				}
			}
		}
		// If a menu item was clicked, continue.
		if(oWorkItem.component=="menuitem"){
			// if the menu item's menustatus is not active, then make it active.
			if(oWorkItem.menustatus!="active"){
				oWorkItem.style.backgroundColor="#999966";
				oWorkItem.style.color="#ffffff";
				oWorkItem.menustatus="active";
			}
			// if the menu item's menustatus is active, set it to passive.
			else{
				oWorkItem.style.backgroundColor="";
				oWorkItem.style.color="#000000";
				oWorkItem.menustatus="passive";
			}
		}
	}
	// If the mouse strays outside the clientarea and a menu is open, shut everything down.
	else{
		if((oDistinctMenu!="")&&(oDistinctMenu.menustatus=="open")){
			fnSwitchMenu();
			oDistinctMenu.className="menulabel";
			event.returnValue=false;
		}
	}
}

// The fnAddMenuGroup function is used to dynamically add new menu groups.

function fnAddMenuGroup(iGroupID,sGroupName){
	// Increment the total number of menu groups.
	//iGroupCount++;
	// Add the new menu group (label and drop down menu) to the menu container.
	oMenuContainer.innerHTML+='<span groupid=' + iGroupID + ' component="menulabel" id=oLabel' + iGroupID + ' class="menulabel">' + sGroupName + '</span><span class="menuseparator"></span><div id=oGroup' + iGroupID + ' class="menugroup"></div>';
	//oMenuContainer.innerHTML+='<span class="menuseparator"></span>';
	// Refer to the new label and group using the iGroupCount.
	var oNewLabel=eval("oLabel" + iGroupID);
	var oNewGroup=eval("oGroup" + iGroupID);
	// Align the label and group with the rest of the menu labels and groups.
	fnAlign(oNewLabel,oNewGroup);
}

// Align the menu labels and groups with each other.
function fnAlign(oLabel,oGroup){
	oLabel.menustatus="closed";
	//oLabel.style.top=2;
	//oLabel.style.left=75 * (iGroupCount-1) + 2;
	//nt
	oLabel.style.paddingLeft='3px'; 
	oLabel.style.paddingRight='3px'; 
	oLabel.style.fontWeight='bold';
	
	oGroup.style.top=oLabel.offsetHeight + oLabel.offsetTop+3; //before - 2
	oGroup.style.left=oLabel.offsetLeft;
	oGroup.style.display="none";
}

// Add new menu items.  The iGroupID is 1 - #Menu Labels.  The sItemName is what will be displayed.  sItemAction is a function call that will be made when the item is clicked.  sItemImage is an optional image to go with the menu item.  The source is hard coded, so will have to be changed to your favorite graphics directory.  Image extensions are hard coded as ".gif".
function fnAddMenuItem(iGroupId,sItemName,sItemAction){
	// Increment the total number of menu items.
	iItemCount++;
	// Assign a variable to the group the menu item will be added to using the iGroupID.
	var oNewGroup=eval("oGroup" + iGroupId);
	// If there is no tilde in the menu item name, then continue.   I used tildes in this case to identify special cases, such as the ~SPACER.
	if(sItemName.indexOf("~")==-1){
		// Add the new menu item to the menu group.
		oNewGroup.innerHTML+='<span groupid=' + iGroupId + ' component="menuitem" id="oItem' + iItemCount + '" itemid=' + iItemCount + ' menuaction="' + sItemAction + '">' + sItemName + '</span><br>';
		// Assign a variable to the new menu item.
		var oNewItem=eval("oItem" + iItemCount);
		// Set the default styles for the new menu item.
		oNewItem.style.cursor="hand";
		oNewItem.style.backgroundColor="#ffffff";
		oNewItem.style.color="black";
		oNewItem.style.textDecoration="none";
		//oNewItem.style.marginLeft="0px";
		oNewItem.style.width=parseInt(oNewGroup.currentStyle.width) - 8;
		//oNewItem.style.border="1 solid";
		//oNewItem.style.borderColor="silver";
	}
	// If there was a tilde, and if the name is ~SPACER, then just add a horizontal rule.
	if(sItemName=="~SPACER"){
		//oNewGroup.innerHTML+='<hr>';
		oNewGroup.innerHTML+='<span id="oSeparator' + iItemCount + '"><hr></span>';
		var oNewItem=eval("oSeparator" + iItemCount);
		//oNewItem.style.backgroundColor="silver";
		oNewItem.style.color="silver";
		//oNewItem.style.marginLeft="0px";
		oNewItem.style.height="1px";
		oNewItem.style.width=parseInt(oNewGroup.currentStyle.width) - 8;
	}
}