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 expander = new Ext.ux.grid.RowExpander({
        enableCaching: false,
        listeners:{
           'expand': function(re,response,body,index){
               if (response.data.reassignTo=="") response.data.reassignTo = "Don't reassign";
               if (response.data.newPriority=="") response.data.newPriority = "Don't change";
               expanderBody = "<div class='ext-expanderframe'>";
               expanderBody += "<div class='ext-expanderframe-details'>";
               expanderBody += "<b>Departments</b>: "+ response.data.departmentsList+" </b>";
               expanderBody += "<br/><b>After this many hours</b>: " + response.data.hoursAfter;
               expanderBody += "<br/><b>Ticket Status</b>: " + response.data.ticketStatus;
               expanderBody += "<br/><b>Priority</b>: " + response.data.priority;
               expanderBody += "<br/><b>Reassign To</b>: " + response.data.reassignTo;               
               expanderBody += "<br/><b>Change priority to</b>: " + response.data.newPriority;                
               expanderBody += "</div>";
               expanderBody += "</div>";
               body.innerHTML = expanderBody;
               
            }
        }
    });

    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:[expander,{
            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
        }
        ],
        plugins: expander,
        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}});

});