// Atlantis Website Runtime
var Awr = Awr || {};

(function() {
    
    /* FlexibleRoot */
    
    Awr.FlexibleRoot = function(element, options)
    {
        if (!element) return null;
        element = $(element);
        
        this.element        = element;
        this.minWidth       = options.minWidth || 0;
        this.maxWidth       = options.maxWidth || Number.MAX_VALUE;
        this.widthDeduction = parseInt($(document.body).getStyle('margin-right'))
                            + parseInt($(document.body).getStyle('margin-left'))
                            + parseInt(element.getStyle('padding-right'))
                            + parseInt(element.getStyle('padding-left')) + 15;
        
        element.setStyle({
            marginRight: 'auto',
            marginLeft:  'auto'
        });
        
        this.updateElementWidth();
        Event.observe(window, 'resize', this.updateElementWidth.bindAsEventListener(this));
        
        // Restore what we done in the preflight script just after the interpreter becomes idle.
        (function() {
            this.element.setStyle({
                visibility: 'visible'
            });
            document.body.setStyle({
                overflow: 'auto'
            });
        }).bind(this).defer();
    };
    
    Object.extend(Awr.FlexibleRoot.prototype,
    {
        updateElementWidth: function()
        {
            // Determine the width of viewport without scrollbar.
            document.body.setStyle({
                overflow: 'hidden'
            });
            var viewportWidth = document.viewport.getWidth();
            document.body.setStyle({
                overflow: 'auto'
            });
            
            var targetWidth = viewportWidth;
            if (targetWidth > this.maxWidth) {
                targetWidth = this.maxWidth;
            } else if (targetWidth < this.minWidth) {
                targetWidth = this.minWidth;
            }
            this.element.setStyle({
                width: targetWidth - this.widthDeduction + 'px'
            });
        }
    });
    
    /* FlexibleColumn */

    Awr.FlexibleColumn = function(element, options)
    {
        if (!element) return null;
        element = $(element);
        
        this.element        = element;
        this.columnElements = element.select('.column');
        this.numColumns     = this.columnElements.length;
        this.spacing        = options.spacing || 0;
        this.widthDeduction = parseInt($(element.up()).getStyle('padding-right'))
                            + parseInt($(element.up()).getStyle('padding-left'));
        
        element.insert('<div style="clear:left;"></div>');
        
        this.updateElementWidth();
        Event.observe(window, 'resize', this.updateElementWidth.bindAsEventListener(this));
    };
    
    Object.extend(Awr.FlexibleColumn.prototype,
    {
        updateElementWidth: function()
        {
            var remainingWidth = $(this.element.up()).getWidth() - this.widthDeduction;
            var columnWidth = Math.round((remainingWidth - this.spacing * (this.numColumns - 1)) / this.numColumns);
            
            this.columnElements.each((function(column, i) {
                if (i < this.numColumns - 1) {
                    column.setStyle({
                        width:       columnWidth + 'px',
                        marginRight: this.spacing + 'px'
                    });
                    remainingWidth -= columnWidth + this.spacing;
                } else {
                    column.setStyle({
                        width: remainingWidth + 'px'
                    });
                }
            }).bind(this));
        }
    });
    
    /* Section */

    Awr.Section = function(element, options)
    {
        if (!element) return null;
        element = $(element);
        
        this.element        = element;
        this.headerElement  = $(element.down('.section-header'));
        this.bodyElement    = $(element.down('.section-body'));
        this.spacing        = options.columnSpacing || 0;
        this.widthDeduction = parseInt($(element.up()).getStyle('padding-right'))
                            + parseInt($(element.up()).getStyle('padding-left'));
                            
        this.headerWidthDeduction = parseInt(this.headerElement.getStyle('padding-right'))
                                  + parseInt(this.headerElement.getStyle('padding-left'));
        this.bodyWidthDeduction   = parseInt(this.bodyElement.getStyle('padding-right'))
                                  + parseInt(this.bodyElement.getStyle('padding-left'));
        
        element.insert('<div style="clear:left;"></div>');
        
        this.updateElementWidth();
        Event.observe(window, 'resize', this.updateElementWidth.bindAsEventListener(this));
    };
    
    Object.extend(Awr.Section.prototype,
    {
        updateElementWidth: function()
        {
            var remainingWidth = $(this.element.up()).getWidth() - this.widthDeduction;
            var width = Math.round(remainingWidth / 4);
            
            this.headerElement.setStyle({
                width: (width - this.headerWidthDeduction) + 'px'
            });
            this.bodyElement.setStyle({
                width: (remainingWidth - width - this.bodyWidthDeduction) + 'px'
            });
        }
    });
    
    /* HeaderImage */

    Awr.HeaderImage = function(element, options)
    {
        if (!element) return null;
        element = $(element);
        
        this.element = element;
        
        var image = new Image();
        Event.observe(image, 'load', (function() {
            this.imageWidth  = image.width;
            this.imageHeight = image.height;
            
            this.updateElementWidth();
            Event.observe(window, 'resize', this.updateElementWidth.bindAsEventListener(this));
        }).bind(this));
        image.src = element.src;
    };
    
    Object.extend(Awr.HeaderImage.prototype,
    {
        updateElementWidth: function()
        {
            var headerHeight = $('header').getHeight();
            var headerWidth  = Math.max($('header').getWidth(), $('header-container').getWidth());
            var style = {};
            
            if (this.imageWidth < headerWidth) {
                style.width  = headerWidth + 'px';
                style.height = this.imageHeight * (headerWidth / this.imageWidth) + 'px';
                style.top    = (headerHeight - this.imageHeight * (headerWidth / this.imageWidth)) / 2 + 'px';
                style.left   = 0;
            } else {
                style.width  = this.imageWidth + 'px';
                style.height = this.imageHeight + 'px'; 
                style.top    = 0;
                style.left   = (headerWidth - this.imageWidth) / 2 + 'px';
            }
            this.element.setStyle(style);
        }
    });
    
})();