// Blend 2.1 for jQuery 1.3+

// Copyright (c) 2010 Jack Moore - jack@colorpowered.com

// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php



// Blend creates a 2nd layer on top of the selected element.

// This layer is faded in and out to create the effect.  The orignal, bottom layer

// has it's class set to 'hover' and remains that way for the duration to

// keep the CSS :hover state from being apparent when the object is moused-over.

(function ($, window) {



    $.fn.blend = function (speed, callback) {

		var $this = this,

		background = 'background',

		padding = 'padding',

		properties = [

		    background + 'Color',

		    background + 'Image',

		    background + 'Repeat',

		    background + 'Attachment',

		    background + 'Position', // Standards browsers

		    background + 'PositionX', // IE only

		    background + 'PositionY', // IE only

			padding + 'Top',

			padding + 'Left',

			padding + 'Right',

			padding + 'Bottom',

			'width',

			'height'

		];

		

		speed = parseInt(speed, 10) || $.fn.blend.speed;

		callback = callback || $.fn.blend.callback;

		

		// 1. Check to see if the jQuery object contains elements.

		// 2. Check to see if the effect has already been applied

		// 3. Check to see that the visitor is not using FireFox 2

		// or lower due to a bug that does not allow JavaScript to retrieve the CSS background position.

		// More info: https://bugzilla.mozilla.org/show_bug.cgi?id=316981

		if ($this[0] && !$this.find('.jsblend')[0] && !($.browser.mozilla && parseFloat($.browser.version) < 1.9)) {

			

			$this.each(function () {

				

				var base = this,

				i,

				style = base.currentStyle || window.getComputedStyle(base, null),

				layer = '<span style="position:absolute;top:0;left:0;display:block"/>',

				$content = $(layer),

				$hover = $(layer);

				

				if (base.style.position !== 'absolute') {

					base.style.position = 'relative';

				}

				

				for (i = 0; properties[i]; i += 1) {

					if (style[properties[i]]) {

						$hover[0].style[properties[i]] = $content[0].style[properties[i]] = style[properties[i]];

					}

				}

				

				$content[0].style.backgroundImage = $content[0].style.backgroundColor = '';

				

				$(base).wrapInner($content).addClass('hover').prepend($hover);

				

				$(base).bind('mouseenter mouseleave', function (e) {

					if (e.type === 'mouseenter') {

						$hover.stop().fadeTo(speed, 0, function () {

							if (callback && typeof(callback) === 'function') {

								callback();

							}

						});

					} else {

						$hover.stop().fadeTo(speed, 1);

					}

				});

			});

		}

		

		return $this;

	};

	

	$.fn.blend.speed = 300;

	$.fn.blend.callback = null;

	

}(jQuery, this));