var menuItems = new Array();
var timer = null;


//Pre load the images for the menu
var menuImg0 = new Image();
menuImg0.src = "images/menu_BigFish.gif";
var menuImg1 = new Image();
menuImg1.src = "images/menu_Services.gif";
var menuImg2 = new Image();
menuImg2.src = "images/menu_People.gif";
var menuImg3 = new Image();
menuImg3.src = "images/menu_Contact.gif";


var menuImg0_over = new Image();
menuImg0_over.src = "images/menu_BigFish_over.gif";
var menuImg1_over = new Image();
menuImg1_over.src = "images/menu_Services_over.gif";
var menuImg2_over = new Image();
menuImg2_over.src = "images/menu_People_over.gif";
var menuImg3_over = new Image();
menuImg3_over.src = "images/menu_Contact_over.gif";


//a flag of the index of the current menu
var currMenu;

function buildMenu(currIndex) {
	currMenu = currIndex;

	var menuPlaceholder	= document.getElementById("menuPlaceholder")
	
	//create the sub menus
	var menuItem0 = new SubMenu("0",menuPlaceholder,document.getElementById("menuItem0"),150);
	menuItem0.addItem("Our Angle","subMenuItem","angle.shtml");
	menuItem0.addItem("More than just events","subMenuItem","events.shtml");
	menuItem0.addItem("Swimmingly good ideas","subMenuItem","swimmingly.shtml");
	menuItems[menuItems.length] = menuItem0;
	
	var menuItem1 = new SubMenu("1",menuPlaceholder,document.getElementById("menuItem1"),160);
	menuItem1.addItem("The Hook","subMenuItem","ourservices.shtml");
	menuItem1.addItem("Sponsorship Management","subMenuItem","sponsorship.shtml");
	menuItem1.addItem("Event Management","subMenuItem","eventmanagement.shtml");
	menuItem1.addItem("Conferences","subMenuItem","conference.shtml");
	menuItem1.addItem("Incentives","subMenuItem","incentives.shtml");
	menuItems[menuItems.length] = menuItem1;
	
	var menuItem2 = new SubMenu("2",menuPlaceholder,document.getElementById("menuItem2"),110);
	menuItems[menuItems.length] = menuItem2;
	
	var menuItem3 = new SubMenu("3",menuPlaceholder,document.getElementById("menuItem3"),150);
	menuItem3.addItem("Contact Us","subMenuItem","contact.shtml");
	menuItem3.addItem("Online Registration Form","subMenuItem","detailedonlineform.shtml");
	menuItems[menuItems.length] = menuItem3;
	
	
	
	//add event handlers to the menu headers
	for(var i=0;i<menuItems.length;i++) {
		var menuHeader = document.getElementById("menuItem" + i)
		
		//load the image
		var img = document.getElementById("menuImg"+i)
		if (i!=currMenu) {
			img.src = eval("menuImg"+i).src
		}
		else {
			img.src = eval("menuImg"+i+"_over").src
		}
		
		menuHeader.onmouseover = function() {
			hideMenus();				
			var index = this.id.charAt(this.id.length-1);
			menuItems[index].show();
			menuOver(index);
		}
		menuHeader.onmouseout = function() {				
			var index = this.id.charAt(this.id.length-1);
			timer = window.setTimeout("hideMenus()",300);
			//don't do rollout if we are on the active menu
			if(index!=currMenu) {
				//menuOut(index);	
			}
		}
	}
	
}

function menuOver(index) {		
	var img = document.getElementById("menuImg" + index);
	img.src = eval("menuImg"+index+"_over").src
}

function menuOut(index) {
	var img = document.getElementById("menuImg" + index);
	img.src = eval("menuImg"+index).src
}

function hideMenus() {
	window.clearTimeout(timer);
	for(var i=0;i<menuItems.length;i++) {
		menuItems[i].PlaceHolder.innerHTML = "";
		menuItems[i].PlaceHolder.style.visibility = "hidden";
		menuItems[i].PlaceHolder.style.display = "none";
		if(i!=currMenu) {
			menuOut(i);
		}
	}		
}


function getElementPosition(elemID) {
	var offsetTrail = document.getElementById(elemID);
	var offsetLeft = 0;
	var offsetTop = 0;
	while (offsetTrail) {
		offsetLeft += offsetTrail.offsetLeft;
		offsetTop += offsetTrail.offsetTop;
		offsetTrail = offsetTrail.offsetParent;
	}
	if (navigator.userAgent.indexOf("Mac") != -1 && 
		typeof document.body.leftMargin != "undefined") {
		offsetLeft += document.body.leftMargin;
		offsetTop += document.body.topMargin;
	}
	return {left:offsetLeft, top:offsetTop};
}
	
	
//****************************************
// SUB MENU CLASS
//***************************************


//creates a new menu item given the id specified inside of the container
//specified by placeHolder and aligns it according to where parent exists
//with the width and class specified.
function SubMenu(id,placeHolder,parent,width) {
	this.ID = id;
	//the sub menu items
	this.Items = new Array();
	this.PlaceHolder = placeHolder;
	this.Width = width;
	this.Parent = parent;
}

SubMenu.prototype.addItem = function(str,css,link) {
	//create the item element and store it in the array
	var myID = this.ID + "_" + this.Items.length
	this.Items[this.Items.length] = "<div onClick=\"window.location='" + link + "'\" style='width:" + this.Width + "px;' class='" + css + "' id='" + myID + "'>" + str + "</div>";
}

SubMenu.prototype.highlightItem = function() {
	window.clearTimeout(timer);		
	//this.style.backgroundColor="#FFFFFF";
	//this.style.color="#4FAD26";
	this.style.backgroundColor="#4FAD26";
	this.style.color="#FFFFFF";
}

SubMenu.prototype.unHighlightItem = function() {
	timer = window.setTimeout("hideMenus()",300);
	//this.style.backgroundColor="#4FAD26";
	//this.style.color="#FFFFFF";
	this.style.backgroundColor="#FFFFFF";
	this.style.color="#4FAD26";
}

SubMenu.prototype.show = function() {
	//create the div text
	var div = "";
	for(var i=0;i<this.Items.length;i++) {			
		div+=this.Items[i];
	}
	//check if there are any items
	if(this.Items.length > 0) {
		//add the div tag to the document
		this.PlaceHolder.innerHTML = div;
		
		//format the div tag
		this.PlaceHolder.style.width = this.Width + "px";
		this.PlaceHolder.style.top = (getElementPosition(this.Parent.id).top + 25) + "px";
		this.PlaceHolder.style.left = (getElementPosition(this.Parent.id).left + 30) + "px";
		this.PlaceHolder.style.visibility = "visible";
		this.PlaceHolder.style.display = "inline";
		
		//add event handlers to each subMenu
		for(var i=0;i<this.Items.length;i++) {			
			var myItem = document.getElementById(this.ID + "_" + i);
			myItem.onmouseover = this.highlightItem;
			myItem.onmouseout = this.unHighlightItem;
		}
		
	}
}