//////////////////////////////////////////////////////////////////////
// Menu constructor
//////////////////////////////////////////////////////////////////////
function Menu(menu_bar, id, title)
{
	this.menu_bar = menu_bar;
	this.id = id;

	// Initialize button and div
	this.button = new MenuButton(id, title);
	this.div   = document.getElementById("menu_" + id);
	if (this.div)
	{
		this.SetPosition();
		this.InitFader  ();
		this.InitCols   ();
	}
}

//////////////////////////////////////////////////////////////////////
// Constants
//////////////////////////////////////////////////////////////////////
Menu.CLASS_PREFIX        = "Menu_";
Menu.CLASS_HOVER_PREFIX  = "MenuHover_";

//////////////////////////////////////////////////////////////////////
// Set Menu Position (relatively to menu button)
//////////////////////////////////////////////////////////////////////
Menu.prototype.SetPosition = function()
{
	var button_pos = GetRelativePosition(this.button.div, this.menu_bar.div);

	this.div.style.top  = button_pos.top  + this.button.div.clientHeight + 11;
	this.div.style.left = button_pos.left + this.button.div.clientWidth - this.div.clientWidth + 170;
}

//////////////////////////////////////////////////////////////////////
// Init fader and fade animation on hover
//////////////////////////////////////////////////////////////////////
Menu.prototype.InitFader = function()
{
	this.fader = new Fader(this.div, 0, 100, false, true);
	
	AddEventListener(this.button.div, "mouseover", this.fader.Fade.bind(this.fader, true ));
	AddEventListener(this.button.div, "mouseout" , this.fader.Fade.bind(this.fader, false));
	AddEventListener(this.div       , "mouseover", this.fader.Fade.bind(this.fader, true ));
	AddEventListener(this.div       , "mouseout" , this.fader.Fade.bind(this.fader, false));
	
	this.div.style.visibility = "visible"; 
}

//////////////////////////////////////////////////////////////////////
// Init cols to change their appearance on hover
//////////////////////////////////////////////////////////////////////
Menu.prototype.InitCols = function()
{
	var cols = this.div.getElementsByTagName("td");

	for (var i = 0; i < cols.length; ++i)
	{
		AddEventListener(cols[i], "mouseover", this.OnHover.bind(this, cols[i], true ));
		AddEventListener(cols[i], "mouseout" , this.OnHover.bind(this, cols[i], false));
	}
}

//////////////////////////////////////////////////////////////////////
// Change row appearance on hover
//////////////////////////////////////////////////////////////////////
Menu.prototype.OnHover = function(obj, is_hover)
{
	obj.className = "Menu" + (is_hover ? " MenuHover" : "") + " Menu_" + this.id;
}