// 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, easing, 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 || (typeof easing=='function'?easing:0) || $.fn.blend.callback;
		easing = (easing && typeof easing!='function'?easing:0) || $.fn.blend.easing;

		// 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
		// effect already applied bug fixed
		if ($this[0] && !$this.find('> .jQblend').length && !($.browser.mozilla && parseFloat($.browser.version) < 1.9)) {
			
			$this.each(function () {
				
				var base = this,
				$base = $(base),
				i,
				style = $.extend({},base.currentStyle || window.getComputedStyle(base, null)),
				styleHover,
				layer = '<span class="jQblend" style="position:absolute;top:0;left:0;display:block"/>',
				$content = $(layer),
				$nonHover = $(layer),
				$hover = $(layer);
				
				if (base.style.position !== 'absolute') {
					base.style.position = 'relative';
				}

				for (i = 0; properties[i]; i += 1) {
					if (style[properties[i]]) {
						$nonHover[0].style[properties[i]] = $content[0].style[properties[i]] = style[properties[i]];
					}
				}

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

				// hover patch
				$base.addClass('hover');
				hoverStyle=$.extend({},base.currentStyle || window.getComputedStyle(base, null));
				$base.removeClass('hover').css(background,'none');

				for(i=0;i<properties.length;i++)
					if(hoverStyle[properties[i]])$hover.css(properties[i],hoverStyle[properties[i]]);
				$hover.css('opacity',0);

				$base.wrapInner($content).prepend($hover).prepend($nonHover);

				$base.bind('mouseenter mouseleave', function (e) {
					if (e.type === 'mouseenter') {
						// easing patch
						$nonHover.stop().fadeTo(speed, 0, easing, function () {
							if (callback && typeof(callback) === 'function') {
								callback();
							}
						});
						$hover.stop().fadeTo(speed,1, easing);
					} else {
						$nonHover.stop().fadeTo(speed, 1, easing);
						$hover.stop().fadeTo(speed,0, easing);
					}
				});
			});
		}
		
		return $this;
	};
	
	$.fn.blend.speed = 400;
	$.fn.blend.callback = null;
	// easing patch
	$.fn.blend.easing='linear';

}(jQuery, this));