Ext.onReady(function() {
    document.title = 'Tine 2.0 Language Statistics';
    
    versionPicker = Ext.extend(Ext.tree.TreePanel , {
        /**
         * @cfg {String} startVersion
         */
        startVersion: '2011-05',
        
        id: 'versionPicker',
        
        region: 'west',
        border: false,
        width: 200,
        split: true,
            
        title: 'Choose Version',
        
        root: {
            id: 'data',
            text: 'Tine 2.0 Versions',
            expanded: true,
            children: [{
                id: 'master',
                leaf: true,
                text: 'Development (master)'
            }, {
                id: '2011-05',
                leaf: true,
                text: 'Maischa (2011/05)'
            }, {
                id: '2011-01',
                leaf: true,
                text: 'Neele (2011/01)'
            }, {
                id: '2010-03',
                leaf: true,
                text: 'Mialena (2010/03)'
            }, {
                id: '2009-11',
                leaf: true,
                text: 'August (2009/11)'
            }, {
                id: '2009-07',
                leaf: true,
                text: 'Leonie (2009/07)'
            }, {
                id: '2009-02',
                leaf: true,
                text: 'Lara (2009/02)'
            }, {
                id: '2008-summer',
                leaf: true,
                text: '2008-summer'
            }]
        },
        
        /**
         * @private
         */
        afterRender: function() {
            versionPicker.superclass.afterRender.call(this);
            this.getSelectionModel().on('selectionchange', function(sm, node){
                this.showLangPanel(node);
            }, this);
            this.on('click', function(node) {
                node.select();
                this.showLangPanel(node);
            }, this);
            
            this.selectPath('/data/' + this.startVersion);
        },
        
        showLangPanel: function(node) {
            var tab = Ext.getCmp(node.getPath());
            if (tab) {
                tab.show();
            } else {
                var tabs = Ext.getCmp('versiontabpanel');
                tabs.add({
                    id: node.getPath(),
                    layout: 'fit',
                    closable:true,
                    title: node.text,
                    border: false,
                    items: new LangStatsPanel({
                        version: node.getPath()
                    })
                }).show();
            }
        }
    });
    
    new Ext.Viewport({
        layout: 'border',
        border: false,
        items: [
            {
                xtype: 'tabpanel',
                id: 'versiontabpanel',
                region: 'center',
                border: false,
                listeners: {
                    tabchange: function(tp, tab) {
                        var tree = Ext.getCmp('versionPicker');
                        if (tree.getSelectionModel().getSelectedNode().id != tab.id) {
                            tree.selectPath(tab.id);
                        }
                    }
                }
            },
            new versionPicker({
            })
        ]
    });
});