﻿new function()
{
	var fadeInTime = 500;
	var fadeOutTime = 500;
	var rollOutClass = 'rollOut';
	var rollOverClass = 'rollOver';

	if (typeof jQuery == 'undefined')
	{
		return;
	}

	jQuery(document).ready(function()
	{
		init();
	});

	// Initialize
	function init()
	{
		$('img').each(function()
			{
				var image = $(this);
				var src = image.attr('src');
				var count = src.lastIndexOf(".");
				var filename = src.substring(0, count);
				var extension = src.substring(count + 1);
				if(image.hasClass('hover'))
				{
					var alternateImage = image.clone();
					alternateImage
						.attr('src', filename + '_hover.' + extension)
						.fadeTo(0, 0);
					image.parent().append(alternateImage);
					setFading(image, alternateImage, image.parent());
				}
				else if(image.hasClass('filter'))
				{
					var alternateImage = image.clone();
					image
						.attr('src', filename + '_filter.' + extension)
						.fadeTo(0, 0)
						.parent().append(alternateImage);
					setFading(alternateImage, image, image.parent());
				}
			});
	}

	function setFading(rollOutImage, rollOverImage, parentObject)
	{
		rollOverImage
			.addClass(rollOverClass)
			.css(
				{
					'position': 'absolute',
					'left': '0px',
					'top': '0px'
				});
		rollOutImage
			.addClass(rollOutClass)
			.css(
				{
					'position': 'absolute',
					'left': '0px',
					'top': '0px'
				});
		parentObject
			.mouseover(onMouseOver)
			.mouseout(onMouseOut)
			.css(
				{
					'display': 'block',
					'position': 'relative'
				})
			.width(rollOutImage.width())
			.height(rollOutImage.height());
	}

	function onMouseOver(event)
	{
		var src = $(this).children('img.' + rollOutClass).attr('src');
		$(this).unbind('mouseover', onMouseOver);
		$(this)
			.children('img.' + rollOverClass)
			.fadeTo(fadeInTime, 1, function()
				{
					jQuery(this).parent().mouseover(onMouseOver);
				});
	}

	function onMouseOut(event)
	{
		var src = $(this).children('img.' + rollOutClass ).attr('src');
		$(this)
			.children('img.' + rollOverClass)
			.fadeTo(fadeOutTime, 0);
	}
}
