/*
Copyright (c) 2010, STRAIGHTLINE All rights reserved.
http://www.straightline.jp/

Code licensed under the BSD License
http://www.opensource.org/licenses/bsd-license.php
*/

var GridLayout = new Class({
    isResizing: false,
    initialize: function(options) {

        if ($$('.single').length == 0 && $$('.page').length == 0) {
            $$('.grid').each(function(grid) {
                var firstGridItem = grid.getElement('.grid-item');
                var firstGridContent = grid.getElement('.grid-content');
                var gridContentWidth = firstGridItem.getStyle('width').toInt() - 
                                        firstGridContent.getStyle('margin-left').toInt() - 
                                        firstGridContent.getStyle('margin-right').toInt() -
                                        firstGridContent.getStyle('padding-left').toInt() - 
                                        firstGridContent.getStyle('padding-right').toInt();
                ['img', 'object', 'embed'].each(function(tag) {
                    grid.getElements(tag).each(function(element) {
                        
                        if (Browser.Engine.trident) {
                            element.width = gridContentWidth;
                        } else {
                            element.setStyle('width', gridContentWidth);
                        }
                    });
                });
            });
        }
        
        $$('.grid-item').each(function(gridItem, index) {
            gridItem.setStyle('position', 'absolute');
        });
        
        window.addEvent('resize', function() {
            if (this.isResizing == false) {
                this.isResizing = true;
                (function() {
                    this.control();
                    (function() { this.isResizing = false; }.bind(this)).delay(51);
                }.bind(this)).delay(50);
            }
        }.bind(this));
    },

    control: function() {
    
        var wrapper = $('wrapper');
        wrapper.setStyles({
            width: 'auto',
            opacity: 0
        });
        var wrapperMaxWidth = 0;
        
        $$('.grid').each(function(grid) {
        
            grid.setStyles({
                width: 'auto',
                height: 'auto'
            });
            
            var gridMaxWidth = 0;
            var gridMaxHeight = 0;            
            var firstGridItem = grid.getElement('.grid-item');
            var gridItemWidth = firstGridItem.getSize().x +
                            firstGridItem.getStyle('border-width').toInt() +
                            firstGridItem.getStyle('margin-left').toInt() +
                            firstGridItem.getStyle('margin-right').toInt() +
                            firstGridItem.getStyle('padding-left').toInt() +
                            firstGridItem.getStyle('padding-right').toInt();
            var gridItems = grid.getElements('.grid-item');
            var colCount = Math.max(Math.floor(grid.getSize().x / gridItemWidth), 1);
            var rowCount =  Math.max(Math.ceil(gridItems.length / colCount), 1);
            wrapperMaxWidth = Math.max(wrapperMaxWidth, Math.ceil(gridItems.length / rowCount) * gridItemWidth);
            
            for (var col = 0; col < colCount; col++) {
            
                var colMaxHeight = 0;
                for (var row = 0; row < rowCount; row++) {
                
                    var curGridItemIndex = col * rowCount + row;
                    var gridItem = gridItems[curGridItemIndex];
                    
                    if ($defined(gridItem)) {
                        gridItem.removeClass('grid-item-start');
                        gridItem.removeClass('grid-item-end');
                        if (row == 0) {
                            gridItem.addClass('grid-item-start');
                        }
                        if (row + 1 == rowCount || curGridItemIndex + 1 == gridItems.length) {
                            gridItem.addClass('grid-item-end');
                        }
                        gridItem.setStyles({
                            opacity: 0,
                            top: row > 0 ? gridItems[curGridItemIndex - 1].getCoordinates(grid).bottom : 0,
                            left: col > 0 ? gridItems[(col - 1) * rowCount + row].getCoordinates(grid).right : 0
                        });
                        colMaxHeight += gridItem.getSize().y;
                        gridMaxHeight = Math.max(gridMaxHeight, colMaxHeight);
                    }
                }
                
            }

            grid.setStyles({
                width: gridMaxWidth,
                height: gridMaxHeight
            });
            
        }.bind(this));
        
        wrapper.setStyles({
            width: wrapperMaxWidth,
            opacity: 1
        });

        $$('.grid-item').each(function(gridItem, index) {
            (function() { gridItem.tween('opacity', 1); }).delay(50 * index);
        });
    }
});