{% load i18n %}
<div id="maskDivParent">
    <h1>{% trans 'Statistics of ' %} {{ title }}</h1>
</div>
<div id="totalRates">
    <div id="totalRateTableParent">
        <p>{% trans 'Check for ' %}
            <a href="{% url 'Theophrastus.views.document' 'Statistics' %}">{% trans 'our statistics documents' %}</a> {% trans 'for details of each statistics items.'  %}</p>
        <div id="subscriberCountPie"></div>
    </div>
    {% include "TotalRate.html" with getTotalRateAjaxUrl=getTotalRateAjaxUrl %}

    <input type="button" onclick="location.href='{{ historyLink }}';" value="{% trans " Go to history " %}" />
    <input type="button" onclick="location.href='{{ subscribersLink }}';" value="{% trans "Go to subscribers " %}" />
    <div class="controlBar">
        <div>
            <select id="changeDayRange">
                <option id='weekDayRange' value="week">{% trans "Last 7 days" %}</option>
                <option id='monthDayRange' value="month">{% trans "The last 1 month" %}</option>
                <option id='3monthDayRange' value="3month">{% trans "The last 3 months" %}</option>
                <option value="other">{% trans 'Custom date range' %}</option>
            </select>
            <div id='customDayRange' style="display:inline">
                From
                <input class="inputDate" id="fromDate" />
                </p>
                To
                <input class="inputDate" id="toDate" />
            </div>
        </div>
        <div>
            <span>{% trans "Change number / rate:" %}</span>
            <select id="displayMode">
                <option id='changeRateMode' value="rate">{% trans "Rate" %}</option>
                <option id='changeNumberMode' value="number">{% trans "Number" %}</option>
            </select>
        </div>
        <div>
            <span>{% trans 'Change accumulate / single' %}</span>
            <select id="calculateMode">
                <option id='accMode' value="accumulate">{% trans 'Accumulate' %}</option>
                <option id='singleMode' value="single">{% trans 'Single' %}</option>
            </select>
        </div>
        <div id="changeHistoryDiv"style="display:none">
            <span>{% trans 'Change history mode: history / general' %}</span>
            <select id="historyMode">
                <option id='general' value="general">{% trans 'General' %}</option>
                <option id='history' value="history">{% trans 'History' %}</option>
            </select>
        </div>
        <div>
            <button class="backBtn" type="button">{% trans 'Back' %}</button>
        </div>
        <span id="dateRange"></span>
    </div>
    <div id="loading">
        <img src="{{ STATIC_URL }}images/base/Load_24.gif" style="width:10px" /> loading...</div>
    <div id="totalChart"></div>
    {% include "TotalChart.html" %}
