// Setup Variables:
var foreClass = 'fadeImage';
var backClass = 'fadeImageBG';
var overSuffix = '-over';
var hoverImageClass = 'imgHover';
var hoverBGImageClass  = 'imgHoverBG';
var animationSpeed = 300;
var findBackgrounds = true;

$(document).ready(function() {
    
    var obj;
    var theSource;
    var hoverSource;
    var originalWidth;
    var originalHeight;
    var findPos;
    var fileName;
    var fileExt;
    
    $(document).find('.' + foreClass).each(function() {
        // Find the object and its source. First, see if it  is an image:
        if ($(this).is('img')) {
             var obj = $(this);
        } else {
             obj = $(this).find('img');
        }
        theSource = $(obj).attr('src');
        
        // Get the width / height of original image:
        originalWidth  = $(obj).width();
        originalHeight  = $(obj).height();
        
        // Replace the source with the "hover" suffix:
        findPos  = theSource.lastIndexOf('.');
        
        //  Background Image filename sans extension:
        fileName  = theSource.substring(0,findPos);
        
        //  Background Image Extension only:
         fileExt = theSource.substring(findPos);
        
        // Assemble the new Image filename:
        hoverSource  = fileName + overSuffix + fileExt;
        
        // Wrap the existing image with a new DIV...:
        $(obj).wrap('<div style="position:relative; width:' + originalWidth  + 'px;  height:' + originalHeight +  'px;"></div>');
        
        // ...And insert the hidden "hover" image:
        $(obj).after('<img src="' + hoverSource +  '" style="display:none;  position:absolute; top:0; left:0; z-index:50;" class="' + hoverImageClass + '" />');
        obj.parents(".fadeImage:eq(0)").click(function(){window.location.href=$(this).find("a:first").attr("href");});
        obj.parents(".fadeImage:eq(0)").find("a:first").css("cursor","pointer");
    });
    
    $('.' + foreClass).hover(function() {
        $(this).find('img.imgHover').fadeIn(animationSpeed);
    }, function() {
        $(this).find('img.imgHover').stop(true, true).fadeOut(animationSpeed);
    });
    
    var originalBGImage;
    var findLastSlash;
    var findLastPeren;
    var findLastQuote;
    // Now do the same with Backgrounds:
    if (findBackgrounds) {
        var originContent;
        var newHtml = '';
        $(document).find('.' + backClass).each(function() {
             obj = $(this);
            theSource  = obj.css('background-image');            
             
            // Get the width / height of original image:
            originalWidth  = obj.width();
            originalHeight  = obj.height();
            
             // Replace the source with the  "hover" suffix:
            findLastSlash =  theSource.lastIndexOf('/') + 1;
            findLastPeren  = theSource.lastIndexOf(')');
            findLastQuote =  theSource.lastIndexOf('"');
            //alert(findLastQuote);
            
             if(findLastQuote  > -1) {
                 originalBGImage = theSource.substring(findLastSlash,findLastQuote);
            } else {
                originalBGImage = theSource.substring(findLastSlash,findLastPeren);
            }
            
             findPos = originalBGImage.lastIndexOf('.');
            
             // Background Image filename sans  extension:
            fileName = originalBGImage.substring(0,findPos);
            
             // Background Image Extension  only:
            fileExt = originalBGImage.substring(findPos);
            
             // Assemble the new Image  filename:
            hoverSource = fileName + overSuffix + fileExt;
            
             // If the current object is an  anchor, do this:
            if (obj.is('a')) {
                obj.wrap('<div style="position:relative; width:' + originalWidth  + 'px;  height:' + originalHeight +  'px; background:url(' + originalBGImage  + ');"></div>');
                obj.css({'position':'absolute','display':'block','z-index':'20', 'background':'transparent'});
                 obj.parent().append('<div  class="' + hoverBGImageClass +  '" style="position:absolute; top:0;  left:0; z-index:10; width:' + originalWidth +  'px; height:' + originalHeight  + 'px;  display:none; background:url(' + hoverSource +  ');"></div>');
            } else {
            // else,  do this:
                $(obj).append('<div  class="' + hoverBGImageClass +  '" style="width:' + originalWidth  + 'px;  height:' + originalHeight +  'px; display:none; background:url(' + hoverSource  + ');"></div>');
            
             }
            
         });
        
        $('.' + backClass).hover(function() {
             $(this).parent().find('.' + hoverBGImageClass).fadeIn(animationSpeed);
        }, function() {
            $(this).parent().find('.' + hoverBGImageClass).fadeOut(animationSpeed);
        });
        
    }
    
});