invoices = {};
invoices.Invoked = false;

invoices.ViewInvoices = function(){
    // Prevent this from being called twice
    if(document.getElementById('pendingitems') == null || invoices.Invoked){
        return;
    }
    
    invoices.gridstore = new Ext.data.JsonStore({
        id:             "invoices",
        root:           'data',
        totalProperty:  'totalcount',
        idProperty:     'ticketid',
        remoteSort:     true,
        fields:         [
            'customerid',
            'customer',
            'due'
        ],
        proxy:          new Ext.data.HttpProxy({
            url:  'index.php?fuse=billing&action=getInvoicesPendingGeneration'
        })
    });
    
    invoices.renderName = function(value, p, record){
        return String.format('<a href="index.php?fuse=clients&amp;view=Admin_Profile_RecurringCharges&amp;frmClientID={0}">{1}</a>', record.data.customerid, record.data.customer);
    }
    
    invoices.grid = new Ext.grid.GridPanel({
        el:               'pendingitems',
        autoHeight:       true,
        store:            invoices.gridstore,
        trackMouseOver:   true,
        disableSelection: true,
        loadMask:         true,
        columns:          [
            {
                id:         'customer',
                header:     "Customer",
                width:      75,
                renderer:   invoices.renderName,
                dataIndex:  "customer"
            },
            {
                id:         'due',
                header:     "Due Date",
                width:      50,
                dataIndex:  "due"
            }
        ],
        stripeRows:       true,
        viewConfig:       {
            forceFit:       true,
            enableRowBody:  true,
            emptyText:      lang("There are currently no invoices pending generation."),
            scrollOffset:   1
        }
    });

    invoices.grid.render();
    invoices.gridstore.load({params:{start:0, limit:0}});
    invoices.Invoked = true;
}