</div>
<script language="javascript" type="text/javascript">
    /*var update = function(dateRange) {
    
        // Loading icon and mask.
        /*$('#maskDivParent').block({
            message: maskMessage,
            css: {
                border: 'none',
                padding: '15px',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: 0.5,
                color: '#fff'
            }
        });*/

    /*var checkCompleteTimer = setInterval(function() {
        if (ajaxCounter == 7) {
            $('#loadingImg').remove();
            // Init loading counter value.
            ajaxCounter = 0;
            clearInterval(checkCompleteTimer);
        }
    }, 300);*/

    //};

    var dateType = 'range';

    var getFormat = function () {
        var format = 'number';
        format = $('#displayMode :selected').val();
        return format;
    };

    var getCalculateMode = function () {
        var mode = 'single';
        mode = $('#calculateMode :selected').val();
        return mode;
    };

    var getHistoryMode = function () {
        var mode = 'general';
        mode = $('#historyMode :selected').val();
        return mode;
    };

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

    $('#customDayRange').hide();
    $('.backBtn').hide();

    $('#changeDayRange').change(function () {
        var $selectedValue = $('#changeDayRange :selected').val()
        if ($selectedValue == "other") {
            $('#changeDayRange').hide();
            $('#customDayRange').show();
            $('.backBtn').show();
            dateType = 'custom';
        }
        else {
            var dateRange = getDateRange();
            var format = getFormat();
            var mode = getCalculateMode();
            var history = getHistoryMode();
            createTotalRateTable($('#totalRateTableParent'));
            createTotalChart(dateRange, NaN, NaN, $('#totalChart'), format, mode, history);
            dateType = 'range';
        }
    });

    $('.backBtn').click(function () {
        $('#changeDayRange').show();
        $('#customDayRange').hide();
        $('.backBtn').hide();
        $('#changeDayRange').val("week");
        dateType = 'range';
    });

    $('#displayMode').change(function () {
        var isEvent = true;
        var format = getFormat();
        var mode = getCalculateMode();

        if (format == "rate"){
            $('#changeHistoryDiv').hide();
            var history = 'general';
            $('#historyMode').val('general');
        }else{
            $('#changeHistoryDiv').show();
        }

        if (dateType == 'range') {
            var dateRange = getDateRange();
            createTotalChart(dateRange, NaN, NaN, $('#totalChart'), format, mode, history);
        }
        else if (dateType == 'custom') {
            var startDate = $('#fromDate').val();
            var endDate = $('#toDate').val();
            createTotalChart(NaN, startDate, endDate, $('#totalChart'), format, mode, history);
        }

    });

    $('#calculateMode').change(function () {
        var isEvent = true;
        var format = getFormat();
        var mode = getCalculateMode();
        var history = getHistoryMode();

        if (dateType == 'range') {
            var dateRange = getDateRange();
            createTotalChart(dateRange, NaN, NaN, $('#totalChart'), format, mode, history);
        }
        else if (dateType == 'custom') {
            var startDate = $('#fromDate').val();
            var endDate = $('#toDate').val();
            createTotalChart(NaN, startDate, endDate, $('#totalChart'), format, mode, history);
        }

    });

    $('#historyMode').change(function () {
        var isEvent = true;
        var format = getFormat();
        var mode = getCalculateMode();
        var history = getHistoryMode();

        if (history == "history"){
            format = "number";
            $('#displayMode').val('number');
        }

        if (dateType == 'range') {
            var dateRange = getDateRange();
            createTotalChart(dateRange, NaN, NaN, $('#totalChart'), format, mode, history);
        }
        else if (dateType == 'custom') {
            var startDate = $('#fromDate').val();
            var endDate = $('#toDate').val();
            createTotalChart(NaN, startDate, endDate, $('#totalChart'), format, mode, history);
        }

    });

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

    var getNowDate = function () {
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth() + 1; //January is 0!
        var yyyy = today.getFullYear();

        if (dd < 10) {
            dd = '0' + dd
        }
        if (mm < 10) {
            mm = '0' + mm
        }
        today = yyyy + '/' + mm + '/' + dd;
        return today;
    }
    var getRangeDate = function (dateRange) {
        var today = new Date();
        var lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6);
        var lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
        var lastThreeMonth = new Date(today.getFullYear(), today.getMonth() - 3, today.getDate());

        var nowDay = today.getDate();
        var nowMonth = today.getMonth() + 1;
        var nowYear = today.getFullYear();
        var pastDay = lastWeek.getDate();
        var pastMonth = lastWeek.getMonth() + 1;
        var pastYear = lastWeek.getFullYear();

        if (dateRange === 'week') {
            pastDay = lastWeek.getDate();
            pastMonth = lastWeek.getMonth() + 1;
            pastYear = lastWeek.getFullYear();
            var nowDate = nowYear + '/' + nowMonth + '/' + nowDay;
            var pastDate = pastYear + '/' + pastMonth + '/' + pastDay;
            return '{% trans "Last 7 days" %} ' + pastDate + ' - ' + nowDate;
        }
        else if (dateRange === 'month') {
            pastDay = lastMonth.getDate();
            pastMonth = lastMonth.getMonth() + 1;
            pastYear = lastMonth.getFullYear();
            var nowDate = nowYear + '/' + nowMonth + '/' + nowDay;
            var pastDate = pastYear + '/' + pastMonth + '/' + pastDay;
            return '{% trans "The last 1 month" %} ' + pastDate + ' - ' + nowDate;
        }
        else if (dateRange === '3month') {
            pastDay = lastThreeMonth.getDate();
            pastMonth = lastThreeMonth.getMonth() + 1;
            pastYear = lastThreeMonth.getFullYear();
            var nowDate = nowYear + '/' + nowMonth + '/' + nowDay;
            var pastDate = pastYear + '/' + pastMonth + '/' + pastDay;
            return '{% trans "The last 3 months" %} ' + pastDate + ' - ' + nowDate;
        }

    }

    // reference: http://www.eyecon.ro/datepicker/

    $('#fromDate').val(getNowDate());
    $('#toDate').val(getNowDate());
    $('#weekDayRange').text(getRangeDate('week'));
    $('#monthDayRange').text(getRangeDate('month'));
    $('#3monthDayRange').text(getRangeDate('3month'));

    $('#fromDate').DatePicker({
        format: 'Y/m/d',
        date: $('#fromDate').val(),
        current: $('#fromDate').val(),
        starts: 1,
        position: 'r',
        onBeforeShow: function () {
            $('#fromDate').DatePickerSetDate($('#fromDate').val(), true);
        },
        onChange: function (formated, dates) {
            $('#fromDate').val(formated);
            var startDate = $('#fromDate').val();
            var endDate = $('#toDate').val();
            var format = getFormat();
            var mode = getCalculateMode();
            createTotalChart(NaN, startDate, endDate, $('#totalChart'), format, mode);
            if ($('#closeOnSelect input').attr('checked')) {
                $('#fromDate').DatePickerHide();
            }
        }
    });

    $('#toDate').DatePicker({
        format: 'Y/m/d',
        date: $('#toDate').val(),
        current: $('#toDate').val(),
        starts: 1,
        position: 'r',
        onBeforeShow: function () {
            $('#toDate').DatePickerSetDate($('#toDate').val(), true);
        },
        onChange: function (formated, dates) {
            $('#toDate').val(formated);
            var startDate = $('#fromDate').val();
            var endDate = $('#toDate').val();
            var format = getFormat();
            var mode = getCalculateMode();
            createTotalChart(NaN, startDate, endDate, $('#totalChart'), format, mode);
            $('#toDate').val(formated);
            if ($('#closeOnSelect input').attr('checked')) {
                $('#toDate').DatePickerHide();
            }
        }
    });

</script>