/**
    @name Edo.containers.Group
    @class 
    @typeName group
    @description 实现圆角的容器
    @extend Edo.containers.Container
    @example 


*/ 
Edo.containers.Group = function(){    
    Edo.containers.Group.superclass.constructor.call(this);    
    
};
Edo.containers.Group.extend(Edo.containers.Container, {
    /**
        @name Edo.containers.Group#defaultWidth
        @property        
        @default 60
    */ 
    defaultWidth: 60,   
    /**
        @name Edo.containers.Group#defaultHeight
        @property        
        @default 22
    */ 
    defaultHeight: 22, 
    
    elCls: 'e-group e-ct e-div',
    
    /**
        @name Edo.containers.Group#padding
        @property        
        @default [2, 3, 3, 3]
        @description 内边距宽度
    */ 
    padding: [2, 3, 3, 3],
    
    syncScrollEl: function(box){
        
        //Edo.util.Dom.applyStyles(this.scrollEl, 'border:0px;padding:0px;margin:0px;');
        if( this.scrollEl != this.el){     //扩展后,scrollEl和el可能不是同一个对象
            //&& this.mustSyncSize !== false    算了,容器就一直弄吧
            //trace('<b>syncScrollEl:</b>'+this.id);
        
            var bx = this._getBox();            
            var left = box.x -bx.x;// - (parseInt(Edo.util.Dom.getStyle(this.scrollEl.parentNode, 'borderLeftWidth')) || 0);
            var top = box.y -bx.y;// - (parseInt(Edo.util.Dom.getStyle(this.scrollEl.parentNode, 'borderTopWidth')) || 0);
            if(box.width<0)box.width=0;
            if(box.height<0)box.height=0;
            this.scrollEl.style.width = box.width + 'px';
            this.scrollEl.style.height = box.height + 'px';            
        }
    },
    getHeaderHtml: function(){
        return '';
    },
    getInnerHtml: function(sb){
        var p = this.padding;
        var l = p[3], t = p[0], r = p[1], b = p[2];
        var h = this.realHeight - t - b;
        var w = this.realWidth - l - r;
        var headerHtml = this.getHeaderHtml(sb);
        sb[sb.length] = '<table cellspacing="0" border="0" cellpadding="0"><tr class="e-group-t"><td class="e-group-tl" style="height:'+t+'px;width:'+l+'px;"></td><td class="e-group-tc" style="width:'+w+'px;">'+headerHtml+'</td><td class="e-group-tr" style="width:'+r+'px;"></td></tr><tr class="e-group-m"><td class="e-group-ml"></td><td class="e-group-mc"><div class="e-group-body" style="width:'+w+'px;height:'+h+'px;"></div></td><td class="e-group-mr"></td></tr><tr class="e-group-b"><td class="e-group-bl" style="height:'+b+'px;width:'+l+'px;"></td><td class="e-group-bc"></td><td class="e-group-br" style="width:'+r+'px;"></td></tr></table>';                
    },
    createChildren: function(el){        
        Edo.containers.Group.superclass.createChildren.call(this, el);        
        this.table = this.el.firstChild;
        this.tc = this.table.rows[0].cells[1];
        this.mc = this.table.rows[1].cells[1];
        this.bc = this.table.rows[2].cells[1];
        this.scrollEl = this.mc.firstChild;
        
        this.bodyEl = this.mc.firstChild;
//        this.Group = this.el.firstChild;
//        this.scrollEl = this.Group.lastChild;
//        this.legendEl = this.Group.firstChild;
//        this.checkbox = this.legendEl.firstChild;
//        this.titleEl = this.legendEl.lastChild;
    },

    measure: function(){
        Edo.containers.Group.superclass.measure.call(this);
        
        this.realWidth += this.padding[1] + this.padding[3];
        this.realHeight += this.padding[0] + this.padding[2];
        this.measureSize();
    },
    syncSize: function(){        
        Edo.containers.Group.superclass.syncSize.call(this);
        
        
        var p = this.padding;
        var t = p[0], r = p[1], b = p[2], l = p[3];
        var h = this.realHeight - t - b;
        var w = this.realWidth - l - r;
        
        this.tc.style.width = w+'px';
        
        this.bodyEl.style.width = w+'px';
        this.bodyEl.style.width = w+'px';
        
        
    },
    getLayoutBox: function(){    
        var box = Edo.containers.Group.superclass.getLayoutBox.call(this);
        box.x += this.padding[0];
        box.y += this.padding[1];
        box.width -= (this.padding[1] + this.padding[3]);
        box.height -= (this.padding[0] + this.padding[2]);
        
        box.right = box.x + box.width;
        box.bottom = box.y + box.height;
        return box;             //这里的逻辑没问题!!!
    },
    _setPadding: function(value){
        value = this._toArray(value);
        if(!this._checkTheSame(this.padding, value)){
            var b = this.padding = value;
            //this.addStyle(this._getBPStyle());
            
            
            this.relayout('padding', value);
            this.changeProperty('padding', value);
        }
    }
});
Edo.containers.Group.regType('group');