//	http://jqueryfordesigners.com/image-cross-fade-transition/

var crossfadeHoverImages = [];

$(window).resize(function ()
{
	$.each(crossfadeHoverImages, function ()
	{
		var secondStateImage = this;
		var initialStateImage = secondStateImage[0].initialStateImage;

		secondStateImage.css(
		{
			"position": "absolute",
			"top": initialStateImage.offset().top,
			"left": initialStateImage.offset().left
		});
	});
});

$.fn.crossfadeInitialize = function (gracePeriodMs)
{
	if (gracePeriodMs == undefined)
	{
		gracePeriodMs = 100;
	}

	return this.each(function ()
	{
		var self = $(this);

		var target = self.attr("ws:crossfader");
		self.parent().append('<br />');
		var secondStateImage = self.parent().append('<img>').find(':last-child');

		crossfadeHoverImages[crossfadeHoverImages.length] = secondStateImage;
		secondStateImage.attr('src', target);
		secondStateImage.css(
		{
			"position": "absolute",
			"top": self.offset().top,
			"left": self.offset().left
		});

		self[0].secondStateImage = secondStateImage;
		self[0].gracePeriodMs = gracePeriodMs;

		secondStateImage[0].initialStateImage = self;

		self.hover
		(
			function ()
			{
				self.fadeInFlag = false;
				self.stop().animate({ opacity: 0 }, 250);
			},
			function ()
			{
				self.fadeInFlag = true;
				window.setTimeout(function ()
				{
					if (self.fadeInFlag)
					{
						self.stop().animate({ opacity: 1 }, 250);
					}
				}, self[0].gracePeriodMs);
			}
		);

		secondStateImage.hover
		(
			function ()
			{
				secondStateImage.fadeOutFlag = false;
				secondStateImage.stop().animate({ opacity: 1 }, 250);
			},
			function ()
			{
				secondStateImage.fadeOutFlag = true;
				window.setTimeout(function ()
				{
					if (secondStateImage.fadeOutFlag)
					{
						secondStateImage.stop().animate({ opacity: 0 }, 250);
					}
				}, secondStateImage[0].initialStateImage[0].gracePeriodMs);
			}
		);

		secondStateImage.fadeTo(1, 0);
	});
};