/**
 * This is a custom jQuery plugin to create an overlay with a backdrop. You can set the backdrop's color, by defining a #overlay_back drop css style.
 */
(function($) {
    $.fn.showOverlay = function() {
        if($('#overlay_backdrop').size() == 0){
            $('<div id="overlay_backdrop" class="modal" style="display:none;position:absolute;">&nbsp;</div>').appendTo('body');
        }

        var $overlay = $('#overlay_backdrop');
        $overlay.css({
            position: 'absolute',
            height: '100%', width: '100%',
            top: 0, bottom: 0, left: 0, right: 0,
            zIndex: 1000, opacity: 0, display: 'block', background: '#333'
        });

        $(window).scroll(function (){
            $('.modal').center();
        });

        return this.each(function(index) {
            if (index == 0) {
                var $this = $(this);
                $this.hide();
                $this.css({zIndex: 9999, position:'absolute', display:'block'});
                $this.center();
                $this.addClass('modal');

                $overlay.height($(document).height()).width($(document).width() + (document.all ? -20 : 0 ));                
                $overlay.fadeTo("fast", 0.5);
                $this.fadeIn();
            }
        });
    };

    $.fn.hideOverlay = function(){
        $('#overlay_backdrop').fadeOut('fast');

        return this.each(function(index) {
            if (index == 0) {
                var $this = $(this);
                $this.fadeOut('fast');
                $this.removeClass('modal');
            }
        });
    };

})(jQuery);