// imgoverlaytitle.jquery.js
// Juri Glass
 
(function($){
 
    $.fn.imgoverlaytitle = function(options) {
 
        var opts = $.extend($.fn.imgoverlaytitle.defaults, options);
 
        return this.each(function() {
            var $this = $(this);
 
            // Creating the overlay
            var overlay = $('<div class="' + opts.overlay_class + '">' 
 
                // The text from the alt attribute                
                //+ $this.attr('alt') 
                + '</div>');
 
            // Creating a replacement div with the image as background
            // and the image dimensions.
            var replacement = $('<div/>')
                .css('background-image', 'url(' + $this.attr('src') + ')')
                .css("height", $this.attr("height"))
                .css("width", $this.attr("width"))
 
                // The position of the overlay
                .css("display", "table-cell")
                .css("vertical-align", opts.vertical_align)
 
                // The insertion of the overlay
                .html(overlay)
 
            // The actual replacement
            $this.replaceWith(replacement);
 
            // Enable the mouseover
            replacement.hover(
                function () { overlay.fadeIn(200); },
                function () { overlay.fadeOut(200); }
                );
 
        });
    };
 
    $.fn.imgoverlaytitle.defaults = {
        vertical_align : "bottom",
        //overlay_class : "img_overlay"
        overlay_class : "pinkOverlay"
    };
 
})(jQuery);