// 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.show(); },
                function () { overlay.hide(); }
                );
            
        });
    };
    
    $.fn.imgoverlaytitle.defaults = {
        vertical_align : "bottom",
        overlay_class : "img_overlay"
    };
    
})(jQuery);