/*-------------------------------------------------------------------------
	Author: Arachne
	Ver: 1.0
	Last update: 14May10
	Last tested: 14May10 in: IE6-8, Firefox, Safari, Chrome

	Requires: images need to be wrapped in div.rollover with inline
	width & height declarations; img.seen and img.hidden
	Requires: jQuery
-------------------------------------------------------------------------*/
var ImageSwap = 
{
	init: function()
	{
		var rolloverDivs = $(".rollover");
		
		for (var i = 0, ii = rolloverDivs.length; i < ii; i++)
		{
			// run swapImages in response to mouseover events on div
			// run restoreImages in response to mouseout events on div
			// run swapImages in response to focus events on div
			// run restoreImages in response to blur events on div
			
			$(rolloverDivs).bind("mouseover", ImageSwap.swapImagesListener);
			$(rolloverDivs).bind("mouseout", ImageSwap.restoreImagesListener);
			$(rolloverDivs).bind("focus", ImageSwap.swapImagesListener);
			$(rolloverDivs).bind("blur", ImageSwap.restoreImagesListener);

		}
	},
	
	swapImagesListener: function(event)
	{
		var images = this.getElementsByTagName("img");
		var first = images[0];
		var second = images[1];
		
		first.className = "bottom";
		second.className = "top";
	},
	
	restoreImagesListener: function(event)
	{
		var images = this.getElementsByTagName("img");
		var first = images[0];
		var second = images[1];
		
		first.className = "top";
		second.className = "bottom";
	}
};

ImageSwap.init();