{* Additional stylesheets required by the report *}
<link href="css/icons.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/report.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/graph.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/ui.datepicker.css" rel="stylesheet" type="text/css" media="all" />
  
{* Additional JS required by the report *}
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.datepicker-mod.js"></script>
<script type="text/javascript" src="js/ox.reports.js"></script>
<script type="text/javascript" src="js/json2.js"></script>

<div class="report">

  <div id="date-range" title="Apr 22, 2009 - Apr 28, 2009">
    <label>Date range: </label><span class="iconCalendar inlineIconAfter" title="{$selectedDateRangeName}">{$selectedDateRangeName}</span>
  </div>
 
  <div id="date-range-picker">
    <div id="date-range-picker-controls">
      <div id="date-range-picker-start-date">
        Start date
        <div></div>
      </div>
      <div id="date-range-picker-end-date">
        End date
        <div></div>
        <button id="date-range-picker-done" class="save">Done</button>
      </div>
      <ul>
        {* Generate links for the predefined time periods below *}
        {foreach from=$availableDateRanges key=label item=range}
        	<li><a title="{$range.0} - {$range.1}"
        		{if $range.0==$startDate && $range.1==$endDate}class="current"{/if}
        		href="{url startDate=$range.0 endDate=$range.1}">{$label}</a></li>
        {/foreach} 
{*        <li><a  id="last-7-days" title="Apr 22, 2009 - Apr 28, 2009" href="#">Last 7 days</a></li> *}
        {* No need to change the link here, see below for the link template generated by the date picker *}
        <li><a href="#" class="range">Specific date range</a></li>
      </ul>
    </div>
  </div>
  
{if !$isThereAnyData}
  <div class="video_plugin_header">
	<h2> There is no Video Events data for this {$entityName} for the selected date range: {$startDate} - {$endDate}.</h2>
  </div>
{else}
  {* Main chart *}
  <div class="video_plugin_header">
    <a name="evolution"></a><h2>Views</h2>
  </div>
 
  <div class="graph">
    <div id="single_chart"></div>
    <div class="diagram_corner top_left"></div>
    <div class="diagram_corner top_right"></div>
    <div class="diagram_corner bottom_left"></div>
    <div class="diagram_corner bottom_right"></div>
  </div>

  {*
     Events history table. Please note that this mock-up shows both the table and the 
     chart (below), but the real report should show only one of those depending on the
     option chosen in the "Show as" dropdow.
   *}
   
  <div class="video_plugin_header">
    <div class="export">
      <a class="inlineIcon iconCsv" href="{url exportCsv=1}">Export as CSV</a>
    </div>
    <a name="table"></a><h2>Views events history</h2>
  </div>
  <div class="tableWrapper" style="clear: both">
    <div class='tableHeader'>  
      <ul class='tableFilters'>
        <li>
          <div class='label'>View by</div>  
          <div class='dropDown'>
            <span><span>{$availableDimensions.$selectedDimension}</span></span>  
            <div class='panel'>
              <div>
                <ul>
                	{foreach from=$availableDimensions key=dimensionId item=dimensionName}
	                  <li><a href="{url dimension=$dimensionId}">{$dimensionName}</a></li>
    	            {/foreach}
                </ul>
              </div>
            </div>
            <div class='mask'></div>
          </div>
        </li>
        <li>
          <div class='label'>Show as</div>  
          <div class='dropDown'>
            <span><span>{$availableShowAs.$selectedShowAs}</span></span>
            <div class='panel'>
              <div>
                <ul>
                {foreach from=$availableShowAs key=showAsId item=showAsName}
                  <li><a href="{url showAs=$showAsId}">{$showAsName}</a></li>
   	            {/foreach}
                </ul>
              </div>
            </div>
            <div class='mask'></div>
          </div>
        </li>    
      </ul>
      <div class='clear'></div>
      <div class='corner left'></div>
      <div class='corner right'></div>
    </div> 
    {if $selectedShowAs == 'table'}
    	{include file='table.html'}
    {else}
	    <table cellspacing="0" border="0">
	      <tbody> 
	        <tr class="empty">
	          <td>
	            <div class="graph_table">
	              <div id="multi_chart">{if !$dataForBottomGraphInJsonFormat}<big>There is not enough data to display this graph.</big> {/if}</div>
	              <div class="diagram_corner top_left"></div>
	              <div class="diagram_corner top_right"></div>
	              <div class="diagram_corner bottom_left"></div>
	              <div class="diagram_corner bottom_right"></div>
	            </div>
	          </td>
	        </tr>
	      </tbody>
	    </table>
    {/if}
  </div>
  
	<script type="text/javascript">
	{* Embeds the main chart Flash *}
	{literal}
	function getDataTopGraph()
	{
		var graphDataToDisplay = {/literal}{$dataForTopGraphInJsonFormat}{literal};
	    return JSON.stringify(graphDataToDisplay);
	}
	function getDataBottomGraph()
	{
		var graphDataToDisplay = {/literal}{if isset($dataForBottomGraphInJsonFormat)}{$dataForBottomGraphInJsonFormat}{else}''{/if}{literal};
	    return JSON.stringify(graphDataToDisplay);
	}
	{/literal}
	{literal}
	swfobject.embedSWF(
	  "lib/open-flash-chart.swf", "single_chart",
	  "100%", "120", "9.0.0", "lib/expressInstall.swf",
	  {"get-data":"getDataTopGraph"},
	  {"wmode":"opaque"} 
	);
	{/literal}
	
	{* Embeds the events history chart Flash *}
	{if $dataForBottomGraphInJsonFormat}
		{literal}
		swfobject.embedSWF(
		  "lib/open-flash-chart.swf", "multi_chart",
		  "100%", "250", "9.0.0", "lib/expressInstall.swf",
		  {"get-data":"getDataBottomGraph"},
		  {"wmode":"opaque"} 
		);
		{/literal}
	{/if}
	</script>
{/if}
</div>

{* Date picker initialization *}
<script type="text/javascript">//<![CDATA[
  {* 
    Tempalte of the URLs generated by the "Specific date range" option. _start_ and _end_
    will be replaced by the selected dates in "yyyy-mm-dd" format. startDate and endDate
    determine the initial selection of the date pickers. 
   *}
  var urlTemplate = "{url startDate=_start_ endDate=_end_}";
  var startDate = "{$thirtyDaysAgo}";
  var endDate = "{$today}";

{literal}
  $(document).ready(function() {
    $("#date-range").daterangepicker("#date-range-picker", "#date-range-picker-done", urlTemplate, startDate, endDate);
  });
//]]></script>
{/literal}
