﻿
$.rollaHover = function(settings) {
    //overrideable defaults
    settings = jQuery.extend({
        onFade: 'fast',
        outFade: 'fast',
        mainOpacity: "1",
        css: 'rolla'
    }, settings);

    // Recognize msie6
    $.browser.msie6 = $.browser.msie && /MSIE 6\.0/i.test(window.navigator.userAgent) && !/MSIE 7\.0/i.test(window.navigator.userAgent);

    // Define Short Vars
    var cssClass = settings.css;

    $("." + cssClass).each(function() {
        $(this).css("position", "relative");
        //var theImage = $(this).css("backgroundImage").replace(/url|[\(\)]/g, '').replace(/\.jpg$/, '-on.jpg');
        var theImage = $(this).css("backgroundImage").replace(/url|[\(\)]/g, '');
        var theWidth = $(this).css("width");
        var theHeight = $(this).css("height");
        // alert('h: ' + onHeight + ", w: " + onWidth);
        $(this).prepend('<div style="display: block; width: ' + theWidth + '; height: ' + theHeight +
            '; position: absolute; top: 0px; left: 0px; background-image: url(' + theImage + '); z-index: 1;" ></div>');
        $(this).find("a").css("position", "absolute");
        $(this).find("a").css("top", "0px");
        $(this).find("a").css("left", "0px");
        $(this).find("a").css("z-index", "2");
    });

    if ($.browser.msie6) {
        $("." + cssClass + " a").hover(function() {

            if ($(this).parent().find("div").css("backgroundImage").indexOf("-on#hover") == -1) {
                var newSrc = $(this).parent().find("div").css("backgroundImage").replace(".jpg", "-on.jpg#hover");
                $(this).parent().find("div").css("backgroundImage", newSrc);
            }
        }, function() {
            if ($(this).parent().find("div").css("backgroundImage").indexOf("-on.jpg#hover") != -1) {
                var oldSrc = $(this).parent().find("div").css("backgroundImage").replace("-on.jpg#hover", ".jpg");
                $(this).parent().find("div").css("backgroundImage", oldSrc);
            }
        });
    } else {
        // All Other Browsers -> with Animation
        $("." + cssClass + " a").bind("mouseenter", function() {

            var newSrc = $(this).parent().find("div").css("backgroundImage");
            if (!newSrc.match(/-on\.jpg\)$/)) {
                newSrc = newSrc.replace(/\.jpg\)$/, '-on.jpg)');
            }
            $(this).parent().find("div").css("backgroundImage", newSrc).css("opacity", "0").stop().animate({ opacity: settings.mainOpacity }, settings.onFade);
        }).bind("mouseleave", function() {
            var oldSrc = $(this).parent().find("div").css("backgroundImage").replace(/-on\.jpg\)$/, '.jpg)');
            $(this).parent().find("div").stop().animate({ opacity: 0 }, settings.outFade, function() {
                $(this).parent().find("div").css("backgroundImage", oldSrc);

                // dequeue for flickering debug (when mouse too fast)
                $(this).dequeue();
            });
        });
    }
    /*
    // Get all a Elements and set Backgrounds
    var arr_a = jQuery.makeArray(document.getElementsByTagName("a"));
    // Set First Image as Background in List Element (no Flickering) and set a to Block Element
    $(arr_a).each(function(k) {

        var imageName = arr_a[k].innerHTML.toString().replace(/^([^ ]*) (.*)$/, '$1');
    var display = arr_a[k].innerHTML.toString().replace(/^([^ ]*) (.*)$/, '$2');

        $("." + cssClass + ":contains(" + arr_a[k].innerHTML + ")").css("background-image", "url(" + imagepath + imageName + ".jpg)");
    $("." + cssClass + ":contains(" + arr_a[k].innerHTML + ")").css("background-repeat", "no-repeat");
    $("." + cssClass + ":contains(" + arr_a[k].innerHTML + ")").css("display", "block");

        // get Items from image folder from Linktext
    $("a." + cssClass + ":contains(" + arr_a[k].innerHTML + ")").html('<img src="' + imagepath + imageName + '.jpg" title="' + display + '" alt="' + display + '" class="' + cssClass + '">');
    });

    // Jquery IE6 Hide Bug -> Flickering -> No Animation Block
    if ($.browser.msie6) {
    $(imgClass).hover(
    function() {
    if ($(this).attr("src").indexOf("-on#hover") == -1) {
    var newSrc = $(this).attr("src").replace(".jpg", "-on.jpg#hover");
    $(this).attr("src", newSrc);
    }
    }, function() {
    if ($(this).attr("src").indexOf("-on.jpg#hover") != -1) {
    var oldSrc = $(this).attr("src").replace("-on.jpg#hover", ".jpg");
    $(this).attr("src", oldSrc);
    }
    });
    } else {
    // All Other Browsers -> with Animation
    $(imgClass).bind("mouseenter", function() {
    var newSrc = $(this).attr("src").replace(/\.jpg$/, '-on.jpg');
    $(this).attr("src", newSrc).css("opacity", "0").animate({ opacity: settings.mainOpacity }, settings.onFade);

        }).bind("mouseleave", function() {
    var oldSrc = $(this).attr("src").replace(/-on\.jpg$/, '.jpg');
    $(this).animate({ opacity: 0 }, settings.outFade, function() {
    $(this).attr("src", oldSrc);

                // dequeue for flickering debug (when mouse too fast)
    $(imgClass).dequeue();
    });
    });
    }
    */
}