(function(root, $, undefined){
    
    var Screen = function(image, originalSize, hotspots, active, callback) {

        this.isActive = !!active;
        this.imageUrl = image + ($.browser.msie ? "?" + Math.random() : "");
        this.hotspots = hotspots;
        this.originalSize = originalSize;
        this.$ = $(this);
        
        var _this = this;
        
        this.$.bind("hotspotOverlayShow", function(){
            
            var i = -1;
            var hotspots = _this.hotspots;
            var len = hotspots.length;
            
            while(++i < len) {
                hotspots[i] !== this && hotspots[i].hide();
            }
            
        });
        
        this.$.bind("hotspotOverlayHide", function(){
            
            var i = -1;
            var hotspots = _this.hotspots;
            var len = hotspots.length;
            
            while(++i < len) {
                hotspots[i] !== this && hotspots[i].show(true);
            }
            
        });
        
        this._createHTML(callback);
        
    };
    
    Screen.prototype = {
        
        updateHTML: function(){
            this._createHTML();
        },
        
        _createHTML: function(callback) {
            
            var self = this;
            
            var container = $("<div/>", {
                "class": "screenContainer",
                css: {
                    display: self.isActive ? "block" : "none"
                }
            });
            
            this.image = new B.ScalingImage(this.imageUrl, this.originalSize, function(){
            	callback && callback();
            });
            
            var _this = this;
            
            $(window).resize($.throttle(50, function(){
                _this.image.scale && _this.image.scale();
                _this._arrangeHotspots();
               
            }));
            
            container.append(this.image.html);
            
            var i = -1;
            var len = (this.hotspots && this.hotspots.length) || 0;
            
            while (++i < len) {
                container.append(this.hotspots[i].html);
            }
            
            this.html = container;
            
            if(!this.isActive) this.hide();
            
        },
        
        hide: function() {
            var self = this;
            this.html.stop(true, true).animate({"opacity": "0"}, 300, function() {
                $(this).css({
                    display:"none"
                });
            });
            var i = -1;
            var len = this.hotspots && this.hotspots.length;
            while(++i < len) {
                this.hotspots[i].completeHide();
            }
            this.image.html.fadeOut();
            this.image.isActive = false;
            this.isActive = false;
        },
        
        show: function() {
            this.isActive = true;
            this.image.isActive = true;
            this.image.html.fadeIn();
            this.image.scale();
            var i = -1;
            var len = this.hotspots && this.hotspots.length;
            while(++i < len) {
                this.hotspots[i].hideOverlay();
            }
            this.html.stop(true, true).css({display:"block"});
            $(window).trigger("resize");
            this.html.stop(true, true).animate({opacity: 1}, 800);
        },
        
        _arrangeHotspots: function(){
            
            if(!this.isActive) return;
            
            var originalWidth = this.image.getNaturalWidth();
            var actualWidth = parseInt(this.image.html.css("width"), 10);
            
            var leftPercentage = actualWidth / originalWidth;
            
            var originalHeight = this.image.getNaturalHeight();
            var actualHeight = parseInt(this.image.html.css("height"), 10);
            
            var topPercentage = actualHeight / originalHeight;
            
            var i = -1;
            var length = this.hotspots.length;
            
            var oldLeft, newLeft, oldTop, newTop;
            
            while (++i < length) {
                
                oldLeft = this.hotspots[i].position.x;
                oldTop = this.hotspots[i].position.y;

                newLeft = parseInt((parseInt(oldLeft, 10) * leftPercentage), 10) + "px";
                newTop =  parseInt((parseInt(oldTop,  10) * topPercentage),  10) + "px";

                this.hotspots[i].html.css({
                    left: newLeft,
                    top: newTop
                });
                
            }
            
        }
        
    };
    
    Screen.enums = {};
    
    // Add Class to Application Scope.
    root.B.Screen = Screen;
    
})(this, jQuery);