
function MainMenu() {

	var timeout	= 500;
	var closetimer	= 0;
	var ddmenuitem	= 0;

	var me = this;
	var menuBar;
	var subMenuContainer;


	this.over = function(e) {
		
		var eTarget = getEventTarget(e);
		
		if (eTarget.tagName.toUpperCase() == "A") {
			replaceImage(eTarget.getElementsByTagName("IMG")[0],"menu_","menuOver_");
		} else {
			replaceImage(eTarget,"menu_","menuOver_");
		}
	}

	this.out = function(e) {
	
		var eTarget = getEventTarget(e);
		
		if (eTarget.tagName.toUpperCase() == "A") {
			replaceImage(eTarget.getElementsByTagName("IMG")[0],"menuOver_","menu_");
		} else {
			replaceImage(eTarget,"menuOver_","menu_");
		}
	}

	function replaceImage(targetImage,from,to) {
		targetImage.src = targetImage.src.replace(from,to);
	}

	this.initPage = function(e) {
		menuBar = document.getElementById("menuBar");
		var linkList = menuBar.getElementsByTagName("A");

		for (x=0;  x < linkList.length; x++) {

			if (linkList[x].className == "Top") {
				addEvent(linkList[x],"mouseover",me.over,false);
				addEvent(linkList[x],"mouseout",me.out,false);
			}
		}
	}

	// open hidden submenu
	this.mopen = function(id) {

		// cancel close timer
		this.mcancelclosetime();

		// close old submenu
		if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

		// display submenu
		ddmenuitem = document.getElementById(id);
		ddmenuitem.style.visibility = 'visible';
	}
	
	// close displayed layer
	this.mclose = function() {
		if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
	}

	// go close timer
	this.mclosetime = function() {
		
		closetimer = window.setTimeout(function() {
			if(ddmenuitem) { ddmenuitem.style.visibility = 'hidden'; }
		},timeout);
	}

	// cancel close timer
	this.mcancelclosetime = function() {
		if(closetimer) {
			window.clearTimeout(closetimer);
			closetimer = null;
		}
	}
}

var mainMenu = new MainMenu();
addEvent(window,"load",mainMenu.initPage,false);

// close layer when click-out
document.onclick = mainMenu.mclose;


//***** Utility functions ***//

function cacheMenuImages() {
	pic1= new Image();
	pic1.src="../images/menuOver_Portfolio.gif";
	pic2= new Image();
	pic2.src="../images/menuOver_Specialties.gif";
	pic3= new Image();
	pic3.src="../images/menuOver_Showcase.gif";
	pic4= new Image();
	pic4.src="../images/menuOver_References.gif";
	pic5= new Image();
	pic5.src="../images/menuOver_Contact.gif";
}


