<script type="text/javascript">
	var columnsavedstate,gridsavedstate;
	$(document).ready(function() {
	    columnsavedstate = '{COLUMNSAVEDSTATE}';
	    if(columnsavedstate !="") {
	        columnsavedstate = Ext.util.JSON.decode(columnsavedstate);
	    }
	    gridsavedstate = '{GRIDSAVEDSTATE}';
	    if(gridsavedstate != ""){
	        gridsavedstate = Ext.util.JSON.decode(gridsavedstate);
	    }else{
	        //set default settings
	        gridsavedstate = Ext.util.JSON.decode('{"columnorder":["billdate","linkid","customername","billappliesto","paymentprocessor","billbalancedue","status"],"sortinfo":{field : "billdate",dir: "desc"},"displaysize":10,"invoicefilter":"0"}');
	    }
	});

    //report switching
    function switchReport(data,skipSet,widthDiv)
    {
        if (data == 0) {
            data = Ext.get('newreport').getValue();
        }

        newGraph = data.split("-");
        swf = newGraph[0];
        report = newGraph[1];
        type = newGraph[2];
        graph = newGraph[1]+"-"+newGraph[2];
        url = "index.php?indashboard=1&noheaderfooter=1&graphdata=1&view=ViewReport&fuse=reports&report="+report+"&type="+type;
        retrieveReportData(url,"../newedge/classes/fusioncharts/"+swf,Ext.get('invoicelisttabs').getWidth()-15); //loaded in report.js

        if(!skipSet) {
            Ext.Ajax.request({
               url: 'index.php?fuse=clients&action=SetDashboardGraph',
               success: function(t) {

               },
               params: {graph : encodeURIComponent(graph)}
            });
        }
    }
    function clickOnGraph()
    {
        location.href = reportURL;
    }

    function toggleInvoiceTab(divblock) {
        document.getElementById('invoicesearch_block').style.display = "none";
        document.getElementById('invoicestats_block').style.display = "none";
        document.getElementById('invoicegraphs_block').style.display = "none";

        document.getElementById('invoicestats_li').className = "";
        document.getElementById('invoicesearch_li').className = "";
        document.getElementById('invoicegraphs_li').className = "";

        document.getElementById(divblock+'_block').style.display = "";
        document.getElementById(divblock+'_li').className = "active";

    }

    function submitSearch(customerid) {
        if (trim(this.value) !=''){
            invoices_store.setBaseParam('customerid', customerid);
        }else{
            invoices_store.setBaseParam('customerid', 0);
        }
        invoices_store.load({params:{start:0}});
    }
</script>

<style type="text/css">
    .invoicelink{
        position:       relative !important;
        top:            -4px !important;
        padding-right:  5px !important;
    }
</style>

<ul id="invoicelisttabs" class="tabs  tabs-with-summary">
    <li id="invoicestats_li" class="active">
        <a href="#" onclick="javascript:toggleInvoiceTab('invoicestats');">Today's Stats</a>
    </li>
    <li id="invoicegraphs_li" style="{HIDEREPORTTAB}">
        <a href="#" onclick="javascript:toggleInvoiceTab('invoicegraphs');switchReport(0,true);">Graphs</a>
    </li>
    <li id="invoicesearch_li" class="">
        <a href="#" onclick="javascript:toggleInvoiceTab('invoicesearch');">Search</a>
    </li>
</ul>

<div id="invoicestats_block" class="table-tab-summary">
    <div class="box_long_min" style="background-color: #d9f0d3 !important; color: #006602 !important;">&nbsp;
        <span>[l]Revenue[/l] ({revenue})</span>
        <span style="color:#E7FFDF"> | </span>
        <span>[l]Invoices Generated[/l] ({invoices_generated})</span>
        <span style="color:#E7FFDF"> | </span>
        <span>[l]Sent[/l] ({invoices_sent})</span>
        <span style="color:#E7FFDF"> | </span>
        <span>[l]Paid[/l] ({invoices_paid})</span>
        <span style="color:#E7FFDF"> | </span>
        <span>[l]Overdue[/l] ({invoices_overdue})</span>
    </div>
