/*
Plugin Fade RollOver
Sebastián Dominguez
v 1.0
---------------------------
---------------------------
Desc: El plugin a partir de un elemento con una imagen (la cual debe ser el doble de alto
y tener en su mitad inferior la imagen que se quiere mostrar en el rollover) de fondo,
general un rollover con efecto fade.
---------------------------
---------------------------
*/
(function($) {
    $.fn.fadeRollOver = function(options) {
        var settings = {
            fadeOutSpeed: 200,
            fadeInSpeed: 200,
            element: "<span />",
            elementClass: "rollOver",
            hideText: true,
            hoverBgLeftPos: null,
            hoverBgTopPos: null,
            containerClass: "containerRollOver",
            onFadeOut: function() { },
            onFadeIn: function() { }
        };

        var options = $.extend(settings, options);
		
		var getBackgroundPosition = function(obj) {
			var pos = obj.css("background-position");
			if (pos == 'undefined' || pos == null) {
				pos = [obj.css("background-position-x"),obj.css("background-position-y")];//i hate IE!!
			} else {
				pos = pos.split(" ");
			}
			return {
				x: parseFloat(pos[0]),
				xUnit: pos[0].replace(/[0-9-.]/g, ""),
				y: parseFloat(pos[1]),
				yUnit: pos[1].replace(/[0-9-.]/g, "")
			};
		}
		
        return this.each(function() {
            var obj = $(this);
            obj.each(function() {
                var elemento = $(settings.element).addClass(settings.elementClass);
                $(this).addClass(settings.containerClass).prepend(elemento);
                $(this).css({
                    "position": "relative"
                });
                if (settings.hideText == true) {
                    $(this).css({
                        "text-indent": "-5000%",
                        "display": "block"
                    });
                } else {
                    var text = $(this).text();
                    $(this).contents().filter(function() { return this.nodeType === 3 }).remove();
                    var elementoTexto = $("<span></span>");
                    $(this).append(elementoTexto);
                    elementoTexto.text(text);
                    elementoTexto.css({
                        "position":"absolute"
                    });
                }
                var objImage = $(this).css('background-image');
                var objHeight = $(this).height();
                var objWidth = $(this).width();
                if (!settings.hoverBgLeftPos) {
                    //settings.hoverBgLeftPos = 0;
					settings.hoverBgLeftPos = getBackgroundPosition(obj).x;
					settings.hoverBgLeftPos = getBackgroundPosition(obj).x;
                }
                if (!settings.hoverBgTopPos) {
                    settings.hoverBgTopPos = $(this).outerHeight();
                }
                elemento.css({
                    'background-image': objImage,
                    'background-position': '' + settings.hoverBgLeftPos + 'px -' + settings.hoverBgTopPos + 'px',
                    'opacity': 0,
                    'height': objHeight,
                    'width': objWidth,
                    'display': "block",
                    'left': 0,
                    'cursor': "pointer",
                    'position': 'absolute',
                    'top': 0
                });
                elemento.hover(
				    function() {
				        $(this).stop().animate({
				            "opacity": "1"
				        }, settings.fadeInSpeed, settings.onFadeIn);
				    },
				    function() {
				        $(this).stop().animate({
				            "opacity": "0"
				        }, settings.fadeOutSpeed, settings.onFadeOut);
				    }
			    );
            });

        });
    };
})(jQuery);