// JavaScript Document

function WavicleMenuItem()
	{
		this.lastImage = ""; // The last image that the control had
		this.baseImage = ""; // The first image that the control contains on page load
		this.clickedImage = ""; // The image that the menu item takes when clicked
		this.overImage = ""; // The image that the menu item takes when moused over
		
		this.imageId = ""; // ID of img control
		
	}

function WavicleMenu(numItems)
{
	
	var menuItems = Array(numItems);
	//this.indexWithFocus = -1;

	this.setLastImage = setLastImage;
	this.setControlId = setControlId;
	this.setBaseImage = setBaseImage;
	this.itemClicked = itemClicked;
	this.itemGainedFocus = itemGainedFocus;
	this.itemMousedOver = itemMousedOver;
	this.itemMousedOut = itemMousedOut;
	this.setOverImage = setOverImage;
	this.setClickedImage = setClickedImage;
	//this.giveFocus = giveFocus;
	
	for (var x = 0; x < numItems; x++)
		menuItems[x] = new WavicleMenuItem();
		
	function removeFocusFromOtherItems(itemNum)
	{
		for (var i = 0; i < numItems; i++)
			if (i != itemNum)
				document.getElementById(menuItems[i].imageId).src = menuItems[i].baseImage;	
	}
	
	function restoreBaseImageOtherItems(itemNum)
	{
		for (var i = 0; i < numItems; i++)
			if (i != itemNum)
				menuItems[i].lastImage = menuItems[i].baseImage;
		
	}
	function itemClicked(itemNum)
	{
		document.getElementById(menuItems[itemNum].imageId).src = menuItems[itemNum].clickedImage;
		menuItems[itemNum].lastImage = menuItems[itemNum].clickedImage;

		removeFocusFromOtherItems(itemNum);
	}
	
	function itemGainedFocus(itemNum)
	{
		menuItems[itemNum].lastImage = menuItems[itemNum].clickedImage;
		// GIve all other controls not the focus fuck onblur event alltogether
		document.getElementById(menuItems[itemNum].imageId).src = menuItems[itemNum].clickedImage;	
		for (var i = 0; i < numItems; i++)
			if (i != itemNum)
				document.getElementById(menuItems[i].imageId).src = menuItems[i].baseImage;	
		
		removeFocusFromOtherItems(itemNum);
		restoreBaseImageOtherItems(itemNum);
	}
		
	function itemMousedOver(itemNum)
	{
		document.getElementById(menuItems[itemNum].imageId).src = menuItems[itemNum].overImage;		
	}
	
	function itemMousedOut(itemNum)
	{
		document.getElementById(menuItems[itemNum].imageId).src = menuItems[itemNum].lastImage;
	}
	
	function setControlId(itemNum, cntrlId)
	{
		menuItems[itemNum].imageId = cntrlId;	
	}
	
	function setBaseImage(itemNum, imageName)
	{
		menuItems[itemNum].baseImage = imageName;
		menuItems[itemNum].lastImage = imageName;
	}
	
	function setLastImage(itemNum,imageName)
	{
		menuItems[itemNum].lastImage = imageName;
	}
	
	function setOverImage(itemNum, imageName)
	{
		menuItems[itemNum].overImage = imageName;
	}
	
	function setClickedImage(itemNum, imageName)
	{
		menuItems[itemNum].clickedImage = imageName;	
	}
	
}