var Popups = new Array();
function Popup(layer)
{
	//Register the layer
	Popups[layer.id] = this;
	
	//Show the layer, but set opacity to 0
	this.Fade = true;
	this.Layer = layer;
	this.SetOpacity(0);
	
	this.DestOpacity = 0;
	this.FadeInterval = null;
}

Popup.prototype.ToggleVisible = function(visible)
{
	if (visible == null)
		this.DestOpacity = this.DestOpacity == 1 ? 0 : 1;
	else
		this.DestOpacity = visible ? 1 : 0;

	if (this.Fade && this.FadeInterval == null)
		this.FadeInterval = setInterval('Popups[\'' + this.Layer.id + '\'].DoFade()', 30);
	else
		this.SetOpacity(this.DestOpacity);
}

Popup.prototype.GetOpacity = function()
{
	return parseFloat(this.Layer.style.opacity);
}

Popup.prototype.SetOpacity = function(opacity)
{
	if (opacity == 0)
		this.Layer.style.visibility = "hidden";
	else
		this.Layer.style.visibility = "visible";

	if (this.Fade)
	{
		this.Layer.style.opacity = opacity;
		this.Layer.style.filter = "alpha(opacity = " + opacity * 100 + ")";
	}
	else
	{
		this.Layer.style.opacity = null;
		this.Layer.style.filter = null;
	}
}

Popup.prototype.DoFade = function()
{
	var currOpacity = this.GetOpacity();
	var deltaOpacity = (this.DestOpacity - currOpacity) / 2;
	var newOpacity = currOpacity + deltaOpacity;
	if (Math.abs(deltaOpacity) <= 1E-2)
	{
		clearInterval(this.FadeInterval);
		this.FadeInterval = null;
		newOpacity = this.DestOpacity;
	}
	
	this.SetOpacity(newOpacity);
}

function TogglePopup(popupLayer, visible)
{
	if (popupLayer == null)
		return;
	
	var popup = null;
	if ((popup = Popups[popupLayer.id]) == null)
	{
		popup = new Popup(popupLayer);

		//Don't fade balloons if we are under IE because... filter: alpha(opacity=X)
		//only renders the client area.
		if (document.all && popupLayer.className == 'bubble')
			popup.Fade = false;
	}
	else if (popup.Layer != popupLayer)
		popup.Layer = popupLayer;
	popup.ToggleVisible(visible);
}

document.onmouseover = function(e)
{
	e = e || window.event; //e for Mozilla, window.event for IE
	var target = e.target || e.srcElement;
	
	//Find the container layer containing the link and the menu
	var menuContainer = FindContainer(target);
	if (!menuContainer)
		return;
	
	var menu = document.getElementById(menuContainer.id + 'Menu');
	if (menu)
		TogglePopup(menu, true);
}

document.onmouseout = function(e)
{
	e = e || window.event; //e for Mozilla, window.event for IE
	var source = e.target || e.srcElement;
	var destination = e.relatedTarget || e.toElement;

	//This event should be processed only if we are leaving a descendant of the menu AND
	//we're not entering into a new descendant of the menu.
	if (!IsMenuDescendent(source) || IsMenuDescendent(destination, FindContainer(source)))
		return;
	
	//Find the container layer containing the link and the menu
	var menuContainer = FindContainer(source);
	if (!menuContainer)
		return;
	
	var menu = document.getElementById(menuContainer.id + 'Menu');
	if (menu)
		TogglePopup(menu, false);
}

function FindContainer(layer)
{
	while (layer && layer.className != "navItem")
		layer = layer.parentNode;
	return layer;
}

function IsMenuDescendent(layer, menu)
{
	while (layer && ((!menu && layer.className != "navItem") || (menu && layer.id != menu.id)))
		layer = layer.parentNode;
	return layer != null;
}