Ext.onReady(function() {        
    new Ext.Viewport({
        layout: 'border',
        items: [{
            id: 'gvistree',
            region: 'west',
            collapseMode: 'mini',
            collapsible: true,
            split: true,            
            width: 200,
            xtype: 'treepanel',
            useArrows: true,
            title: 'Google Visualizations',
            rootVisible: false,
			margins: '5 0 5 5',
			bodyStyle:'padding:3px',
			root: {
                text: 'Google Visualizations',
                expanded: true,
                children: [{
                    id: 'gaugesLink',
                    text: 'Gauges',
                    leaf: true,
                    icon: 'icons/zoom_in.png'
                },{
                    id: 'lineChartLink',
                    text: 'Line Chart',
                    leaf: true,
                    icon: 'icons/chart_line.png'
                },{
                    id: 'orgChartLink',
                    text: 'Organizational Chart',
                    leaf: true,
                    icon: 'icons/chart_organisation.png'
                },{
                    id: 'pieChartLink',
                    text: 'Pie Chart',
                    leaf: true,
                    icon: 'icons/chart_pie.png'
                },{
                    id: 'intensityMapLink',
                    text: 'Intensity Map',
                    leaf: true,
                    icon: 'icons/map.png'
                }]
            }                
        },{
            id: 'center',
            region: 'center',
            layout: 'card',
            activeItem: 0,
            defaults: {border: false},
			margins:'5 5 5 0',
            items: [{
                title: 'Welcome',
                contentEl: 'initHome'
            }]
        }]
    });
    var vistree = Ext.getCmp('gvistree');
    vistree.on('click', function(n, e) {
        var c = Ext.getCmp('center');
        switch (n.id) {
            case 'intensityMapLink':
                var intensityMap = Ext.getCmp('intensityMap');
                if (!intensityMap) {
                    var countryStore = new Ext.data.SimpleStore({
                        fields: [{
                            name: 'Country',
                            type: 'string'
                        },{
                            name: 'pop',
                            type: 'int'
                        },{
                            name: 'area',
                            type: 'int'
                        }],
                        data: [
                            ['CN', 1324, 9640821],        
                            ['IN', 1134, 3287263],
                            ['US', 304, 9629091],
                            ['ID', 232, 1904569],
                            ['BR', 187, 8514877]        
                        ]
                    });
                    var intensityMap = new Ext.ux.GVisualizationPanel({
                        id: 'intensityMap',
                        visualizationPkg: 'intensitymap',
                        title: 'Intensity Map Sample',
                        store: countryStore,
                        columns: ['Country',{
                            dataIndex: 'pop',
                            label: 'Population (mil)'
                        },{
                            dataIndex: 'area',
                            label: 'Area (km2)'
                        }]
                    });
                    c.add(intensityMap);
                }
                c.getLayout().setActiveItem(intensityMap);
                break;
            case 'gaugesLink':
                var gauges = Ext.getCmp('gauges');
                if (!gauges) {
                    var gaugeDS = new Ext.data.SimpleStore({
                        fields: [{
                            name: 'Label',
                            type: 'string'
                        },{
                            name: 'Value',
                            type: 'int'
                        }],
                        data: [
                            ['Users Online', 65],
                            ['New Members', 98],
                            ['Posts Today', 85]
                        ]
                    });
                    var gauges = new Ext.ux.GVisualizationPanel({
                        id: 'gauges',
                        visualizationPkg: 'gauge',
                        visualizationCfg: {
                            width: 500,
                            height: 160,
                            redFrom: 90,
                            redTo: 100,
                            yellowFrom: 75,
                            yellowTo: 90,
                            minorTicks: 10
                        },                        
                        title: 'Daily Forum Ratios',
                        store: gaugeDS,
                        columns: ['Label','Value']
                    })
                    c.add(gauges);
                }
                c.getLayout().setActiveItem(gauges);                    
                break;
            case 'lineChartLink':
                var lineChart = Ext.getCmp('lineChart');
                if (!lineChart) {
                    var lineChartDs = new Ext.data.SimpleStore({
                        fields: [{
                            name: 'yr',
                            type: 'string'
                        },{
                            name: 'sales',
                            type: 'int'
                        },{
                            name: 'expenses',
                            type: 'int'
                        }],
                        data: [
                            ['2004',1000,400],
                            ['2005',1170,460],
                            ['2006',860,580],
                            ['2007',1030,540]                                                        
                        ]
                        
                    });                    
                    var lineChart = new Ext.ux.GVisualizationPanel({
                        id: 'lineChart',
                        visualizationPkg: 'linechart',
                        title: 'Company Performance Sample',
                        store: lineChartDs,
                        columns: [{
                            dataIndex: 'yr',
                            label: 'Year'
                        },{
                            dataIndex: 'sales',
                            label: 'Sales'
                        },{
                            dataIndex: 'expenses',
                            label: 'Expenses'
                        }]
                    })
                    c.add(lineChart);
                }
                c.getLayout().setActiveItem(lineChart);                    
                break;
            
            case 'orgChartLink':
                var orgChart = Ext.getCmp('orgChartCt');
                if (!orgChartCt) {                
                    var employeeDs = new Ext.data.SimpleStore({
                        storeId: 'empDs',
                        fields: [{
                            name: 'employeeName',
                            type: 'string'
                        },{
                            name: 'mgrName',
                            type: 'string'
                        },{
                            name: 'income',
                            type: 'int'
                        }],
                        data: [
                            ['Mike','',130000],
                            ['Jim','Mike',92000],
                            ['Alice','Mike',87000],
                            ['Joe','Mike',72000],
                            ['Andrew','Alice',67000],
                            ['Bob','Jim',55000],
                            ['Carol','Jim',56000],
                            ['Kerry','Joe',62000]
                        ]
                    });
                    var orgChartCt = new Ext.Panel({
                        layout: 'border',
                        id: 'orgChartCt',
                        defaults: {border: false},
                        items: [{                            
                            xtype: 'gvisualization',
                            id: 'orgChart',
                            region: 'north',
                            height: 220,
                            bodyStyle: 'padding: 30px;',
                            visualizationPkg: 'orgchart',
                            title: 'Org Chart Sample',
                            store: 'empDs',
                            columns: ['employeeName','mgrName']
                        },{
                            id: 'orgGrid',
                            xtype: 'grid',
                            region: 'center',
                            store: 'empDs',
                            selModel: new Ext.grid.RowSelectionModel({
                                singleSelect: true
                            }),
                            columns: [{
                                dataIndex: 'employeeName',
                                header: 'Name'
                            },{
                                dataIndex: 'mgrName',
                                header: 'Manager'
                            },{
                                dataIndex: 'income',
                                header: 'Income',
                                renderer: 'usMoney'
                            }],
                            viewConfig: {
                                forceFit: true
                            }                            
                        }]
                    })
                    var orgChart = Ext.getCmp('orgChart');
                    var orgGrid = Ext.getCmp('orgGrid');
                    orgChart.on('select', function(chart, visualization) {
                        var sels = visualization.getSelection();
                        orgGrid.getSelectionModel().selectRow(sels[0].row);
                    })
                    orgGrid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
                        orgChart.visualization.setSelection([{row: rowIdx}]);
                    });
                    c.add(orgChartCt);
                }
                c.getLayout().setActiveItem(orgChartCt);
                break;
            case 'pieChartLink':
                var pieChart = Ext.getCmp('pieChart');
                if (!pieChart) {
                    var pieDs = new Ext.data.SimpleStore({
                        storeId: 'serverSideDs',
                        fields: [{
                            name: 'lang',
                            type: 'string'
                        },{
                            name: 'count',
                            type: 'int'
                        }],
                        data: [
                            ['PHP',185],
                            ['Java',101],
                            ['C#',73],
                            ['VB.NET',17],
                            ['ColdFusion',20],
                            ['Ruby',20],
                            ['Perl',13],
                            ['Python',19],
                            ['Groovy',8],
                            ['JavaScript',22]                            
                        ]
                    });
                    
                    var pieChart = new Ext.ux.GVisualizationPanel({
                        visualizationPkg: {'piechart':'PieChart'},
                        title: 'Server-Side Language Popularity',
                        store: 'serverSideDs',
                        visualizationCfg: {
                            is3D: true,
                            width: 600,
                            height: 600
                        },
                        columns: [{
                            dataIndex: 'lang',
                            label: 'Server-Side Language'
                        },{
                            dataIndex: 'count',
                            label: 'Users'
                        }]
                    });
                    
                    c.add(pieChart);
                }
                c.getLayout().setActiveItem(pieChart);
                break;
            
        }
    });
});