new Class('ModalOverlay').With({

    __construct: function($content)
    {
        var self = this;
        
        self.enabled = true;
        self.$content = $content;
                
        var $overlays = $('.ModalOverlays');
        if ($overlays.length == 0) {
            var $overlays = $('<div class="ModalOverlays"></div>').prependTo('body');
        }
        
        self.$overlay = $('<div class="ModalOverlay"></div>').appendTo($overlays);
        self.$north = $('<div class="ModalOverlay_north"></div>').appendTo(self.$overlay);
        self.$northEast = $('<div class="ModalOverlay_northEast"></div>').appendTo(self.$overlay);
        self.$east = $('<div class="ModalOverlay_east"></div>').appendTo(self.$overlay);
        self.$southEast = $('<div class="ModalOverlay_southEast"></div>').appendTo(self.$overlay);
        self.$south = $('<div class="ModalOverlay_south"></div>').appendTo(self.$overlay);
        self.$southWest = $('<div class="ModalOverlay_southWest"></div>').appendTo(self.$overlay);
        self.$west = $('<div class="ModalOverlay_west"></div>').appendTo(self.$overlay);
        self.$northWest = $('<div class="ModalOverlay_northWest"></div>').appendTo(self.$overlay);
        
        // Also update the live selection sized on resize
        $(window).bind('resize', function() {
            self.refreshDisplay();
        });
        
        // Refreshing on scroll? What trickery is going on here
        // Trying out going to position fixed to solve some nasty x-browser issues
        $(window).bind('scroll', function() {
            self.refreshDisplay();
        });
        
        // Click handler
        self.$overlay.click(function() {
            $(self).trigger('click');
        });
    },
    
    setContent: function($content)
    {
        var self = this;
        self.$content = $content;
        self.refreshDisplay();
    },
    
    /**
     * Show the modal overlay
     */
    show: function()
    {
        var self = this;
        if (!self.enabled) { return; }
        
        self.$overlay.addClass('ModalOverlay_visible');
        self.refreshDisplay(true);
    },
    
    hide: function()
    {
        var self = this;
        self.$overlay.removeClass('ModalOverlay_visible');
    },
    
    destroy: function()
    {
        var self = this;
        clearTimeout(self.refreshTimeout);
        self.$overlay.remove();
    },
    
    refreshDisplay: function(scheduleNextRefresh)
    {
        var self = this;
        
        // We only want to do a recompute if this thing is visible
        if (!self.$overlay.hasClass('ModalOverlay_visible')) {
            return;
        }

        if (scheduleNextRefresh) {
            // Make sure we only ever have 1 thread of timeouts running
            if (self.refreshTimeout) {
                clearTimeout(self.refreshTimeout);
            }
            // Schedule the next refresh
            self.refreshTimeout = setTimeout(function() {
                self.refreshDisplay(true);
            }, 300);
        }
        
        // Grab the dimension information
        self.windowWidth = $(window).width();
        self.windowHeight = $(window).height();
        
        self.documentWidth = $(document).width();
        self.documentHeight = $(document).height();
        
        self.windowScrollTop = parseInt($(window).scrollTop());
        self.windowScrollLeft = parseInt($(window).scrollLeft());
                
        var offset = self.$content.offset();
        self.left = parseInt(offset.left);
        self.top = parseInt(offset.top);
        self.width = parseInt(self.$content.width());
        self.height = parseInt(self.$content.height());
        
        // Refresh the components with this new info
        self.refreshNorth();
        self.refreshNorthEast();
        self.refreshEast();
        self.refreshSouthEast();
        self.refreshSouth();
        self.refreshSouthWest();
        self.refreshWest();
        self.refreshNorthWest();
    },
    
    refreshNorth: function()
    {
        var self = this;
        self.$north
            .css('width', self.width)
            .css('height', self.top - 2)
            
            .css('top', 0 - self.windowScrollTop)
            .css('left', self.left - self.windowScrollLeft);

    },
    
    refreshNorthEast: function()
    {
        var self = this;
        self.$northEast
            .css('width', self.documentWidth - self.width - self.left)
            .css('height', self.top)
            
            .css('top', 0 - self.windowScrollTop)
            .css('left', self.left + self.width - self.windowScrollLeft);

    },
    
    refreshEast: function()
    {
        var self = this;
        self.$east
            .css('width', self.documentWidth - self.width - self.left - 2)
            .css('height', self.height)
            
            .css('top', self.top - self.windowScrollTop)
            .css('left', self.left + self.width - self.windowScrollLeft);

    },
    
    refreshSouthEast: function()
    {
        var self = this;
        self.$southEast
            .css('width', self.documentWidth - self.width - self.left)
            .css('height', self.documentHeight - self.height - self.top)
            
            .css('top', self.top + self.height - self.windowScrollTop)
            .css('left', self.left + self.width - self.windowScrollLeft);

    },
    
    refreshSouth: function()
    {
        var self = this;
        self.$south
            .css('width', self.width)
            .css('height', self.documentHeight - self.height - self.top - 2)
        
            .css('top', self.top + self.height - self.windowScrollTop)
            .css('left', self.left - self.windowScrollLeft);

    },
    
    refreshSouthWest: function()
    {
        var self = this;
        self.$southWest
            .css('width', self.left)
            .css('height', self.documentHeight - self.height - self.top)
            
            .css('top', self.top + self.height - self.windowScrollTop)
            .css('left', 0 - self.windowScrollLeft);

    },
    
    refreshWest: function()
    {
        var self = this;
        self.$west
            .css('width', self.left - 2)
            .css('height', self.height)
            
            .css('top', self.top - self.windowScrollTop)
            .css('left', 0 - self.windowScrollLeft);
    },
    
    refreshNorthWest: function()
    {
        var self = this;
        self.$northWest
            .css('width', self.left)
            .css('height', self.top)
            
            .css('top', 0 - self.windowScrollTop)
            .css('left', 0 - self.windowScrollLeft);
    },
    
    disable: function() 
    {
        var self = this;
        self.hide();
        self.enabled = false;
    },
    
    enable: function()
    {
        var self = this;
        self.enabled = true;
    }
});