﻿// The Blend plugin creates a progressive enhancement for CSS background sprites. 
// The plugin adds additional spans and styles them according to the target element's background image and crossfades between an inactive and active state.
// Disabled for FF2 Users due to the background-position property bug
(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;
        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('fade').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 = 400;
    $.fn.blend.callback = null;
} (jQuery, this));
// End of Blend plugin.

