//
// This is the main layout definition.
//
Ext.onReady(function(){
        
        Ext.QuickTips.init();
        
        // This is an inner body element within the Details panel created to provide a "slide in" effect
        // on the panel body without affecting the body's box itself.  This element is created on
        // initial use and cached in this var for subsequent access.
        var detailEl;
        
        // This is the main content center region that will contain each example layout panel.
        // It will be implemented as a CardLayout since it will contain multiple panels with
        // only one being visible at any given time.
        var contentPanel = {
                id: 'content-panel',
                region: 'center', // this is what makes this panel into a region within the containing layout
                layout: 'card',
                margins: '2 5 5 0',
                activeItem: 0,
                border: false,
                items: [
                        // from basic.js:
                        start, absolute, accordion, anchor, border, cardTabs, cardWizard, column, fit, form, table, vbox, hbox,
                        // from custom.js:
                        rowLayout, centerLayout,
                        // from combination.js:
                        absoluteForm, tabsNestedLayouts
                ]
        };
    
        // Go ahead and create the TreePanel now so that we can use it below
    var treePanel = new Ext.tree.TreePanel({
        id: 'tree-panel',
        title: 'Sample Layouts',
        region:'north',
        split: true,
        height: 300,
        minSize: 150,
        autoScroll: true,
        
        // tree-specific configs:
        rootVisible: false,
        lines: false,
        singleExpand: true,
        useArrows: true,
        
        loader: new Ext.tree.TreeLoader({
            dataUrl:'tree-data.json'
        }),
        
        root: new Ext.tree.AsyncTreeNode()
    });
    
        // Assign the changeLayout function to be called on tree node click.
    treePanel.on('click', function(n){
        var sn = this.selModel.selNode || {}; // selNode is null on initial selection
        if(n.leaf && n.id != sn.id){  // ignore clicks on folders and currently selected node 
                Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');
                if(!detailEl){
                        var bd = Ext.getCmp('details-panel').body;
                        bd.update('').setStyle('background','#fff');
                        detailEl = bd.createChild(); //create default empty div
                }
                detailEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2});
        }
    });
    
        // This is the Details panel that contains the description for each example layout.
        var detailsPanel = {
                id: 'details-panel',
        title: 'Details',
        region: 'center',
        bodyStyle: 'padding-bottom:15px;background:#eee;',
                autoScroll: true,
                html: '
When you select a layout from the tree, additional details will display here.
'
    };
        
        // Finally, build the main layout once all the pieces are ready.  This is also a good
        // example of putting together a full-screen BorderLayout within a Viewport.
    new Ext.Viewport({
                layout: 'border',
                title: 'Ext Layout Browser',
                items: [{
                        xtype: 'box',
                        region: 'north',
                        applyTo: 'header',
                        height: 30
                },{
                        layout: 'border',
                id: 'layout-browser',
                region:'west',
                border: false,
                split:true,
                        margins: '2 0 5 5',
                width: 275,
                minSize: 100,
                maxSize: 500,
                        items: [treePanel, detailsPanel]
                },
                        contentPanel
                ],
        renderTo: Ext.getBody()
    });
});