Globals.ApiGrid = Ext.extend(Ext.grid.EditorGridPanel, {

    clicksToEdit: 1,

    initComponent: function() {

        var expander = new Ext.grid.RowExpander({
            enableCaching: false,
            tpl: new Ext.XTemplate(
                 '<p><b>Files:</b><br/><br/>',
                 '<tpl for="versions">',
                    '<tpl if="(values.name == parent.version) || (!parent.version && xindex == 1)">',
                        '<tpl for="scripts">',
                            '<a href="{.}" target="_blank">{.}</a>',
                            '<br/><br/>',
                        '</tpl>',
                    '</tpl>',
                    '<tpl if="((values.name == parent.version) || (!parent.version && xindex == 1)) && values.styleSheets">',
                        '<tpl for="styleSheets">',
                            '<a href="{.}" target="_blank">{.}</a>',
                            '<br/><br/>',
                        '</tpl>',
                    '</tpl>',
                '</tpl>',
                '</p><br/>')
        });

        var versionEditor = new Ext.form.ComboBox({
            editable: false,
            store : []
        });
        
        this.on('beforeedit', function(e) {
            var v = e.record.get('versions');
            var vals = [];
            Ext.each(v, function(i) {
                if (i.name) {
                    vals.push(i.name);             
                }
            });
            if (vals.length > 0) {
                versionEditor.store.loadData(vals);
                return true;
            } else {
                return false;
            }
        });
        
        var sm = new Ext.grid.CheckboxSelectionModel();
        
        Ext.apply(this, {
            columns: [
                expander,
                sm,
                { header: 'Framework/API', sortable: true, dataIndex: 'name', renderer: function(v, m, r) {
                    m.css = r.get('id');
                    m.attr = 'style="padding-left:30px"';
                    return v;
                }
                },
                { header: 'Version', editor: versionEditor, width: 50, sortable: true, dataIndex: 'version', renderer: function(v, m, r) {
                    if (!v) {
                        v = r.get('versions')[0].name || '';
                    }
                    return v;
                }
                },
                {
                    header: '# Globals', width: 30, sortable: true, dataIndex: 'globalcount', renderer: function(v, m, r) {
                        if (v === 'Loading...') {
                            m.css = 'loading-indicator';
                            m.attr = 'style="color:#d0d0d0;padding-left:18px"';
                        } else if (v === 0) {
                            m.css = 'error';
                            m.attr = 'style="padding-left:18px";qtip="Error loading this framework, if this is your own api please make sure the link is valid. Otherwise please send me an email about it so I can fix the link!"';
                        }
                        return v;
                    }
                },
                { header: '# Augmented', width: 50, sortable: true, dataIndex: 'augmentationcount' },
                { header: '# CSS', width: 36, sortable: true, dataIndex: 'csscount' }
            ],
            plugins: expander,
            enableHdMenu: false,
            viewConfig: {
                forceFit: true
            },
            sm: sm
        });

        Globals.ApiGrid.superclass.initComponent.call(this);
    }
});