{*include file="$templateSource/html/stat/admin_statsHeader.html"*}
<script type="text/javascript">
	// Callback that creates and populates a data table, 
	// instantiates the pie chart, passes in the data and
	// draws it.
	function drawChart() {
		// Create our data table.
		var data = new google.visualization.DataTable();
		data.addColumn('date', '{'Date'|gettext}');
		{foreach from=$statShow item=statId}
		data.addColumn('number', '{\Crowdicity\Stat::translatedStatTypes($vars.stat_type[$statId].fullName)}');
		{/foreach}
		data.addRows([
		{foreach from=$finalData item=cFinalData key=date name=dataLoop}
			[{*
				*}new Date({$cFinalData.JSDate[0]},{$cFinalData.JSDate[1]},{$cFinalData.JSDate[2]}){*
				*}{if $cFinalData|@count ne 0},{/if}{*
				*}{foreach from=$cFinalData item=stat key=statKey name=statList}{*
					*}{if $statKey ne "JSDate"}{$stat}{if $smarty.foreach.statList.last ne true},{/if}{/if}{*
				*}{/foreach}{*
			*}]{*
			*}{if $smarty.foreach.dataLoop.last ne true},{/if}
		  
		{/foreach}
		]);
		
		// Instantiate and draw our chart, passing in some options.
		var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
		chart.draw(data, { width: 750, height: 300, is3D: true, title: '{'Statistics'|gettext}', displayAnnotations:false, displayZoomButtons:false });
	}
    
    // Set a callback to run when the Google Visualization API is loaded.
	// google.setOnLoadCallback(drawChart);
	
	var selectedCalendarDate=new Date({$JSendDate[0]},{$JSendDate[1]},{$JSendDate[2]});
	var statDateRange=new Array();
	statDateRange[0]=new Date({$JSstartDate[0]},{$JSstartDate[1]},{$JSstartDate[2]});
	statDateRange[1]=new Date({$JSendDate[0]},{$JSendDate[1]},{$JSendDate[2]});
	var monthNames=new Array();
	monthNames[0]='{'January'|gettext}';
	monthNames[1]='{'February'|gettext}';
	monthNames[2]='{'March'|gettext}';
	monthNames[3]='{'April'|gettext}';
	monthNames[4]='{'May'|gettext}';
	monthNames[5]='{'June'|gettext}';
	monthNames[6]='{'July'|gettext}';
	monthNames[7]='{'August'|gettext}';
	monthNames[8]='{'September'|gettext}';
	monthNames[9]='{'October'|gettext}';
	monthNames[10]='{'November'|gettext}';
	monthNames[11]='{'December'|gettext}';
	{literal}
	calendar_displayMonth=function(targetDate,targetElement,dateRanges){
		var daysInMonth=32-new Date(targetDate.getFullYear(),targetDate.getMonth(),32).getDate();

		//Get a "clean" date starting at the first of the month
		var month=new Date(targetDate.getFullYear(),targetDate.getMonth(),1);
		var dow=month.getDay();
		var monthHTML='';
		
		if (dow>0){
			monthHTML='<tr>';
			monthHTML+='<td>&nbsp;</td>'.times(dow);
		}
		
		var dateRangesStart=new Array();
		var dateRangesEnd=new Array();
		if (dateRanges==undefined){
			var dateRanges=new Array();	
		}
	
		var dateRangesCount=0;
		for(var dateRangesCount=0;dateRangesCount<dateRanges.length;dateRangesCount++){
			if ((dateRangesCount+2)%2==0){
				dateRangesStart.push(dateRanges[dateRangesCount]);				
			} else {
				dateRangesEnd.push(dateRanges[dateRangesCount]);
			}
		}
		
		var selectedDayText="";
		var thisDate;
		var dateRangeCount;
		for(var i=1;i<=daysInMonth;i++){
			if (dow==0){
				monthHTML+="<tr>";
			}
			
			selectedDayText="";
			for(dateRangeCount=0;dateRangeCount<dateRangesStart.length;dateRangeCount++){
				thisDate=new Date(targetDate.getFullYear(),targetDate.getMonth(),i);
				if ((dateRangesStart[dateRangeCount].getTime()<=thisDate.getTime()) && (dateRangesEnd[dateRangeCount].getTime()>=thisDate.getTime())){
					selectedDayText=" daySquare_selected";
				}
			}
			
			monthHTML+='<td class="daySquare'+selectedDayText+'" id="calendar_daySquare:'+targetDate.getFullYear()+'-'+targetDate.getMonth()+'-'+i+'">'+i+'</td>';
			dow=dow+1;
			if (dow>6){ dow=0; monthHTML+='</tr>'; }
		}
		if (dow!=0){
			monthHTML+="</tr>";
		}
		
		$(targetElement).update('<table cellspacing="0" class="GB_calendar" id="GBcalendar_table:'+targetDate.getFullYear()+'-'+targetDate.getMonth()+'"><tr><td colspan="7" class="monthHeader">'+monthNames[month.getMonth()]+' '+targetDate.getFullYear()+'</td></tr><tr><td class="daySquareH">S</td><td class="daySquareH">M</td><td class="daySquareH">T</td><td class="daySquareH">W</td><td class="daySquareH">T</td><td class="daySquareH">F</td><td class="daySquareH">S</td></tr>'+monthHTML+'</table>');
		
		var GB_calendar_respondToClick=function(event){
			var clickedRow = event.findElement('td');
			if ( (clickedRow) && (clickedRow.hasClassName("daySquare")) ) {
				var idBits=clickedRow.id.split(":");
				var dateBits=idBits[1].split("-");
				Event.fire(clickedRow,"GB_calendar:dateSelected",{date:new Date(dateBits[0],dateBits[1],dateBits[2]),parentElement:this.up()});
                event.stop();   // This shouldn't be necessary, but it seems to 
                                // stop the drop-down wierding out (ie 
                                // disappearing - calling doDropDown as button)
			}
		}

		$(targetElement).select('.GB_calendar')[0].stopObserving('click', GB_calendar_respondToClick);
		$(targetElement).select('.GB_calendar')[0].observe('click', GB_calendar_respondToClick);
	}
	{/literal}  
        
