Ext.onReady(function(){
    
    if(document.getElementById('addescalationrulebutton') != null){
            new Ext.Button({
                id:"addescalationrule",
                renderTo:"addescalationrulebutton",
                text: lang('Add Escalation Rule'),
                iconAlign: 'left',
                handler:function(){
                    addEscalationRule();
                }
            });
    }
    
    var gridstore = new Ext.data.JsonStore({
            id: "gridstore",
            root: 'groups',
            totalProperty: 'totalcount',
            idProperty: 'escalationId',
            remoteSort: true,
            baseParams: {
            filter: ""

        },
        fields: [
                'escalationId','escalationName', 'departmentsList','hoursAfter','ticketStatus','priority','reassignTo','newPriority','support_edit_escalations'
        ],
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.data.HttpProxy({
                url: 'index.php?fuse=support&action=GetEscalationList'
        })
    });
    gridstore.setDefaultSort('escalationId', 'asc');
    function renderName(value, p, record){
        name = record.data.escalationName;
        if(record.data.support_edit_escalations){
            name = '<a href="javascript:editEscalationRule(' + record.data.escalationId + ');" id="' + record.data.escalationId + '" class="editescalationrule" qtip="' + lang('Click to edit this escalation rule') + '">' + record.data.escalationName + '</a>';
        }

        return name;
    }

    var grid = new Ext.grid.GridPanel({
        id: 'escalation-grid',
        el: 'escalation-grid',
        autoHeight:true,
        store: gridstore,
        trackMouseOver:true,
        disableSelection:true,
        loadMask: true,

        // grid columns
        columns:[{
            id: 'escalationId', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Id"),
			dataIndex : "escalationId",
			hidden:true,
            sortable: false,
			align:"left"
        },{
            id: 'escalationName', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Name"),
            width: 40,
            renderer : renderName,
    		dataIndex : "escalationName",
            sortable: false
        },{
            id: 'departmentsList', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Departments"),
            width: 60,
    		dataIndex : "departmentsList",
            sortable: false
        },{
            id: 'hoursAfter', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("After this many hours"),
            width: 50,
    		dataIndex : "hoursAfter",
            sortable: false
        },{
            id: 'ticketStatus', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Ticket Status"),
            width: 30,
            dataIndex : "ticketStatus",
            sortable: false
        },{
            id: 'priority', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Priority"),
            width: 30,
            dataIndex : "priority",
            sortable: false
        },{
            id: 'reassignTo', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Reassign To"),
            width: 40,
            dataIndex : "reassignTo",
            sortable: false
        },{
            id: 'newPriority', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Change priority to"),
            width: 40,
            dataIndex : "newPriority",
            sortable: false
        }
        ],
		stripeRows: true,
        // customize view config
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            emptyText: lang("There are no groups available to view at this time"),
            scrollOffset:1
        }

    });
    // render it
    grid.render();
    
    gridstore.setBaseParam('limit', 50);
    gridstore.load({params:{start:0}});

});