<?php TPL::output('admin/global/header.tpl.htm'); ?>

<!--left-->
<?php TPL::output('admin/global/left.tpl.htm'); ?>
<!--left-->

<!-- main -->
<div id="main-content">
	<div class="clear"></div>
	
	<div class="content-box">
		<div class="content-box-header">
			<h3><?php echo $this->crumb['last']['name']; ?></h3>
			<ul class="content-box-tabs">
				<li><a href="admin/statistic/register/"<?php if ($_GET['act'] == 'register' OR !$_GET['act'] OR $_GET['act'] == 'index') { ?> class="current"<?php } ?>>Register statistics</a></li>
				<li><a href="admin/statistic/question/"<?php if ($_GET['act'] == 'question') { ?> class="current"<?php } ?>>Question statistics</a></li>
				<li><a href="admin/statistic/answer/"<?php if ($_GET['act'] == 'answer') { ?> class="current"<?php } ?>>Reply statistics</a></li>
				<li><a href="admin/statistic/topic/"<?php if ($_GET['act'] == 'topic') { ?> class="current"<?php } ?>>Topic statistics</a></li>
			</ul>
			<div class="clear"></div>
		</div>
		<div class="content-box-content">
			<p>
				<form action="" method="post">
				<label>Statistics time period:</label>
				<input type="text" value="<?php if ($_POST['start_time']) { echo $_POST['start_time']; } else { echo date('Y-m-d', strtotime('Last week')); } ?>" name="start_time" class="text-input date_picker" style="width:150px;" /> - <input type="text" value="<?php if ($_POST['end_time']) { echo $_POST['end_time']; } else { echo date('Y-m-d', strtotime('Today')); } ?>" name="end_time" class="text-input date_picker" style="width:150px;" /> <input type="submit" value="Confirm" class="button" />
				</form>
			</p>

			<div id="chartdiv" style="width: 100%; height: 400px;"></div>
			
			<div style="background:#CCCCCC; margin-top:10px;">
			<table width="100%">
				<thead>
					<tr>
						<th colspan="4">Statistics</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Total number</td>
						<td><?php echo $this->total_count; ?></td>
						<td>Increase this month</td>
						<td><?php echo $this->month_count; ?></td>
					</tr>
					<tr>
						<td>Increase today</td>
						<td><?php echo $this->today_count; ?></td>
						<td>Increase this week</td>
						<td><?php echo $this->week_count; ?></td>
					</tr>
					<?php if ($this->valid_count) { ?>
					<tr>
						<td>Email verification</td>
						<td><?php echo $this->valid_count; ?></td>
						<td colspan="2"></td>
					</tr>
					<?php } ?>
					<?php if ($this->question_with_answer_count) { ?>
					<tr>
						<td>Questions already replied</td>
						<td><?php echo $this->question_with_answer_count; ?></td>
						<td colspan="2"></td>
					</tr>
					<?php } ?>
				</tbody>
			</table>
			</div>
			
			
		</div>
	</div>
	
<script type="text/javascript">
$(document).ready(function () {
	var chart;
    var chartData = [<?php foreach($this->statistic_list as $key => $val){ ?>{date : new Date(<?php echo date('Y', $val['date']); ?>, <?php echo intval(date('m', $val['date'])) - 1; ?>, <?php echo date('d', $val['date']); ?>), visits : <?php echo $val['visits']; ?>}, <?php } ?>];
    var chartCursor;

    AmCharts.ready(function () {
		
		AmCharts.shortMonthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

        // SERIAL CHART    
        chart = new AmCharts.AmSerialChart();
        chart.pathToImages = GET_STATIC_URL + "/admin/js/amcharts/images/";
        chart.panEventsEnabled = true;
        chart.zoomOutButton = {
            backgroundColor: "#000000",
            backgroundAlpha: 0.15
        };
        chart.dataProvider = chartData;
        chart.categoryField = "date";
        chart.marginRight = 0;
        chart.balloon.bulletSize = 5;

        // listen for "dataUpdated" event (fired when chart is rendered) and call zoomChart method when it happens
        chart.addListener("dataUpdated", zoomChart);

        // AXES
        // category
        var categoryAxis = chart.categoryAxis;
        categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
        categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
        categoryAxis.dashLength = 1;
        categoryAxis.gridAlpha = 0.15;              
        categoryAxis.axisColor = "#DADADA";

        // value                
        var valueAxis = new AmCharts.ValueAxis();
        valueAxis.axisAlpha = 0;
        valueAxis.dashLength = 1;
        chart.addValueAxis(valueAxis);

        // GRAPH
        var graph = new AmCharts.AmGraph();
        graph.title = "User Register statistics";
        graph.valueField = "visits";
        graph.bullet = "round";
        graph.bulletBorderColor = "#FFFFFF";
		graph.bulletBorderThickness = 2; 
        graph.lineThickness = 2;
        graph.lineColor = "#5fb503";
        graph.negativeLineColor = "#efcc26";
        graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
        chart.addGraph(graph);

        // CURSOR
        chartCursor = new AmCharts.ChartCursor();
        chartCursor.cursorPosition = "mouse";
        chartCursor.pan = true; // set it to fals if you want the cursor to work in "select" mode
        chart.addChartCursor(chartCursor);

        // SCROLLBAR
        var chartScrollbar = new AmCharts.ChartScrollbar();
        chartScrollbar.graph = graph;
        chartScrollbar.autoGridCount = true;
        chartScrollbar.scrollbarHeight = 25;
        chart.addChartScrollbar(chartScrollbar);

        // WRITE
        chart.write("chartdiv");
    });

    function zoomChart() {
        chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
    }
});

</script>

<!-- footer -->
<?php TPL::output('admin/global/footer.tpl.htm'); ?>
<!-- footer -->

</div>
<!-- main -->

</div>

</body>
</html>