var aboutButton, processButton;
var aboutSubMenu, processSubMenu;
var subMenuEffect, isOpen = false;
var preloadedImages;

function buttonMouseOver(butt) {
	if(butt == aboutButton) {
		processSubMenu.hide();
		processButton.oldonmouseout();
	} else if(butt == processButton) {
		aboutSubMenu.hide();
		aboutButton.oldonmouseout();
	} else {
		aboutButton.oldonmouseout();
		processButton.oldonmouseout();
		
		aboutSubMenu.hide();
		processSubMenu.hide();
		
		if(isOpen) {
			subMenuEffect.stop();
			subMenuEffect.start(0);
			isOpen = false;
		}
	}
}

// For generating the rollover names since he didn't like the alt tag tooltips

function basename(str) {
	var index = str.lastIndexOf("/");
	
	if(index == -1)
		return str;
		
	return str.substr(index + 1);
}


function generateRolloverName(offImagePath, suffix) {
	var baseFileName = basename(offImagePath);
	
	var extension = baseFileName.substr(baseFileName.indexOf(".") + 1)
	var rootFileName = baseFileName.substring(0, baseFileName.indexOf("."));
	
	return rootFileName + suffix + "." + extension;
}

window.onload = function() {
	Element.extend({
		hide: function() {
			this.style.display = 'none';
			return this;
		},
		show: function() {
			this.style.display = '';
			return this;
		}
	});

	// preload the main menu items
	var menuImagePath = "images/menu/";
	var menuImageSuffix = "_over";
	preloadedImages = [];

	var menuItems = $$("#menu a"), a = 0;
	while(a < menuItems.length) {
		ob = menuItems[a];
		ob.oldSrc = $E('img', ob).getAttribute("src");
		ob.overSrc = menuImagePath + generateRolloverName(ob.oldSrc, menuImageSuffix);

		// preload the images
		var newImg = new Image();
		newImg.src = ob.overSrc;
		preloadedImages.push(newImg);

		// mouse on/out funtionality
		ob.onmouseover = function () {
			var img = $E('img', this);
			img.src = this.overSrc;
			this.style.backgroundColor = "#DEEDEA";
			buttonMouseOver(this);
		}

		ob.onmouseout = function() {
			$E('img', this).src = this.oldSrc;
			this.style.backgroundColor = "#FFFFFF";
		}
		
		a++;
	}
	
	// create submenu functionality
				
	aboutSubMenu = $("about_submenu");
	processSubMenu = $("process_submenu");

	// about button
	aboutButton = $("about_button");
	aboutButton.oldOverFunct = aboutButton.onmouseover;
	aboutButton.onmouseover = function() {
		this.oldOverFunct();
		aboutSubMenu.show();
		
		if(!isOpen) {
			subMenuEffect.stop();
			subMenuEffect.start(25);
			isOpen = true;
		}
	}
	
	// process button
	processButton = $("process_button");
	processButton.oldOverFunct = processButton.onmouseover;
	processButton.onmouseover = function() {
		this.oldOverFunct();
		processSubMenu.show();
		
		if(!isOpen) {
			subMenuEffect.stop();
			subMenuEffect.start(25);
			isOpen = true;		
		}
	}
	
	// disable onmouseout but save the functions
	processButton.oldonmouseout = processButton.onmouseout;
	aboutButton.oldonmouseout = aboutButton.onmouseout;
	processButton.onmouseout = aboutButton.onmouseout = null;
	
	subMenuEffect = new Fx.Style('submenu', 'height', {duration:500});
	
	aboutSubMenu.hide();
	processSubMenu.hide();
	subMenuEffect.set(0);
}