</div>

<div id="invoicegraphs_block" class="table-tab-summary" style="display:none;height:auto !important;">
    <div style="padding-bottom:13px; padding-top:0px; padding-left:5px;">
        <div id='reportselector' style="text-align:right;padding-right:14px;padding-top:10px;">
          <form name='reportswitch' action="post">
              <span style="font-weight:bold;">Graph:</span>
              <select id="newreport" name='newreport' onChange="switchReport(this.value,false);">
                <!-- BEGIN DYNAMIC BLOCK: graph_option -->
                <option value='{option_value}'>&nbsp;{option_name}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
                <!-- END DYNAMIC BLOCK: graph_option -->
              </select>
          </form>
        </div>
        {current_graph}
    </div>
</div>

<div id="invoicesearch_block" class="table-tab-summary" style="display:none">
    <div style="float:left;">
        <input type="text" id="remote-users-invoice-search" style="width:143px !important;" />
    </div>
    <div style="float:left;padding-left:159px;"><div style="float:left;padding-top:2px;">Or</div>&nbsp;&nbsp;<input type="text" size="5" class="x-form-text x-form-field" style="color:gray;" value="User ID" onkeydown="if( (event.keyCode==13) && (isInteger(this.value) || trim(this.value) =='') ) { submitSearch(this.value); }" onfocus="this.value=''" id="userid-search" /></div>
</div>


<div style="padding:3px;"></div>

<span class="grid-meta" id="invoicelistlabel"></span>

<div id="gridheader" class="blue-box" style="padding:4px !important;">
    <table class="automation" border="0">
        <tbody>
            <tr>
                <td>
                    <div id="invoicelistdescription"></div>
                </td>
                <td align="right">
                        <table>
                        <tbody>
                        <tr>
                            <td>&nbsp;&nbsp;&nbsp;[l]Filter Type[/l]:&nbsp;&nbsp;</td>
                            <td><input type="text" id="invoicetype"/></td>
                            <td>&nbsp;&nbsp;
                                <!-- BEGIN DYNAMIC BLOCK: pricetype -->
                                <span style="float:left;margin-right:2px;padding-top:2px;">
                                    &nbsp;&nbsp;&nbsp;
                                    [l]Price[/l]:
                                </span>
                                <input type="text" id="pricetype"/>
                                &nbsp;&nbsp;
                                <!-- END DYNAMIC BLOCK: pricetype -->
                            </td>
                            <td><input type="text" id="numlistfilter"/></td>
                        </tr>
                        </tbody>
                        </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<div id="invoices-grid"></div>
<div id="invoicesdetails-totals" align="right" style="float:right;padding-top:6px;padding-right:5px;font-size:14px;font-weight:bold;color:#666666;"></div>
<div id="invoice"></div>


<!-- TODO 4.6 start migrating to richgrid
<span class="grid-meta" id="invoicelist-grid-metadata"></span>
<div id="invoicelist-grid-header" class="blue-box" style="clear:both;padding:8px !important;">
    <table class="automation">
        <tbody>
            <tr>
            	<td>Viewing Overdue Invoices</td>
                <td align="right">
                    &nbsp;&nbsp;
                </td>
                <td align="left" style="width:100px;">
                    <select id='invoicelist-grid-filterbystatus'>
	                    <option value='0'>Overdue Invoices</option>
	                    <option value='1'>Unpaid Invoices</option>
	                    <option value='2'>All Invoices</option>                   
                    </select>
                </td>
                <td align="right" style="width:80px">
                    &nbsp;&nbsp;
                </td>
                <td align="left" style="width:60px">
                    <select id='invoicelist-grid-filter' style='width:60px;'><option value='10'>10</option><option value='25'>25</option><option value='50'>50</option><option value='150'>150</option><option value='300'>300</option></select>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<div id="invoicelist-grid"></div>
<div id="invoicelist-grid-pagination"></div>
-->
