/*
    Document   : Ext.ux.DockTabPanel.js
    Created on : 28-Aug-2009, 17:29:35
    Author     : Andreas Hadjigeorgiou
    Description:
        Purpose of the stylesheet follows.
*/

Ext.namespace('Ext.ux.grid');


Ext.ux.DockTabPanel = Ext.extend(Ext.form.FormPanel, {
    layout: 'fit',

    initComponent: function(){
        Ext.ux.DockTabPanel.superclass.initComponent.call(this);

        this.on('afterrender', function() {
           var o = this.ownerCt;
            if (!o || !(o instanceof Ext.TabPanel)) {
                    return;
            }
            Ext.fly(o.getTabEl(this)).on("dblclick", this.undock, this);
        });
    },
    makeDockable: function() {
        var o = this.ownerCt;
        if (!o || !(o instanceof Ext.TabPanel)) {
                return;
        }
        Ext.fly(o.getTabEl(this)).on("dblclick", this.undock, this);
    },

    undock: function() {
        var h = this.getEl().getHeight();
        var w = this.getEl().getWidth();
        var o = this.ownerCt;
//o.remove(this);
        var win;
        win = new Ext.Window({
                renderTo: Ext.getBody(),
                title: this.title,
                constrain: true,
                closable: false,
                layout: 'fit',
                items: [this],//this,
                tools: [{
                        id: 'pin',
                        qtip: 'Redock to original parent',
                        handler: function() {
//win.remove(this);
                                o.insert(this.position, this);
                                o.setActiveTab(this);
                                o.doLayout();
                                win.destroy();
                                this.makeDockable(); // The tab selector is new.
                        },
                        scope: this
                }]
        });
        win.setHeight(h);
        win.setWidth(w+10);
        o.doLayout();
        win.show();
    }
});