var FilloutGroup = new Class({
    Implements: [Events, Class.Occlude],
    
    property: 'filloutgroup',
    
    initialize: function (element) {
        this.element = element;
        
        if (this.occlude()) {
            return this.occluded;
        }
        
        if (element.hasClass('fillout_group_horizontal')) {
            this.orientation = 'horizontal';
        }
        else if (element.hasClass('fillout_group_vertical')) {
            this.orientation = 'vertical';
        }
        
        this._resize_handler = this.onWindowResize.bindWithEvent(this);
        
        this._inner_html   = this.element.get('html');
        this._element_size = this.element.getSize();
        
        window.addEvent('resize', this._resize_handler);
        
        //this._update_periodical = this.periodicalUpdate.periodical(250, this);
        
        this.updateChildrenSizes();
        
        return this;
    },
    
    onWindowResize: function (event) {
        if (this.element.getParents('body').length === 0) {
            window.removeEvent('resize', this._resize_handler);
            return;
        }
        
        if (this.element.getParents('.fillout_group_horizontal,.fillout_group_vertical').length === 0) {
            this.updateChildrenSizes();
        }
    },
    
    //periodicalUpdate: function () {
    //    //if ((this._inner_html !== this.element.get('html')) || (this._element_size !== this.element.getSize())) {
    //        this._inner_html   = this.element.get('html');
    //        this._element_size = this.element.getSize();
    //        this.updateChildrenSizes();
    //    //}
    //},
    
    updateChildrenSizes : function (callback) {
        var size_remaining, current_position, child_size, num_resizeable_children, fixed_size_children, resizeable_child_number, fixed_size_total, position, size, max_child_thickness, sum_fixed_children_size;
        
        if (this.orientation === 'horizontal') {
            fixed_size_children     = this.element.getChildren('.fillout_fixed_width');
            size_remaining          = this.element.getSize().x - fixed_size_children.map(function (element) { return element.getSize().x; }).sum();
            max_child_thickness     = this.element.getChildren().map(function (element) { return element.getSize().y; }).max();
            sum_fixed_children_size = fixed_size_children.map(function (element) { return element.getSize().x; }).sum();
            
            //if (this.element.getSize().y < max_child_thickness) {
            //    this.element.setStyle('height', max_child_thickness + 'px');
            //}
            //
            //if (this.element.getSize().x < sum_fixed_children_size) {
            //    this.element.setStyle('width', sum_fixed_children_size)
            //}
        }
        else if (this.orientation === 'vertical') {
            fixed_size_children     = this.element.getChildren('.fillout_fixed_height');
            size_remaining          = this.element.getSize().y - fixed_size_children.map(function (element) { return element.getSize().y; }).sum();
            max_child_thickness     = this.element.getChildren().map(function (element) { return element.getSize().x; }).max();
            sum_fixed_children_size = fixed_size_children.map(function (element) { return element.getSize().y; }).sum();
            
            //if (this.element.getSize().x < max_child_thickness) {
            //    this.element.setStyle('width', max_child_thickness + 'px');
            //}
            //
            //if (this.element.getSize().y < sum_fixed_children_size) {
            //    this.element.setStyle('height', sum_fixed_children_size)
            //}
        }
        else {
            return;
        }
        
        if (size_remaining < 0) {
            return;
        }
        
        current_position = 0;
        num_resizeable_children = this.element.getChildren().length - fixed_size_children.length;
        
        if (num_resizeable_children !== 0) {
            child_size = size_remaining / num_resizeable_children;
        }
        else {
            child_size = 0;
        }
        
        resizeable_child_number = 0;
        fixed_size_total        = 0;
        
        this.element.getChildren().each(function (child_element) {
            var subchildren, fillout_groups_above;
            
            subchildren = child_element.getChildren();
            
            if (this.orientation === 'horizontal') {
                child_element.setStyles({
                    'position' : 'absolute',
                    //'height'   : [this.element.getSize().y, subchildren.map(function (subchild) { return subchild.getSize().y; }).max()].max() + 'px',
                    'top'      : '0px'
                });
                
                if (!child_element.hasClass('fillout_fixed_width')) {
                    position = fixed_size_total + Math.round(child_size * resizeable_child_number);
                    
                    resizeable_child_number += 1;
                    
                    size = fixed_size_total + Math.round(child_size * resizeable_child_number) - position;
                    
                    child_element.setStyles({
                        'left'   : position + 'px',
                        'width'  : size     + 'px'
                    });
                    
                    if (child_element.hasClass('fillout_group_horizontal') || child_element.hasClass('fillout_group_vertical')) {
                        child_element.retrieve('filloutgroup').updateChildrenSizes();
                    }
                    
                    fillout_groups_above = this.element.getParents('.fillout_group_horizontal,.fillout_group_vertical');
                    
                    child_element.getElements('.fillout_group_horizontal,.fillout_group_vertical').each(function (fillout_group_element) {
                        if (fillout_group_element.getParents('.fillout_group_horizontal,.fillout_group_vertical').length === (fillout_groups_above.length + 1)) {
                            fillout_group_element.retrieve('filloutgroup').updateChildrenSizes();
                        }
                    }.bind(this));
                    
                    child_element.getElements('.multisizeimage').each(function (multisizeimage_element) {
                        if (multisizeimage_element.getParents('.fillout_group_horizontal,.fillout_group_vertical').length === (fillout_groups_above.length + 1)) {
                            if (multisizeimage_element.isVisible()) {
                                multisizeimage_element.retrieve('multisizeimage').displayFull();
                            }
                            else {
                                multisizeimage_element.retrieve('multisizeimage').updateSize();
                            }
                        }
                    }.bind(this));
                    
                    child_element.getChildren('.iscroll_content').each(function (iscroll_content_pane) {
                        var iscroll;
                        
                        if (iscroll_content_pane.getParents('.fillout_group_horizontal,.fillout_group_vertical').length === (fillout_groups_above.length + 1)) {
                            iscroll = iscroll_content_pane.retrieve('iscroll');
                            
                            iscroll.refresh();
                            
                            //if (iscroll.iscroll.pageX) {
                            //    iscroll.scrollToPage(pageX, null, 0);
                            //}
                            //
                            //if (iscroll.iscroll.pageY) {
                            //    iscroll.scrollToPage(null, pageY, 0);
                            //}
                        }
                    });
                }
                else {
                    child_element.setStyles({
                        'left'   : fixed_size_total + Math.round(child_size * resizeable_child_number) + 'px'
                    });
                    
                    fixed_size_total += child_element.getSize().x;
                }
            }
            else if (this.orientation === 'vertical') {
                child_element.setStyles({
                    'position' : 'absolute',
                    //'width'   : [this.element.getSize().x, subchildren.map(function (subchild) { return subchild.getSize().x; }).max()].max() + 'px',
                    'left'     : '0px'
                });
                
                if (!child_element.hasClass('fillout_fixed_height')) {
                    position = fixed_size_total + Math.round(child_size * resizeable_child_number);
                    
                    resizeable_child_number += 1;
                    
                    size = fixed_size_total + Math.round(child_size * resizeable_child_number) - position;
                    
                    child_element.setStyles({
                        'top'    : position + 'px',
                        'height' : size     + 'px'
                    });
                    
                    if (child_element.hasClass('fillout_group_horizontal') || child_element.hasClass('fillout_group_vertical')) {
                        child_element.retrieve('filloutgroup').updateChildrenSizes();
                    }
                    
                    fillout_groups_above = this.element.getParents('.fillout_group_horizontal,.fillout_group_vertical');
                    
                    child_element.getElements('.fillout_group_horizontal,.fillout_group_vertical').each(function (fillout_group_element) {
                        if (fillout_group_element.getParents('.fillout_group_horizontal,.fillout_group_vertical').length === (fillout_groups_above.length + 1)) {
                            fillout_group_element.retrieve('filloutgroup').updateChildrenSizes();
                        }
                    }.bind(this));
                    
                    child_element.getElements('.multisizeimage').each(function (multisizeimage_element) {
                        if (multisizeimage_element.getParents('.fillout_group_horizontal,.fillout_group_vertical').length === (fillout_groups_above.length + 1)) {
                            multisizeimage_element.retrieve('multisizeimage').updateSize();
                        }
                    }.bind(this));
                    
                    child_element.getChildren('.iscroll_content').each(function (iscroll_content_pane) {
                        var iscroll;
                        
                        if (iscroll_content_pane.getParents('.fillout_group_horizontal,.fillout_group_vertical').length === (fillout_groups_above.length + 1)) {
                            iscroll = iscroll_content_pane.retrieve('iscroll');
                            
                            iscroll.refresh();
                            
                            //if (iscroll.iscroll.pageX) {
                            //    iscroll.scrollToPage(pageX, null, 0);
                            //}
                            //
                            //if (iscroll.iscroll.pageY) {
                            //    iscroll.scrollToPage(null, pageY, 0);
                            //}
                        }
                    });
                }
                else {
                    child_element.setStyles({
                        'top'   : fixed_size_total + Math.round(child_size * resizeable_child_number) + 'px'
                    });
                    
                    fixed_size_total += child_element.getSize().y;
                }
            }
        }.bind(this));
        
        if (this.element.hasClass('slidetrack')) {
            this.element.retrieve('trackviewer').updateSize();
        }
        
        if (callback) {
            callback();
        }
    }
});

window.element_activators.push(function (element) {
    element.getElements('.fillout_group_horizontal').each(function (element) {
        new FilloutGroup(element);
    }.bind(this));
    element.getElements('.fillout_group_vertical').each(function (element) {
        new FilloutGroup(element);
    }.bind(this));
});