;(function(namespace, $, undefined){
    
    var InfoButton = function(buttonContent, overlayContent, openCallback, closeCallback) {
        
        var self = this;
                
        this.buttonContent = buttonContent;
        this.overlayContent = overlayContent;
        
        var button = $("<div/>", {
            "class": "infoButton",
            click: function() {
                
                if (!self.isOverlayVisible) {
                    self.showOverlay(openCallback);
                }
                
            }
        });
        
        var closeButton = $("<div/>", {
            "class": "close",
            css: {
                position: "fixed",
                left: (($(window).width() - 579) / 2) + 579 + 5 - 60,
                top: ($(window).height() - 421) / 2 + 60
            },
            click: function() {
                if(self.isOverlayVisible) {
                    self.hideOverlay(closeCallback);
                }
            }
        });
        
        var overlay = $("<div/>", {
            "class": "infoOverlay",
            css: {
                position: "fixed",
                left: ($(window).width() - 579) / 2,
                top: ($(window).height() - 421) / 2,
                display: "none",
                zIndex: 1000
            },
            data: { olddisplay: "block"}
        });
        
        var overlayContentWrapper = $("<div/>", {
            "class": "content"
        });

        var overlayBg = $("<div/>", {
            "class": "bg",
            css: {
                width: "100%",
                height: "100%"
            }
        });
        
        this.ui = {};
        this.ui.button = button;
        this.ui.overlay = overlay;
        this.ui.overlayContentWrapper = overlayContentWrapper;
        this.ui.closeButton = closeButton;
        overlayContentWrapper.text(this.overlayContent);
        overlay.append(overlayContentWrapper, overlayBg, closeButton);
        this.ui.html = $("<div/>").append(button, overlay).children();
        this.isOverlayVisible = false;
        this.updateUI();
        var _this = this;
        $(window).resize($.throttle(50, function(){
            _this.updateUI();
        }));
    };
    
    InfoButton.prototype = {
        
        showOverlay: function(callback) {
            
            this.ui.overlay.stop(true, true).fadeIn(function(){
                callback && callback();
            });
            this.isOverlayVisible = true;
            
        },
        
        hideOverlay: function(callback) {
            
            this.ui.overlay.stop(true, true).fadeOut(function(){
                callback && callback();
            });
            this.isOverlayVisible = false;
            
        },
        
        updateUI: function() {
            
            this.ui.button.html(this.buttonContent);
            this.ui.overlay.css({
                "left": ($(window).width() - 579) / 2,
                "top": ($(window).height() - 421) / 2
            });
            this.ui.closeButton.css({
                "left":(($(window).width() - 579) / 2) + 579 + 5 - 60,
                "top":($(window).height() - 421) / 2 + 60
            });
            this.ui.overlayContentWrapper.text(this.overlayContent);
            
        }
        
    };
    
    // Add Class to Application Scope.
    namespace.InfoButton = InfoButton;
    
})(this.B, jQuery);