Ext.onReady(function(){

    Ext.QuickTips.init();
    
    var xg = Ext.grid;

    var store = new Ext.data.GroupingStore({
            proxy: new Ext.data.HttpProxy({
                    url: 'index.php?fuse=admin&action=Admin_GetProducts'
            }),
            reader: new Ext.data.JsonReader({
                root: 'products',
                id: 'productsReader',
                fields: ['id','name','price', 'price3','price6','price12','price24','taxable','setup','signup','group']
            }),
            sortInfo:{field: 'name', direction: "ASC"},
            groupField:'group'
        });
        
    store.load();
    function renderName(value, p, record){
        var name = record.data.ticketTypeName;
        //if(store.reader.jsonData.canEditTicketTypes){
            name = '&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:ClientExec.ProductSettings.ShowEditProductWindow('+record.data.id+');" id="'+record.data.id+'" class="editbillingtype" qtip="'+lang('Click to edit this product')+'">'+lang(record.data.name)+'</a>';
        //}

        return name;
    }

    var productsGrid = new Ext.grid.GridPanel({ // xg.GridPanel({
        id: "productsGrid",
        store: store,         
        columns: [
            {id: 'id',header: "ID", width: 10, hidden:true, dataIndex: 'id'},
            {header: lang("Name"), renderer : renderName, width: 60, dataIndex: 'name'},
            {header: lang("Monthly"), width: 15, align:'center', dataIndex: 'price'},
            {header: lang("Quarterly"), width: 15, align:'center', dataIndex: 'price3'},
            {header: lang("Semiannual"), width: 15, align:'center', dataIndex: 'price6'},
            {header: lang("Annual"), width: 15, align:'center', dataIndex: 'price12'},
            {header: lang("2 Year"), width: 15, align:'center', dataIndex: 'price24'},
            {header: lang("Taxable"), width: 10, align:'center',dataIndex: 'taxable', renderer: renderYesNo},
            {header: lang("Setup Fee"), width: 20, align:'center', dataIndex: 'setup'},
            {header: lang("Show in Signup"), width: 20, align:'center',dataIndex: 'signup', renderer: renderSignup},
            {header: lang("Product Group"), width: 20, align:'center',dataIndex: 'group', hidden: true}
        ],

        view: new Ext.grid.GroupingView({
            scrollOffset:1,
            forceFit:true,
            groupFit:true,
            emptyText: lang("There are no products available"),
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Products" : "Product"]})'
        }),
        collapsible: true,
        animCollapse: false,
        iconCls: 'icon-grid',
        renderTo: 'products-list',        
        disableSelection:true,
        trackMouseOver:false,
        loadMask: true,
        stripeRows: true,
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            emptyText: lang("There are no products available"),
            scrollOffset:1
        },   
        columnLines: true,
        autoHeight:true,
        collapsible: false,
        title: ''
    });
    
    function renderSignup(value,p,record){
        if (value == 1) return lang("Yes");
        if (value == 0) return lang("Hidden");
        return lang("No");
    }
    
    function renderYesNo(value,p,record){
        if (value == 1) return lang("Yes");
        return lang("No");
    }
});