</script>

<div class="stats_graphRightBar" {if !$vars.ajax}style="display:none;"{/if}>
    <form method="post" action="/stat/admin_view">
        <input type="hidden" name="action" value="updateStats" />
        <div class="GB_dropDownArea">
            <a href="#" class="GB_dropDownButton GB_dropDownButtonStyle" id="GB_dropDownButton:statsCalendar"><span class="GB_dropDownButtonInner" id="GB_dropDownButton_inner:statsCalendar"><b>{$startDate|date_format}</b> to <br/><b>{$endDate|date_format}</b></span></a>
            <div class="GB_dropDownArea_inner GB_dropDownArea_inner_autoWidth GB_dropDownArea_persist" style="display:none;" id="GB_dropDownArea_inner:statsCalendar">
                <div class="GB_dropDownArea_padding">
                    <a href="#" id="monthPrev" class="monthChangeButton monthChangeButton_right" onclick="selectedCalendarDate=new Date(selectedCalendarDate.getFullYear(),selectedCalendarDate.getMonth()-1,1);calendar_displayMonth(selectedCalendarDate,'calendarBox',statDateRange);return false;">&lt;</a>
                    <a href="#" id="monthNext" class="monthChangeButton monthChangeButton_left" onclick="selectedCalendarDate=new Date(selectedCalendarDate.getFullYear(),selectedCalendarDate.getMonth()+1,1);calendar_displayMonth(selectedCalendarDate,'calendarBox',statDateRange);return false;">&gt;</a>
                    <div id="calendarBox" class="left"></div>
                    <div class="clear"><!--IE--></div>
                    <div id="calendarSelectMessage"></div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var calendarMode=0;
            calendar_displayMonth(selectedCalendarDate,'calendarBox',statDateRange);
            $('calendarBox').observe("GB_calendar:dateSelected", function(event) {
                if ((calendarMode==0) || (calendarMode==1 && event.memo.date.getTime()>=statDateRange[0].getTime())){
                    if ( (calendarMode==0) && (event.memo.date.getTime()>statDateRange[1].getTime()) ){
                        statDateRange[1]=event.memo.date;
                    }
                    statDateRange[calendarMode]=event.memo.date;

                    if (calendarMode==1){
                        GB_doDropDown('GB_dropDownButton:statsCalendar');
                    }
                    calendarMode=Math.abs(calendarMode-1); //Toggle between start and end dates
                    setCalendarMessage();
                    calendar_displayMonth(selectedCalendarDate,'calendarBox',statDateRange);
                    updateChosenDateRange();
                } else {
                    alert('Please choose a date after the first date');
                }
            });
            var setCalendarMessage=function(){
                if (calendarMode==0){
                    $('calendarSelectMessage').update("{'Select a start date'|gettext}");
                } else {
                    $('calendarSelectMessage').update("{'Select an end date'|gettext}");						
                }
            }
            var updateChosenDateRange=function(){
                $('GB_dropDownButton_inner:statsCalendar').update(monthNames[statDateRange[0].getMonth()].substr(0,3)+' '+statDateRange[0].getDate()+', '+statDateRange[0].getFullYear()+' to <br />'+monthNames[statDateRange[1].getMonth()].substr(0,3)+' '+statDateRange[1].getDate()+', '+statDateRange[1].getFullYear());
                // DATE FIX
                var finalStartTime=(statDateRange[0].getTime()/1000)-(statDateRange[0].getTimezoneOffset()*60);
                $('startDate').setValue(finalStartTime);
                var finalEndTime=(statDateRange[1].getTime()/1000)-(statDateRange[1].getTimezoneOffset()*60);
                $('endDate').setValue(finalEndTime);
            }
            setCalendarMessage();
        </script>
        <div class="clear"><!--IE--></div>
        <ul class="mdl-form__group">
          <li class="mdl-form__item m-0">
            <label class="mdl-form__label -inline">
              <input type="checkbox" name="statShow[]" value="2" {if in_array(2,$statShow)}checked="checked"{/if} class="mdl-form__input -checkbox">
              <span {if !in_array(2,$statShow)}class="lightGrey"{/if}>{'Ideas'|gettext} {if isset($statCount.s2)}({$statCount.s2}){/if}</span>
            </label>
          </li>
          <li class="mdl-form__item -inline m-0">
            <label class="mdl-form__label -inline">
              <input type="checkbox" name="statShow[]" value="3" {if in_array(3,$statShow)}checked="checked"{/if} class="mdl-form__input -checkbox">
              <span {if !in_array(3,$statShow)}class="lightGrey"{/if}>{'Comments'|gettext} {if isset($statCount.s3)}({$statCount.s3}){/if}</span>
            </label>
          </li>
          <li class="mdl-form__item -inline m-0">
            <label class="mdl-form__label -inline">
              <input type="checkbox" name="statShow[]" value="1" {if in_array(1,$statShow)}checked="checked"{/if} class="mdl-form__input -checkbox">
              <span {if !in_array(1,$statShow)}class="lightGrey"{/if}>{'Votes'|gettext} {if isset($statCount.s1)}({$statCount.s1}){/if}</span>
            </label>
          </li>
          <li class="mdl-form__item -inline m-0">
            <label class="mdl-form__label -inline">
              <input type="checkbox" name="statShow[]" value="6" {if in_array(6,$statShow)}checked="checked"{/if} class="mdl-form__input -checkbox">
              <span {if !in_array(6,$statShow)}class="lightGrey"{/if}>{'New users'|gettext} {if isset($statCount.s6)}({$statCount.s6}){/if}</span>
            </label>
          </li>
          <li class="mdl-form__item -inline m-0">
            <label class="mdl-form__label -inline">
              <input type="checkbox" name="statShow[]" value="4" {if in_array(4,$statShow)}checked="checked"{/if} class="mdl-form__input -checkbox">
              <span {if !in_array(4,$statShow)}class="lightGrey"{/if}>{'Idea views'|gettext} {if isset($statCount.s4)}({$statCount.s4}){/if}</span>
            </label>
          </li>
          <li class="mdl-form__item -inline m-0">
            <label class="mdl-form__label -inline">
              <input type="checkbox" name="statShow[]" value="5" {if in_array(5,$statShow)}checked="checked"{/if} class="mdl-form__input -checkbox">
              <span {if !in_array(5,$statShow)}class="lightGrey"{/if}>{'Page views'|gettext} {if isset($statCount.s5)}({$statCount.s5}){/if}</span>
            </label>
          </li>
        </ul>
        
        <input type="hidden" name="startDate" id="startDate" value="{$startDate}" />
        <input type="hidden" name="endDate" id="endDate" value="{$endDate}" />
        <p><input type="submit" class="mdl-button" value="{'Update'|gettext}" /></p>
    </form>
</div>
<div id="chart_div" style="width:750px;height:300px;"></div>
<div class="clear"><!--IE--></div>
<script type="text/javascript">
    {if !$vars.ajax}
    document.observe("dom:loaded", function() { 
        jQuery('.stats_graphRightBar').show();
    {/if}
        {foreach from=$statShow item=statId}
        chart=new Chart;
        chart.init('statsMain','score',{
            'title':'{\Crowdicity\Stat::translatedStatTypes($vars.stat_type[$statId].fullName)}',
            'axisTitles':[''],
            'axisValues':[[{*
                *}{foreach from=$finalDataCols.$statId item=stat name=statList}{*
                    *}{$stat}{if $smarty.foreach.statList.last ne true},{/if}{*
                *}{/foreach}{*
            *}]]

        });
        {/foreach}
        
        //drawChart();
        google.setOnLoadCallback(drawChart);
    {if !$vars.ajax}  
    });
    {/if}
</script>
<div id="statsMain">

</div>