LangStatsPanel = Ext.extend(Ext.Panel, {
    
    version: 'trunk',
    
    layout: 'border',
    region: 'center',
    border: false,
    
    initComponent: function() {
        this.initLangOverview();
        this.initLangPanel();
        this.initLayout();
        
        
        LangStatsPanel.superclass.initComponent.call(this);
    },
    
    /**
     * lang overview grid
     */
    initLangOverview: function() {
        this.langOverviewGrid = new Ext.grid.GridPanel({
            border: false,
            store: new Ext.data.JsonStore({
                url: '.' + this.version + '/langstatistics.json',
                root: 'langStats',
                totalRecords: '@total',
                autoLoad: true,
                fields: langRecord,
                sortInfo: {
                    field: 'language',
                    dir: 'ASC'
                }
            }),
            //forcefit: true,
            //autoExpandColumn: 0,
            columns: [
                {header: "Language", width: 100, dataIndex: 'language', sortable: true},
                {header: "Region", width: 100, dataIndex: 'region', sortable: true, renderer: function(value) {return value ? value : '';}},
                {header: "Locale", width: 50, dataIndex: 'locale', sortable: true},
                {header: "Translation State", width: 110, dataIndex: 'translated', sortable: true, renderer: this.percentageRenderer},
                {header: "Total Strings", width: 100, dataIndex: 'total', sortable: true},
                {header: "Translated", width: 100, dataIndex: 'translated'},
                {header: "Fuzzy", width: 100, dataIndex: 'fuzzy', sortable: true},
                {header: "Untranslated", width: 100, dataIndex: 'untranslated', sortable: true}
            ]
        });
        
        this.langOverviewGrid.getSelectionModel().on('selectionchange', function(sm) {
            var record = sm.getSelected();
            
            if (! record) return;
            
            this.langPanel.getStore().on('load', function(store) {
                store.filter('locale', record.get('locale'));
            }, this);
            
            if (this.langPanel.getStore().getCount() == 0) {
                this.langPanel.getStore().load();
            } else {
                this.langPanel.getStore().filter('locale', record.get('locale'));
            }
            Ext.getCmp('langStatisticsPerApp').setTitle('Language Statistics for ' + record.get('language') + (record.get('region') ? ' (' + record.get('region') + ')' : ''));
        }, this);
        
        this.langOverviewGrid.store.on('load', function() {
            var userLocale = (window.navigator.browserLanguage || window.navigator.language || 'C')
                .replace(/^(.{2}).?(.{2})?.*$/, function (match, lang, terr) {
                return lang.toLowerCase() + (terr ? '_' + terr.toUpperCase() : '');
            });
            
            var idx = this.langOverviewGrid.store.find('locale', userLocale);
            this.langOverviewGrid.getSelectionModel().selectRow(idx);
        }, this);
    },
    
    /**
     * lang statistics grid
     */
    initLangPanel: function() {
        this.langPanel = new Ext.grid.GridPanel({
            border: false,
            store: new Ext.data.JsonStore({
                url: '.' + this.version + '/langstatistics.json',
                root: 'poFilesStats',
                totalRecords: '@total',
                //autoLoad: true,
                fields: langRecord,
                sortInfo: {
                    field: 'appname',
                    dir: 'ASC'
                }
            }),
            //forcefit: true,
            //autoExpandColumn: 0,
            columns: [
                //{header: "Language", width: 90, dataIndex: 'language', sortable: true},
                {header: "Application", width: 150, dataIndex: 'appname', sortable: true},
                {header: "Translation State", width: 110, dataIndex: 'translated', sortable: true, renderer: this.percentageRenderer},
                {header: "Total Strings", width: 100, dataIndex: 'total', sortable: true},
                {header: "Translated", width: 100, dataIndex: 'translated', sortable: true},
                {header: "Fuzzy", width: 100, dataIndex: 'fuzzy', sortable: true},
                {header: "Untranslated", width: 100, dataIndex: 'untranslated'}
            ]
        });
    },
    
    initLayout: function() {
        this.items = [{
            title: 'Language Overview',
            split: true,
            xtype: 'panel',
            layout: 'fit',
            border: false,
            region: 'north',
            items: this.langOverviewGrid,
            height: 400
        }, {
            title: 'Select a Language',
            id: 'langStatisticsPerApp',
            xtype: 'panel',
            layout: 'fit',
            border: false,
            region: 'center',
            items: this.langPanel
        }];
    },
    
    /**
     * percentage renderer
     */
    percentageRenderer: function(value, cell, record) {
        var percent = Math.round((value / record.get('total')) * 100);
        return Ext.ux.PercentRenderer(percent);
        //console.log(percent);
    }
});

langRecord = Ext.data.Record.create([
    {name: 'locale'},
    {name: 'language'},
    {name: 'region'},
    {name: 'appname'},
    {name: 'translated'},
    {name: 'fuzzy'},
    {name: 'untranslated'},
    {name: 'total'}
]);