Ext.onReady(function(){

    new Ext.Button({
        id:"addcustomergroup",
        renderTo:"addcustomergroup",
        text: lang('Add Customer Group'),
        iconAlign: 'left',
        handler:function(){
            addGroup()
        }
    });

    gridstore = new Ext.data.JsonStore({
            id: "gridstore",
            root: 'groups',
            totalProperty: 'totalcount',
            idProperty: 'id',
            remoteSort: true,
            baseParams: {
            filter: "",
            customerid: "0"
        },
        fields: [
                'id','groupname', 'description','useDefault','groupColorText','groupColor','groupMembers','canEditCustomerGroup','notesCount'
        ],
        // 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=admin&action=GetCustomerGroupList'
        })
    });
    gridstore.setDefaultSort('id', 'asc');

    function renderName(value, p, record){
        name = record.data.groupname;
        if(record.data.canEditCustomerGroup){
            name = String.format("<a onclick='editGroup({1})' href='javascript:void();'>{0}</a>",record.data.groupname,record.data.id);
        }

        return name;
    }

    function renderNotesCount(value,p,record){
        count = String.format("<a href='index.php?fuse=admin&view=ViewCustomerGroupNotes&groupId={1}&groupName={0}' title='View Staff Notes' >"+record.data.notesCount+" </a>",record.data.groupname,record.data.id);
        return count;
    }

    function renderColor(value, p, record){
        
        if(record.data.useDefault){
            
           return "Default";
        }else{
            p.attr = "style='background-color:"+record.data.groupColor+";padding-bottom:9px;'";
        }
        
    }

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

        // grid columns
        columns:[{
            id: 'id', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Id"),
			dataIndex : "id",
			hidden:true,
            sortable: false,
			align:"left"
        },{
            id: 'groupname', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Group"),
            width: 50,
            renderer : renderName,
    		dataIndex : "groupname",
            sortable: false
        },{
            id: 'description', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Description"),
            width: 70,
    		dataIndex : "description",
            sortable: false
        },{
            id: 'color', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Color"),
            renderer : renderColor,
            width: 25,
            dataIndex : "groupColorText",
            sortable: false
        },{
            id: 'notescount', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Staff Notes Total"),
            width: 25,
            renderer : renderNotesCount,
            dataIndex : "notesCount",
            sortable: false,
            hidden: true,
            align : "right"
        },{
            id: 'members', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: lang("Members"),
            
            width: 20,
    		dataIndex : "groupMembers",
            sortable: false,
            align : "right"
        }
        ],
		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}});

});