<script type="text/javascript">
    var columnsavedstate = '{COLUMNSAVEDSTATE}';
    if(columnsavedstate !="") {
        columnsavedstate = Ext.util.JSON.decode(columnsavedstate);
    }
    var gridsavedstate = '{GRIDSAVEDSTATE}';
    if(gridsavedstate!=""){
        gridsavedstate = Ext.util.JSON.decode(gridsavedstate);
    } else {
        //set default settings
        gridsavedstate = Ext.util.JSON.decode('{"sortinfo":{field : "dateactivated",dir: "asc"},"displaysize":10,"usertypefilter":"allclients"}');
    }

    //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('clientlisttabs').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 toggleClientTab(divblock) {
        document.getElementById('clientsearch_block').style.display = "none";
        document.getElementById('clientstats_block').style.display = "none";
        document.getElementById('clientgraphs_block').style.display = "none";

        document.getElementById('clientstats_li').className = "";
        document.getElementById('clientsearch_li').className = "";
        document.getElementById('clientgraphs_li').className = "";

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

</script>

<ul id="clientlisttabs" class="tabs tabs-with-summary">
    <li id="clientstats_li" class="active">
        <a href="#" onclick="javascript:toggleClientTab('clientstats');">Today's Stats</a>
    </li>
    <li id="clientgraphs_li" style="{HIDEREPORTTAB}">
        <a href="#" onclick="javascript:toggleClientTab('clientgraphs');switchReport(0,true);">Graphs</a>
    </li>
    <li id="clientsearch_li" class="">
        <a href="#" onclick="javascript:toggleClientTab('clientsearch');">Search</a>
    </li>
</ul>

<div id="clientstats_block" class="table-tab-summary">
    <div class="box_long_min" style="background-color: #d9f0d3 !important; color: #006602 !important;">&nbsp;
        <span>[l]New Customers[/l] ({NewCustomersToday})</span>
        <span style="color:#E7FFDF"> | </span>
        <span>[l]Customers Seen[/l] ({CustomersSeenToday})</span>
    </div>
</div>
<div id="clientgraphs_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="clientsearch_block" class="table-tab-summary" style="display:none;height:auto !important;">
    <div style="padding-bottom:13px; padding-top:0px; padding-left:5px;">
        {SEARCH}
    </div>
</div>

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

<span class="grid-meta" id="clientlistlabel"></span>
<div class="blue-box" style="padding:4px !important;">
    <table class="automation">
        <tbody>
            <tr>
                <td>
                    <!-- BEGIN DYNAMIC BLOCK: hasaddpermissions -->
                    <div id="adduserbutton"></div>
                    <!-- END DYNAMIC BLOCK: hasaddpermissions -->
                </td>
                <td align="right">[l]Filter Type[/l]: &nbsp;&nbsp;</td>
                <td align="left" style="width:100px;">
                    <input type="text" id="usertype" size="50"/>
                </td>
                <td align="right" style="width:80px">[l]Display[/l]: &nbsp;&nbsp;</td>
                <td align="left" style="width:60px">
                    <input type="text" id="local-states-with-qtip" size="20"/>
                </td>
            </tr>
        </tbody>
    </table>
</div>


<div>
    <div id="topic-grid"></div>
</div>