(function($){
    
    $.overlay = function(options){
        //	extend default options
        var settings = $.extend({ color: '#000', opacity: .5 }, options);
        var div = $('<div></div>');
        
        var width = $(document).width() + 'px';
        
        var height = $(document).height() + 'px';
        
        div.css({
            'position': 'absolute',
            'z-index': -100,
            'left': 0,
            'top': 0,
            'background-color': settings.color,
            'opacity': settings.opacity
        }).
            width(width).
            height(height).		
            appendTo('body');
        
        div.css({
            'z-index': 100
        });

        return div;
    };

    $.extend($.fn, {
        popup: function(options){
            return this.each(function(){
                if($(this).data('popup')){
                    var popup = $(this).data('popup');
                        $.extend(true, popup.settings, options);
                }else $(this).data('popup', new Popup(this, options));
            });
        }
    });
    
    Popup = function(elem, options){
        this.elem = $(elem);
        this.settings = $.extend(true, {
            width: '400px',
            height: '300px',
            container: 'body'
        }, options);
        
        this.table = $('<div class="popup"><table border="0" align="center" cellpadding="0" cellspacing="0">\
              <tr>\
               <td class="top_left_img"></td>\
               <td width="100%" class="top_center_img"></td>\
               <td class="top_right_img"></td>\
              </tr>\
              <tr height="33">\
               <td class="left_spacer_decorator"><span class="spacer_i"></span></td>\
               <td class="center_spacer_decorator"><div class="popup-title">\
                   '+'<font id="'+this.elem.attr('id')+'_title">'+this.elem.attr('title')+'</font> \
               <a href="#" class="popup-close"></a></div></td>\
               <td class="right_spacer_decorator"><span class="spacer_i"></span></td>\
              </tr>\
              <tr>\
               <td class="left_content_spacer"><span class="spacer_i"></span></td>\
               <td class="center_content_spacer"><div class="popup-content">\
               </div></td>\
               <td class="right_content_spacer"><span class="spacer_i"></span></td>\
              </tr>\
              <tr>\
               <td class="bottom_left_img"></td>\
               <td class="bottom_center_img"></td>\
               <td class="bottom_right_img"></td>\
              </tr>\
            </table></div>').appendTo('body');
            this.div = this.table.find('.popup-content').append(this.elem).css('height', this.settings.height);
            this.table.children('table').css({
                width: this.settings.width
            });
            this.closeButton = this.table.find('.popup-close').data('popup', this).click(function(){
                $(this).data('popup').close();
                return false;
            });
    };
    
    $.extend(Popup.prototype, {
        open: function(){
            this.table.fadeIn();
            this.center();
            this.overlay = $.overlay({opacity: .3});
            var popup = this;
            $(window).bind('scroll', function(){
                popup.center();
            });
            $(window).bind('resize.popup', function(){
                popup.center();
            });
            this.table.find('.popup-close-button').click(function(){
                popup.close();
                return false;
            });
        },
        
        close: function(){
        	if(this != null){
        		this.table.fadeOut();
        		if(this.overlay != null)
        			this.overlay.remove();
                $(window).unbind('scroll.popup');
                $(window).unbind('resize.popup');
        	}
        },
        
        center: function(){
            var el = this.table,
                win = $(window),
                doc = $(document);
            
            el.css({
                top: Math.round(win.height()/2 + doc.scrollTop() - el.height()/2) + 'px',
                left: Math.round(win.width()/2 + doc.scrollLeft() - el.width()/2) + 'px'
            });
        }
    });
    
})(jQuery);