Ext.namespace('Ext.ux');
Ext.ux.DockableWindow = Ext.extend(Ext.Panel, 
{
    constructor: function (config) 
    {
        function undock (e, t, panel, x, y)
        {
            panel.expand (false);
            var trg = panel.items.get(0);
            var ct = panel.ownerCt;
            if (!trg || !ct) return;

            var w = panel.getWidth();
            var h = panel.getHeight();
            trg.savedHeight = h;
            ct.remove(panel, false);
            ct.doLayout(true);
            
            var win = new Ext.Window({ 
                                        width: w,
                                        bodyStyle: "height: " + h + ";",
                                        layout:'fit', 
                                        plain: true, 
                                        closable: false,
                                        collapsible: true,
                                        title: panel.title, 
                                        border: false,
                                        index: panel.index,
                                        hideBorders: true,
                                        constrain: true,
                                        shadow: false,
                                        dockBox: ct, 
                                        defaults: { frame: false } ,
                                        items: [trg],
                                        tools:[{ id: "left", handler: dock}]
                                     });


            if (x && y)
            {
        		win.setPagePosition (x, y);
            }
            else
            {    		
                var mp = (ct.homeTo ? Ext.getCmp (ct.homeTo) : Ext.getBody());
        		win.setPagePosition (mp.body.getLeft(), mp.body.getTop());
    		}
            win.show();
            panel.destroy();
            win.items.get(0).setHeight("100%");
            win.doLayout();
        }        
        
        function dock (e, t, win)
        {
            var trg = win.items.get(0);
            var ct = win.dockBox;
            if (!trg || !ct) return;

            win.hide();
            win.remove(trg, false);
            var inserted = ct.insert (win.index, { 
                                                    title: win.title, 
                                                    items: [trg],
                                                    height: trg.savedHeight, 
                                                    layout: 'fit' 
                                                  } );
                                              
            ct.doLayout(false, true);
            inserted.expand(false);                                              
            win.destroy();
        }    

              
        config = Ext.apply (config, { 
                                        layout: 'fit', 
                                        tools : [
                                                    {   
                                            	        id: 'toggle',   
                                				        handler : function (e, t, panel)
                                				        {
                                                            if (panel.open && !panel.collapsed)
                                                                panel.open = false;
                                                                                             				            
                                				            panel.toggleCollapse (true);
                                				        },
                                				        qtip: 'Espandi / Chiudi'
                                				    },
                                                    {   
                                                        id: "right", 
                                                        handler: undock,
                                				        qtip: 'Sposta la finestra nell\'area di mappa e rendila fluttuante' 
                                                    }
                                                ],
                                        draggable: 
                                        {
                                            insertProxy: false,
                                            onDrag : function(e)
                                            {
                                                var pel = this.proxy.getEl();
                                                this.x = pel.getLeft(true);
                                                this.y = pel.getTop(true);
                                        
                                                //          Keep the Shadow aligned if there is one.
                                                var s = this.panel.getEl().shadow;
                                                if (s) 
                                                    s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
                                            },
                                        
                                            //      Called on the mouseup event.
                                            endDrag : function(e)
                                            {
                                                undock(null, null, this.panel, this.x, this.y);
                                            }
                                        },                                                
                                        listeners:
                                        {
                                            expand: function ()
                                            {
                                                this.open = true;
                                            },
                            
                                            beforeCollapse: function ()
                                            {
                                                if (this.open)                    
                                                    return false;
                                            }
                                        }
                                         
                                    });
        Ext.ux.DockableWindow.superclass.constructor.call(this, config);                              
    }
});

Ext.reg('dockableWindow', 			Ext.ux.DockableWindow);



Ext.ux.DockableContainer = Ext.extend(Ext.Container, 	
{
    layout : "accordion",
    layoutConfig: {fill: false, animate: true,  collapseFirst: true, titleCollapse: false, hideCollapseTool: true },                                        
    defaults: { xtype:'dockableWindow'},
    listeners:
    {
        add         : function (me, panel, index)    { panel.index = index; },
        resize      : function (me)                  { if (me.layout && me.layout.layout)  me.doLayout();       }
    }
});




Ext.reg('dockableContainer', 		Ext.ux.DockableContainer);
Ext.reg('dockableWindow', 			Ext.ux.DockableWindow);