Ext.onReady(function(){
    Ext.QuickTips.init();    
    
    // Render rating as a star image
    function renderRating(rating) {
	    if ((rating == 6) || (rating == 0)) {
	      return ' Not rated';
	    }
	    else {
	      return "<img src='" + rating + "star.png' alt='Rating' />";
	    }
    }
    
    // Render Status
    function renderStatus(status) {
        if (status == 0) return "Unsolved";
        if (status == 1) return "Solved";
        if (status == 2) return "Created By Me";
        if (status == 3) return "All Puzzles";
    }
    
    function renderDate(dateToRender) {
    //Date Format: 'Y-m-d H:i:s'
    var matches = /(\d+)-(\d+)-(\d+)\ (\d+):(\d+):(\d+)/.exec(dateToRender);
	    
	    if (matches) {
		    var LocaleDate = new Date();
		    LocaleDate.setUTCFullYear(matches[1], matches[2] - 1, matches[3]);
		    LocaleDate.setUTCHours(matches[4], matches[5], matches[6], 0);		    
		    return LocaleDate.format('Y-m-d H:i:s');
	    }
	    else return '';
	}

    // Data reader
    var myReader = new Ext.data.JsonReader({
	    fields: [
	        {name: 'title'},
	        {name: 'creator'},
	        {name: 'status', sortDir: 'DESC'},
	        {name: 'difficulty', type: 'int'},
	        {name: 'legwork', type: 'int'},
	        {name: 'quality', type: 'int', sortDir: 'DESC'},
	        {name: 'correct_submissions', type: 'int'},
	        {name: 'correct_submitters'},
	        {name: 'incorrect_submissions', type: 'int'},
	        {name: 'total_submissions', type: 'int'},
	        {name: 'when_published'},
	        {name: 'hints'}
	    ]
    });
    
    var expander = new Ext.ux.grid.RowExpander({
        tpl : new Ext.Template(
            '<p><b>Correctly Solved By:</b> {correct_submitters}</p>'
        )
    });
    
    var colModel = new Ext.grid.ColumnModel({
    columns:[
        expander,
        {dataIndex: 'title', header: "Puzzle Title", width: 150},
        {dataIndex: 'creator', header: "Created By", groupable: true},
        {dataIndex: 'status', header: "Status", renderer: renderStatus, groupable: true, width: 50},
        {dataIndex: 'difficulty', header: "Difficulty Rating", renderer: renderRating, groupable: true, fixed: true},
        {dataIndex: 'legwork', header: "Legwork Rating", renderer: renderRating, groupable: true, fixed: true},
        {dataIndex: 'quality', header: "Quality Rating", renderer: renderRating, groupable: true, fixed: true},
        {dataIndex: 'hints', header: "Hints Available", width: 50},
        {dataIndex: 'correct_submissions', header: "Correct Submissions", width: 50},
        {dataIndex: 'correct_submitters', header: "Correctly Solved By", hidden: true},
        {dataIndex: 'incorrect_submissions', header: "Incorrect Submissions", width: 50},
        {dataIndex: 'total_submissions', header: "Total Submissions", width: 50},
        {dataIndex: 'when_published', header: "When Published", renderer: renderDate, width: 200, hidden: true}    
    ],
    defaults: {
        sortable: true,
        groupable: false,
        menuDisabled: false,
        width: 95
    }
    });

    var grid = new Ext.grid.GridPanel({
        store: new Ext.data.GroupingStore({
            reader: myReader,
            data: Ext.grid.puzzleData,
            sortInfo:{field: 'when_published', direction: "DESC"},
            groupField:'status'
        }),

        cm: colModel,

        view: new Ext.grid.GroupingView({
            forceFit:true,
            autoFill: true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Puzzles" : "Puzzle"]})',
            hideGroupedColumn:true,
            scrollOffset: 1,
//            startCollapsed:true,
            showGroupName:false
        }),

        plugins: expander,
        frame:true,
        autoHeight: true,
        animCollapse: true,
        title: Ext.grid.tableTitle,
        renderTo: 'extTable'
    });
});