Ext.SwitchButton = Ext.extend(Ext.Component, {
        initComponent : function(){
                Ext.SwitchButton.superclass.initComponent.call(this);
                
                var mc = new Ext.util.MixedCollection();
                mc.addAll(this.items);
                this.items = mc;
                
                this.addEvents('change');
                
                if(this.handler){
                        this.on('change', this.handler, this.scope || this);
                }
        },
        
        onRender : function(ct, position){
                
                var el = document.createElement('table');
                el.cellSpacing = 0;
                el.className = 'x-rbtn';
                el.id = this.id;
                
                var row = document.createElement('tr');
                el.appendChild(row);
                
                var count = this.items.length;
                var last = count - 1;
                this.activeItem = this.items.get(this.activeItem);
                
                for(var i = 0; i < count; i++){
                        var item = this.items.itemAt(i);
                        
                        var cell = row.appendChild(document.createElement('td'));
                        cell.id = this.id + '-rbi-' + i;
                        
                        var cls = i == 0 ? 'x-rbtn-first' : (i == last ? 'x-rbtn-last' : 'x-rbtn-item');
                        item.baseCls = cls;
                        
                        if(this.activeItem == item){
                                cls += '-active';
                        }
                        cell.className = cls;
                        
                        var button = document.createElement('button');
                        button.innerHTML = ' ';
                        button.className = item.iconCls;
                        button.qtip = item.tooltip;
                        
                        cell.appendChild(button);
                        
                        item.cell = cell;
                }
                
                this.el = Ext.get(ct.dom.appendChild(el));
                
                this.el.on('click', this.onClick, this);
        },
        
        getActiveItem : function(){
                return this.activeItem;
        },
        
        setActiveItem : function(item){
                if(typeof item != 'object' && item !== null){
                        item = this.items.get(item);
                }
                var current = this.getActiveItem();
                if(item != current){
                        if(current){
                                Ext.fly(current.cell).removeClass(current.baseCls + '-active');
                        }
                        if(item) {
                                Ext.fly(item.cell).addClass(item.baseCls + '-active');
                        }
                        this.activeItem = item;
                        this.fireEvent('change', this, item);
                }
                return item;
        },
        
        onClick : function(e){
                var target = e.getTarget('td', 2);
                if(!this.disabled && target){
                        this.setActiveItem(parseInt(target.id.split('-rbi-')[1], 10));
                }
        }
});

Ext.reg('switch', Ext.SwitchButton);