// Functions to add smart rollovers to images in the top menu of the mind on fire website

function BindEvent(Element, Event, Handler)
{
	// NS/Firefox	
	if (window.addEventListener)
		{
		if (typeof(capture) == "undefined" || !capture)
			Element.addEventListener(Event, Handler, false);
		else
			Element.addEventListener(Event, Handler, true);
		}
	// IE
	if (window.attachEvent)
		Element.attachEvent("on" + Event, Handler);
}

function AddRolloverEvents(Element)
{
	// create rolled over version of image
	var RolledImg = Element.cloneNode(false);
	RolledImg.src = Element.id;
	RolledImg.id = "";
	RolledImg.style.display = "none";

	// add the rolled image to the Dom next to the normal image
	Element.parentNode.insertBefore(RolledImg, Element);

	var Rollover = function()
	{
		Element.style.display = "none";
		RolledImg.style.display = "inline";
	}
	var Rollout = function()
	{
		RolledImg.style.display = "none";
		Element.style.display = "inline";
	}
	
	BindEvent(Element.parentNode, "mouseover", Rollover);
	BindEvent(Element.parentNode, "mouseout", Rollout);
}

function AddRollovers()
{
	var Container = document.getElementById("cms_menu__top_menu");
	
	var TopImages = Container.getElementsByTagName("IMG");
	
	// convert the pseudo array above into a real static array
	// the arrays returned by getElementsByTagName are dynamic objectS
	// if the dom is updated they are updated instantly. This will throw
	// the following code into an infinite loop that neither FF or IE are able 
	// to catch. In a nutshell it will crash both browsers.
	var Images = [];
	var i;
	for (i=0; i<TopImages.length; ++i)
		Images[i] = TopImages[i];
	
	for (i=0; i<Images.length; ++i)
		AddRolloverEvents(Images[i]);
}