//////////////////////////////////////////////////////////////////////
// MenuButton constructor
//////////////////////////////////////////////////////////////////////
function MenuButton(id, title)
{
	this.id  = id;
	this.img = document.getElementById("menu_button_img_" + id);
	this.div = document.getElementById("menu_button_div_" + id);
	this.orig_class = this.img.className;
	
	var me = this;
	AddEventListener(this.div, "mouseover", this.OnHover.bind(this, true));
	AddEventListener(this.div, "mouseout" , this.OnHover.bind(this, false));
}

////////////////////////////////////////////////////////////////////
// Static variables
//////////////////////////////////////////////////////////////////////
MenuButton.STATE_NORMAL     = "Normal";
MenuButton.STATE_HOVER      = "Hover";
MenuButton.STATE_TONED_DOWN = "TonedDown";

//////////////////////////////////////////////////////////////////////
// Change state (hover/normal/toned-down)
//////////////////////////////////////////////////////////////////////
MenuButton.prototype.OnHover = function(is_hover)
{
	if (!is_hover)
	{
		this.img.className = this.orig_class;
	}
	else if (this.orig_class == "MenuButtonNormal")
	{
		this.img.className = "MenuButtonHover";
	}
	else if (this.orig_class == "MenuButtonTonedDown")
	{
		this.img.className = "MenuButtonNormal";
	}
}