{% extends "admin/base_site.html" %}
{% load i18n %}

{% block title %}{% trans 'View Statistics' %} | {% trans 'Django site admin' %}{% endblock %}

{% block extrahead %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/chart/jquery.jqplot.min.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/chart/smoothness/jquery-ui.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL}}css/customization/Statistics.css" />

<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/jquery/jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/plugins/jqplot.highlighter.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/plugins/jqplot.cursor.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/plugins/jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/plugins/jqplot.blockRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/plugins/jqplot.enhancedLegendRenderer.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/chart/plugins/jqplot.pieRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}js/jquery.blockUI.js"></script>
<!--<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}subscribe/js/chart/plugins/jqplot.donutRenderer.js"></script>-->
{% endblock %}

{% block breadcrumbs %}
{% if not is_popup %}
<div class="breadcrumbs">
 <a href="{% url 'admin:index' %}">{% trans "Home" %}</a> &rsaquo;
 <a href="{% url 'admin:integration_app_changelist' %}">{% trans "App" %}</a> &rsaquo;
 {% trans 'View Group Statistics' %}: {{ group.name }}
</div>
{% endif %}
{% endblock %}

{% block content %}
<div id="maskDivParent">
 <h1>觀看統計</h1>
 <ul class="menu" id="menuContent">
  <li>
   <span class="titleIcon"></span>
   <select id="changeDayRange">
    <option value="week">{% trans "Last 7 days" %}</option>
    <option value="month">{% trans "The last 1 month" %}</option>
    <option value="3month">{% trans "The last 3 months" %}</option>
   </select>
   <span id="dateRange"></span>
  </li>
 </ul>
<div>
<div id="totalRates">
 <div id="totalRateTableParent">
  <p>關於表單項目的詳細說明請參考<a href="{% url 'Theophrastus.views.document' 'Statistics' %}">說明文件</a>去了解更多。</p>
  <div id="subscriberCountPie"></div>
 </div>
 {% include "GroupTotalRate.html" %}
 <div class="controlBar">
  <span>{% trans "Change number / rate:" %}</span>
  <input type="button" name="displayMode" id="changeRateMode" class="current" value="{% trans "Rate" %}" />
  <input type="button" name="displayMode" id="changeNumberMode" value="{% trans "Number" %}" />
 </div>
 <div id="totalChart"></div>
 {% include "GroupTotalChart.html" %}
</div>
<script language="javascript" type="text/javascript">
var getFormat = function() {
    var format = 'number';
    if ($('[name=displayMode].current').attr('id') == 'changeRateMode') {
        format = 'rate';
    }
    return format;
};

var getDateRange = function() {
    var dateRange = $('#changeDayRange :selected').val();
    return dateRange
};

$('#changeDayRange').change(function() {
    var dateRange = getDateRange();
    var format = getFormat();
    createTotalRateTable(dateRange, $('#totalRateTableParent'));
    createTotalChart(dateRange, $('#totalChart'), format);
});

$('[name=displayMode]').click(function() {
    var isEvent = true;
    if ($(this).hasClass('current')) {
        return false;
    }
    else {
        $('[name=displayMode]').each(function() {
            if ($(this).hasClass('current')) {
                $(this).removeClass('current');
            }
            else {
                $(this).addClass('current');
            }
        });
    }

    var dateRange = getDateRange();
    var format = getFormat();
    createTotalChart(dateRange, $('#totalChart'), format);
});

$('#changeDayRange').change();

</script>
{% endblock %}