<script type="text/javascript">
    var viewtickets = {};
    viewtickets.searchfilter = "{searchfilter}";
    searchcustomerid = "{searchcustomerid}";
    defaultfiltername = "{defaultfiltername}";

    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 : "id",dir: "asc"},"displaysize":10,"tickettypefilter":"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('ticketlisttabs').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 toggleSupportTab(divblock) {
        document.getElementById('ticketsearch_block').style.display = "none";
        document.getElementById('ticketstats_block').style.display = "none";
        document.getElementById('ticketrefresh_block').style.display = "none";
        document.getElementById('ticketgraphs_block').style.display = "none";

        document.getElementById('ticketstats_li').className = "";
        document.getElementById('ticketsearch_li').className = "";
        document.getElementById('ticketrefresh_li').className = "";
        document.getElementById('ticketgraphs_li').className = "";

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

    <!-- BEGIN DYNAMIC BLOCK: callTicketSummaries -->
    callTicketSummaries();
    <!-- END DYNAMIC BLOCK: callTicketSummaries -->

</script>

<ul id="ticketlisttabs" class="tabs  tabs-with-summary">
    <li id="ticketstats_li" class="active">
        <a href="#" onclick="javascript:toggleSupportTab('ticketstats');">Today's Stats</a>
    </li>
    <li id="ticketgraphs_li"  style="{HIDEREPORTTAB}">
        <a href="#" onclick="javascript:toggleSupportTab('ticketgraphs');switchReport(0,true);">Graphs</a>
    </li>
    <li id="ticketsearch_li" class="">
        <a href="#" onclick="javascript:toggleSupportTab('ticketsearch');">Search</a>
    </li>
    <li id="ticketrefresh_li" class="">
        <a href="#" onclick="javascript:toggleSupportTab('ticketrefresh');">Refresh Rate</a>
    </li>
</ul>

<div id="ticketsearch_block" class="table-tab-summary" style="display:none;">
    <input type="text" class="x-form-text x-form-field" value="" onkeydown="if(event.keyCode==13) SearchTroubleTickets();" style="width:400px;float:left;" id="ticketsearchinput" name="ticketsearchinput" />
    <div style="float:left;padding-left:10px;">
        <select id="searchtype"><option value="0">[l]All Words[/l]</option><option value="1">[l]Exact[/l]</option></select>
    </div>
    <div style="float:left;padding-left:80px;"><input style="margin-left:14px;margin-bottom:5px;" type="checkbox" id="includeclosed" name="includeclosed" />&nbsp;&nbsp;[l]Include Closed Tickets[/l]</div>
</div>

<div id="ticketstats_block" class="table-tab-summary">
    <div class="box_long_min" style="background-color: #d9f0d3 !important; color: #006602 !important;">&nbsp;
        <span>[l]Opened[/l] ({TicketsOpenedToday})</span>
        <span style="color:#E7FFDF"> | </span>
        <span>[l]Closed[/l] ({TicketsClosedToday})</span>
        <span style="color:#E7FFDF"> | </span>
        <span>[l]Replies[/l] ({TicketRepliesTpday})</span>
        <span style="color:#E7FFDF"> | </span>
        <span>[l]Rated[/l] ({TicketsRatedToday})</span>
    </div>
</div>

<div id="ticketgraphs_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="ticketrefresh_block" class="table-tab-summary" style="display:none;">
    <div style="margin-top:5px;float:left;">Refresh grid &nbsp;&nbsp;</div><div style="margin-top:3px;float:left;"><select id="refreshgridrate"><option value="0">Never</option><option value="1">[l]Every 1 Minute[/l]</option><option value="5">[l]Every 5 Minute[/l]</option><option value="15">[l]Every 15 Minute[/l]</option></select></div>
</div>

<div style="padding-top:15px;"></div>

<!-- BEGIN DYNAMIC BLOCK: advancedsearchblock -->
<div id="searchquerynoticebox" class="notice">
    <div class="inside">
        <p>
            <span style="float:left;">
                <b>[l]Filter Type[/l]</b>: <span style="background:#FFFFCC none repeat scroll 0 0;text-transform: capitalize;">{advancedsearchtypepretty}</span><br/>
                <!-- BEGIN DYNAMIC BLOCK: advancedsearchblock_customerfilter -->
                <b>[l]Customer Name[/l]</b>: <span style="background:#FFFFCC none repeat scroll 0 0;">{customername}</span>
                <!-- END DYNAMIC BLOCK: advancedsearchblock_customerfilter -->
            </span>
            <span style="float:right;position:relative;top:-4px;">
                <input type="button" onclick="location.href = 'index.php?fuse=support&view=ViewTickets&searchfilter=open'" id="clearquerybutton" class="button" value="[l]Clear Query[/l]"/>
            </span>
        </p>
    </div>
</div>
<!-- END DYNAMIC BLOCK: advancedsearchblock -->


<!-- BEGIN DYNAMIC BLOCK: customsearchblock -->
<div id="customquerynoticebox" style="display:{customquerynoticebox_display}" class="notice">
    <div class="inside">
        <p>
            <b>[l]Custom Filter Query as[/l]</b>: <input type="text" id="filtername" value='Unsaved Filter'/> <input style="width:10px;" id="filterprivate" type="checkbox"/> [l]Private[/l]<br/>
            <input type="button" id="updatecustomfilter" style="display:inline !important; margin-left:0px !important;" class="button" value="[l]Update Filter[/l]"/>
            <input type="button" id="deletecustomfilter" style="display:none;" class="button" value="[l]Delete Filter[/l]"/>
            <br/><br/>
        </p>
    </div>
</div>
<!-- END DYNAMIC BLOCK: customsearchblock -->
<span class="grid-meta" id="ticketlistlabel"></span>

<div class="blue-box" style="padding:4px !important;">
    <table class="automation">
        <tbody>
            <tr>
                <td>
                    <span id="ticketlisttablelabel">Loading..</span>
                </td>
                <td align="right" style="width:80px">[l]Display[/l]: &nbsp;&nbsp;</td>
                <td align="left"  style="width:60px">
                    <input type="text" id="displayticketscount-with-qtip" size="20"/>
                </td>
            </tr>
        </tbody>
    </table>
</div>

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

<script type="text/javascript">ViewTickets();</script>