Globals.DetailsGrid = Ext.extend(Ext.grid.GridPanel, {

    stripeRows : true,
    
    onRowClick : function(grid, rowIndex, e) {
        var rec = this.store.getAt(rowIndex);
        
        if (rec.get('type') !== 'function') {
            return;
        }
        
        if (!this.codeWin) {
            this.codeWin = new Ext.Window({
                closeAction : 'hide',
                height: 400,
                width: 600,
                maximizable : true,
                bodyStyle : 'background: #fff'
            });
        }
        
        if (!this.codeWin.isVisible()) {
            this.codeWin.show(e.getTarget(), showEditor, this);
        } else {
            showEditor.call(this);
        }
        this.codeWin.setTitle(rec.get('name'));
        
        function showEditor() {
            if (!this.editor) {
                this.codeWin.body.mask.defer(10, this.codeWin.body, ['Initializing CodeMirror (JS syntax highlighting)', 'x-mask-loading']);
                var that = this;
                
                this.editor = new CodeMirror(Ext.getDom(this.codeWin.body), {
                    height: "370px",
                    content : rec.get('value'),
                    parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
                    stylesheet: "css/jscolors.css",
                    path: "js/codemirror/",
                    readOnly : true,
                    initCallback: function(){
                        that.codeWin.body.unmask();
                    }
                 });
            } else {
                this.editor.setCode(rec.get('value'));
                this.codeWin.toFront();
            }
        }
    },
    
    initComponent: function(){
        this.on('rowclick', this.onRowClick,this);
         
        Ext.apply(this, {
            view: new Ext.grid.GroupingView({
                forceFit:true,
                hideGroupedColumn : true,
                showGroupName :false,
                groupTextTpl: '{[values.group]} {[values.rs.length]} ({[values.rs.length > 1 ? "Symbols" : "Symbol"]})'
            }),

            enableHdMenu : false,
            columns : [
                {dataIndex : 'category'},
                {header : 'Property', sortable : true, dataIndex : 'name'},
                {header : 'Value', dataIndex : 'value', width : 100, sortable : false, renderer : function(v, m, r) { 
                    if (v) {
                        v = v.toString ? v.toString() : 'unknown';
                        var isFunction = r.get('type') == 'function';
                        m.attr = String.format('qtip="{0}"', isFunction ? "Click to show function" : v);
                        return Ext.util.Format.ellipsis(v, 20);
                    }
                }},
                {header : 'Type', sortable : true, dataIndex : 'type', width : 70}
            ]
        });
        
        Globals.DetailsGrid.superclass.initComponent.call(this);
    },
    
    load : function(data) {
        var recs = [];
        
        var detailRecord = Ext.data.Record.create([
            'name',
            'type',
            'value',
            'category'
        ]);
           
        Ext.each(data, function(o) {
             recs.push(new detailRecord(o));
        });
        
        this.store.removeAll();
        this.store.add(recs);
        this.store.sort('name', 'ASC');
    }
});