{% extends "Theophrastus/Base.html" %}

{% load i18n %}

{% block title %}{% trans "Statistics" %} - {{ newsletter.title }}{% endblock %}

{% block css %}
 <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" />
{% endblock %}

{% block javascript %}
 <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/jjquery/query.blockUI.js"></script>
 <!--<script language="javascript" type="text/javascript" src="{{ STATIC_URL }}subscribe/js/chart/plugins/jqplot.donutRenderer.js"></script>-->

 <script type="text/javascript">
var charts = {};
$(function() {
    var maskMessage = 
        '<img src="{{ STATIC_URL }}subscribe/images/dashboard/Loading.gif" />' + 
        '{% trans "Loading, please wait..." %}';
    
    var emptyChartMessage = 
        '{% trans "Sorry, there is nothing data." %}';

    var checkValue = function(value) {
        if (typeof(value) == 'undefined') {
            return '0%'
        }
        else {
            return value;
        }
    };
    
    // Loading counter.
    var ajaxCounter = 0;
        
    var generateChart = function(response, rateType, config) {
        var labels = [];
        {% for l in numTypeLabels %}
            labels.push('{{ l }}');
        {% endfor %}
        
        var yaxis = {
            tickOptions: {
                formatString: '%.2f'
            },
            min:0,
            tickInterval: 1
        }
        
        if (rateType == 'rate') {
            labels = [];
            {% for l in rateTypeLabels %}
                labels.push('{{ l }}');
            {% endfor %}
            
            yaxis = {
                tickOptions: {
                    formatString: '%.2f%'
                },
                min: 0,
                max: 100
            }
        }
        
        // Set series labels.
        var series = [];
        for (var i = 0; i < labels.length; i++) {
            series.push({'label': labels[i]});
        }
        
        // Set xaxis config.
        var xaxisConfig = {};
        if (typeof(config.xaxis) != 'undefined') {
            xaxisConfig = config.xaxis;
        }
        var xaxis = {
            renderer: $.jqplot.DateAxisRenderer,
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions:{
                formatString: '%#m/%#d'
                //textColor: '#dddddd'
            },
            tickInterval: '1 day',
            drawMajorGridlines: false
        };
        for (var key in xaxisConfig) {
            xaxis[key] = xaxisConfig[key]
        }
        
        // Set yaxis config.
        var yaxisConfig = {};
        if (typeof(config.yaxis) != 'undefined') {
            yaxisConfig = config.yaxis;
        }
        for (var key in yaxisConfig) {
            yaxis[key] = yaxisConfig[key]
        }
        
        // Clean chart.
        $('#totalRatesChart').children().remove();
        // Restart draw chart.
        charts['totalRatesChart'] = $.jqplot('totalRatesChart', [
            response.deliveriesData, 
            response.opensData,
            response.clicksData,
            response.bouncesData,
            response.unsubscribesData,
            response.complainsData,
            response.rejectsData
        ], {
            seriesColors: [
                "rgba(78, 135, 194, 0.7)", "rgb(211, 235, 59)", 
                "#339900", "#0469CC", "#6600CC", "#FFFF66", "#FF1010",
            ],
            seriesDefaults: {
                rendererOptions: {
                    smooth: true
                },
                showMarker: false
            },
            legend: {
                renderer: $.jqplot.EnhancedLegendRenderer,
                show: true,
                placement: 'outsideGrid',
                rendererOptions: {
                    numberRows: 1
                }, 
                location: 's'
            },
            axesDefaults: {
                tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
                    tickOptions: {
                    angle: -10,
                    fontSize: '10pt',
                    tickInterval: '1 day'
                },
                rendererOptions: {
                    baselineWidth: 1.5,
                    baselineColor: '#444444',
                    drawBaseline: false
                }
            },
            axes: {
                xaxis: xaxis,
                yaxis: yaxis
            },
            series: series,
            highlighter: {
                show: true,
                sizeAdjust: 1,
                tooltipOffset: 9,
                formatString:
                    '<table class="jqplot-highlighter">\
                    <tr><td>{% trans "Date:" %}</td><td>%s</td></tr>\
                    <tr><td>{% trans "Value:" %}</td><td>%s</td></tr></table>'
            },
            /*grid: {
                background: 'rgba(57,57,57,0.0)',
                drawBorder: false,
                shadow: false,
                gridLineColor: '#666666',
                gridLineWidth: 2
            },*/
            cursor: {
                show: true,
                zoom: true
            }
        });

        /* Brass theme */
        /* http://www.jqplot.com/docs/files/jqplot-core-js.html */
        /*var brass = totalRatesChart.themeEngine.copy('Default', 'brass');
        brass.grid.backgroundColor = 'rgb(211, 233, 195)';
        brass.legend.fontSize = '2pt';
        
        $('#changeLineTheme').change(function() {
            var name = $(this).val();
            totalRatesChart.activateTheme(name)
        });*/
    };
    
    var createBothChart = function(trigger, isEvent) {
        if (isEvent) {
            /*$('#bothChart').block({
                message: maskMessage,
                css: { 
                    border: 'none', 
                    padding: '15px', 
                    backgroundColor: '#000', 
                    '-webkit-border-radius': '10px', 
                    '-moz-border-radius': '10px', 
                    opacity: 0.5, 
                    color: '#fff' 
                }
            });*/
        }
        
        var dateRange = $('#changeDayRange :selected').val();
        var args = {range: dateRange, rateType: 'number'};
        args.rateType = trigger.attr('typeContent');

        var yaxis = {
            tickOptions: {
                formatString: '%.2f',
                tickInterval: 1
            },
            min:0
        }
        
        if (args.rateType == 'rate') {
            yaxis = {
                tickOptions: {
                    formatString: '%.2f%'
                },
                min: 0,
                max: 100
            }
        }

        var xaxis = {
            renderer: $.jqplot.DateAxisRenderer,
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions:{
                formatString: '%#m/%#d'
            },
            drawMajorGridlines: false
        };
        
        var flattenLineChartUrl = "{% url 'Theophrastus.statistics.getFlattenData' newsletter.slug %}";        
        $.ajax({
            type: "GET",
            data: args,
            url: flattenLineChartUrl,
            dataType: "jsonp",
            jsonp: "jsonpcallback",
            crossDomain: true,
            success: function (response) {
                $('#bothChart').children().remove();
                
                // Set series labels.
                var series = [];
                for (var i = 0; i < response.settings.labels.length; i++) {
                    series.push({'label': response.settings.labels[i]});
                }
        
                var xaxisInterval = '1 day';
                if (dateRange == '3month') {
                    xaxisInterval = '1 weeks';
                }
                else if (dateRange == 'month') {
                    xaxisInterval = '3 days';
                }                    
                xaxis.tickInterval = xaxisInterval;
                xaxis.min = response.xaxis.minDate;
                xaxis.max = response.xaxis.maxDate;

                yaxis.max = response.yaxis.max;
                if (yaxis.max > 10) {
                    var v = parseInt(yaxis.max / 5);
                    yaxis.tickInterval = v;
                    if ((v * 5) < yaxis.max) {
                        yaxis.max = response.yaxis.max;
                    }
                }

                chartData = new Array();
                for (var i = 0; i <= response.status.length; i++) {
                    statusName = response.status[i];
                    chartData.push(response.context.email[statusName]);
                    
                }
                
                charts['bothChart'] = $.jqplot('bothChart', chartData, {
                    legend: {
                        renderer: $.jqplot.EnhancedLegendRenderer,
                        show: true,
                        placement: 'outsideGrid',
                        rendererOptions: {
                            numberRows: 2
                        }, 
                        location: 's'
                    },
                    axes: {
                        xaxis: xaxis,
                        yaxis: yaxis
                    },
                    axesDefaults: {
                        rendererOptions: {
                            baselineWidth: 1.5,
                            baselineColor: '#444444',
                            drawBaseline: false
                        }
                    },
                    series: series,
                    seriesColors: [
                        '#336600', '#0033FF', '#6633CC', '#FFCC33', '#FF00FF', 
                        '#FF0000', 
                        '#33CC00', '#0099FF', '#6666CC', '#FFFF99', 
                        '#FF99FF', '#FF9999'
                    ],
                    seriesDefaults: {
                        rendererOptions: {
                            smooth: true
                        },
                        showMarker: false
                    },
                    highlighter: {
                        show: true,
                        sizeAdjust: 1,
                        tooltipOffset: 9,
                        formatString:
                            '<table class="jqplot-highlighter">\
                            <tr><td>{% trans "Date:" %}</td><td>%s</td></tr>\
                            <tr><td>{% trans "Value:" %}</td><td>%s</td></tr></table>'
                    },
                    cursor: {
                        show: true,
                        zoom: true
                    }
                });
                console.log('sdfsff');
                /* Brass theme */
                /* http://www.jqplot.com/docs/files/jqplot-core-js.html */
                /*var brass = linePlot.themeEngine.copy('Default', 'brass');
                brass.grid.backgroundColor = '#593D2B';
                brass.grid.gridLineWidth = 2;
                brass.grid.borderColor = 'black';
                //brass.seriesStyles.seriesColors = ['red', 'orange', 'yellow', 'green', 'blue'];
                brass.seriesStyles.lineWidth = 8;
                brass.legend.fontSize = '2pt';
                brass.axes.xaxis.label.fontFamily = '"Comic Sans MS", cursive';
                brass.axes.xaxis.label.textColor = '#C7CC4E';
                
                $('#changeLineTheme2').change(function() {
                    var name = trigger.val();
                    linePlot.activateTheme(name)
                });*/
                
                if (isEvent) {
                    //$('#bothChart').unblock();
                }
                else {
                    ajaxCounter ++;
                }
                
                if (typeof(response.empty) != 'undefined') {
                    if (response.empty) {
                        /*$('#bothChart').block({
                            message: emptyChartMessage,
                            css: { 
                                border: 'none', 
                                padding: '15px', 
                                backgroundColor: '#000', 
                                '-webkit-border-radius': '10px', 
                                '-moz-border-radius': '10px', 
                                opacity: 0.5, 
                                color: '#fff',
                                cursor: 'default'
                            }
                        });*/
                    }
                }
            },
            error: function() {
                if (isEvent) {
                    //$('#bothChart').unblock();
                }
                else {
                    ajaxCounter ++;
                }
            }
        });
    };
    
    $('#both [name=displayMode]').click(function() {
        var isEvent = true;
        if ($(this).hasClass('current')) {
            return false;
        }
        else {
            $('#both [name=displayMode]').each(function() {
                if ($(this).hasClass('current')) {
                    $(this).removeClass('current');
                }
                else {
                    $(this).addClass('current');
                }
            });
        }
        createBothChart($(this), isEvent);
    });
    
    var createTotalChart = function(trigger, isEvent) {
        if (isEvent) {
            /*$('#totalRatesChart').block({
                message: maskMessage,
                css: { 
                    border: 'none', 
                    padding: '15px', 
                    backgroundColor: '#000', 
                    '-webkit-border-radius': '10px', 
                    '-moz-border-radius': '10px', 
                    opacity: 0.5, 
                    color: '#fff' 
                }
            });*/
        }
        
        var dateRange = $('#changeDayRange :selected').val();
        var id = trigger.attr('id');
        var context = {
            range: dateRange, 
            rateType: 'number',
            accumulated: true
        };
        if (id == 'changeNumberMode') {
            context.rateType = 'number';
        }
        else {
            context.rateType = 'rate';
        }
        
        var totalLineChartUrl = "";
        /*$.ajax({
            type: "GET",
            data: context,
            url: totalLineChartUrl,
            dataType: "jsonp",
            jsonp: "jsonpcallback",
            crossDomain: true,
            success: function (response) {
                var responseDateRange = response.dateRange;
                if (responseDateRange) {
                    var l = responseDateRange.length - 1;
                    $('#dateRange').text(
                        responseDateRange[0] + '~' + responseDateRange[l]
                    );
                }

                var xaxisInterval = '1 day';
                if (dateRange == '3month') {
                    xaxisInterval = '1 weeks';
                }
                else if (dateRange == 'month') {
                    xaxisInterval = '3 days';
                }
                
                var yaxisTickInterval = 1;
                var yaxisMax = response.yaxis.max;
                if (yaxisMax > 10) {
                    var v = parseInt(yaxisMax / 5);
                    yaxisTickInterval = v;
                    if ((v * 5) < yaxisMax) {
                        yaxisMax = response.yaxis.max;
                    }
                }
                
                generateChart(
                    response.context, 
                    response.rateType,
                    {'xaxis': 
                        {'min': response.xaxis.minDate, 
                         'max': response.xaxis.maxDate, 
                         'tickInterval': xaxisInterval
                        },
                     'yaxis':
                        {'max': yaxisMax,
                         'tickInterval': yaxisTickInterval
                        }
                    }
                );
                
                if (isEvent) {
                    //$('#totalRatesChart').unblock();
                }
                else {
                    ajaxCounter ++;
                }

                if (typeof(response.empty) != 'undefined') {
                    if (response.empty) {
                        /*$('#totalRatesChart').block({
                            message: emptyChartMessage,
                            css: { 
                                border: 'none', 
                                padding: '15px', 
                                backgroundColor: '#000', 
                                '-webkit-border-radius': '10px', 
                                '-moz-border-radius': '10px', 
                                opacity: 0.5, 
                                color: '#fff',
                                cursor: 'default'
                            }
                        });*/
                    /*}
                }
            },
            error: function() {
                if (isEvent) {
                    //$('#totalRatesChart').unblock();
                }
                else {
                    ajaxCounter ++;
                }
            }
        });*/
    };
    /* Get all the subscribe statistics(Line chart). */
    $('#totalRates [name=displayMode]').click(function() {
        var isEvent = true;
        var isEvent = true;
        if ($(this).hasClass('current')) {
            return false;
        }
        else {
            $('#totalRates [name=displayMode]').each(function() {
                if ($(this).hasClass('current')) {
                    $(this).removeClass('current');
                }
                else {
                    $(this).addClass('current');
                }
            });
        }
        createTotalChart($(this), isEvent);
    }); // End.
        
    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();
                //$('#maskDivParent').unblock();

                // Init loading counter value.
                ajaxCounter = 0;
                clearInterval(checkCompleteTimer);
            }
        }, 300);
        

        var subCountryUrl = "";       
        /*$('#subscriberCountPie').children().remove();
        $.ajax({
            type: "GET",
            data: {},
            url: subCountryUrl,
            dataType: "jsonp",
            jsonp: "jsonpcallback",
            crossDomain: true,
            success: function (response) {
                var piePlot = jQuery.jqplot('subscriberCountPie', 
                    [response.data], 
                    {
                        seriesDefaults: {
                            renderer: jQuery.jqplot.PieRenderer, 
                            rendererOptions: {
                                showDataLabels: true,
                                padding: 2
                            }
                        }, 
                        legend: {
                            show: true, 
                            location: 'e'
                        }
                    }
                );
                
                /* Brass theme */
                /* http://www.jqplot.com/docs/files/jqplot-core-js.html */
                /*var brass = piePlot.themeEngine.copy('Default', 'brass');
                brass.grid.backgroundColor = 'rgb(211, 233, 195)';
                brass.seriesStyles.seriesColors = ['red', 'orange', 'yellow', 'green', 'blue'];
                brass.title.fontSize = '18pt';
                brass.legend.fontSize = '2pt';
                
                $('#changePieTheme').change(function() {
                    var name = $(this).val();
                    piePlot.activateTheme(name)
                });
                
                ajaxCounter ++;
            },
            error: function() {
                ajaxCounter ++;
            }
        });*/
        
        /* Get total rate data. */
        var totalRateUrl = "";
        /*$.ajax({
            type: "GET",
            data: {range: dateRange},
            url: totalRateUrl,
            dataType: "jsonp",
            jsonp: "jsonpcallback",
            crossDomain: true,
            success: function (response) {
                var parent = $('#totalRates [name=rates]');
                var deliveryRate = checkValue(response.deliveryRate);
                $('[name=deliveryRate]', parent).text(deliveryRate);
                var openRate = checkValue(response.openRate);
                $('[name=openRate]', parent).text(openRate);
                var clickRate = checkValue(response.clickRate);
                $('[name=clickRate]', parent).text(clickRate);
                var unsubscribeRate = checkValue(response.unsubscribeRate);
                $('[name=unsubscribeRate]', parent).text(unsubscribeRate);
                var bounceRate = checkValue(response.bounceRate);
                $('[name=bounceRate]', parent).text(bounceRate);
                var complainRate = checkValue(response.complainRate);
                $('[name=complainRate]', parent).text(complainRate);
                var rejectRate = checkValue(response.rejectRate);
                $('[name=rejectRate]', parent).text(rejectRate);
                
                ajaxCounter ++;
            },
            error: function() {
                ajaxCounter ++;
            }
        });*/

        // E-mail statistics.
        var emailRateUrl = "";
        /*$.ajax({
            type: "GET",
            data: {range: dateRange, dataType: 'jsonp'},
            url: emailRateUrl,
            dataType: "jsonp",
            jsonp: "jsonpcallback",
            crossDomain: true,
            success: function (response) {
                var parent = $('#emailStatistics [name=rates]');
                $('[name=deliveryRate]', parent).text(response.deliveryRate);
                $('[name=openRate]', parent).text(response.openRate);
                $('[name=clickRate]', parent).text(response.clickRate);
                $('[name=unsubscribeRate]', parent).text(response.unsubscribeRate);
                $('[name=bounceRate]', parent).text(response.bounceRate);
                $('[name=complainRate]', parent).text(response.complainRate);
                $('[name=rejectRate]', parent).text(response.rejectRate);
                
                ajaxCounter ++;
            },
            error: function() {
                ajaxCounter ++;
            }
        });*/
    
        // Facebook statistics.
        var fbRateUrl = "";       
        /*$.ajax({
            type: "GET",
            data: {range: dateRange, dataType: 'jsonp'},
            url: fbRateUrl,
            dataType: "jsonp",
            jsonp: "jsonpcallback",
            crossDomain: true,
            success: function (response) {
                var parent = $('#facebookStatistics [name=rates]');
                $('[name=deliveryRate]', parent).text(response.deliveryRate);
                $('[name=openRate]', parent).text(response.openRate);
                $('[name=clickRate]', parent).text(response.clickRate);
                $('[name=unsubscribeRate]', parent).text(response.unsubscribeRate);
                $('[name=bounceRate]', parent).text(response.bounceRate);
                
                ajaxCounter ++;
            },
            error: function() {
                ajaxCounter ++;
            }
        });*/
    
        // Both email and facebook line chart.
        var nTypeUrl = "";       
        /*$('#subscriberDistributionPie').children().remove();
        $.ajax({
            type: "GET",
            data: {},
            url: nTypeUrl,
            dataType: "jsonp",
            jsonp: "jsonpcallback",
            crossDomain: true,
            success: function (response) {
                var piePlot = $.jqplot(
                    'subscriberDistributionPie', 
                    [response.data], 
                    {
                        seriesDefaults: {
                            renderer: $.jqplot.PieRenderer, 
                            rendererOptions: {
                                showDataLabels: true
                            }
                        }, 
                        legend: {
                            show: true, 
                            location: 'e'/*,
                            placement: 'outside',
                            rendererOptions: {
                                numberRows: 1
                            },*/
                        /*}
                    }
                );
                
                /* Brass theme */
                /* http://www.jqplot.com/docs/files/jqplot-core-js.html */
                /*var brass = piePlot.themeEngine.copy('Default', 'brass');
                brass.grid.backgroundColor = 'rgb(211, 233, 195)';
                brass.seriesStyles.seriesColors = ['red', 'orange'];
                brass.title.fontSize = '18pt';
                brass.legend.fontSize = '2pt';
                
                $('#changePieTheme2').change(function() {
                    var name = $(this).val();
                    piePlot.activateTheme(name)
                });
                
                ajaxCounter ++;
            },
            error: function() {
                ajaxCounter ++;
            }
        });*/

        var isEvent = false;
        createBothChart($('#both [name=displayMode].current'), isEvent);
        createTotalChart($('#totalRates [name=displayMode].current'), isEvent);
    };
    
    // Reset chart if x-axis's ticks was out after chart zoomed.
    var checkTicksDuplicated = function(ticks) {
        var t = '';
        for (var i=0; i< ticks.length; i++) {
            var l = ticks[i].label;
            if (t == l) {
                return true;
            }else {
                t = l;
            }
        }
        return false;
    };

    function postZoomHandler() {
        if (this.target){
            if ((this.target.attr('id') == 'totalRatesChart') || 
                (this.target.attr('id') == 'bothChart')) {
                var $t = charts[this.target.attr('id')];
                var c = this.plugins.cursor;
                if(c._zoom.zooming) {
                    var ticks = this.axes.xaxis._ticks;
                    if (checkTicksDuplicated(ticks)) {
                        setTimeout(function() {
                            $t.resetZoom();
                        }, 50);
                    }
                }
            }
        }
    }

    //$.jqplot.postDrawHooks.push(postZoomHandler);
    
    // Call event.
    $('#changeDayRange').change(function() {
        var dateRange = $('#changeDayRange :selected').val();
        update(dateRange);
    });
    
    $('#changeDayRange').change();
});
 </script>
{% endblock %}

{% block mainHead %}
  <div class="statisticsHead">
   <span class="titleStyle TS1-1"></span>
   蝯梯��
   <div class="moreData">
    <span>{% trans "Total " %}
     <span>
      <a href="">{{ subscribers }}_11</a></span>
      {% trans " subscribers" %}
     </span>
    {% if showPageNumber %}
     <span>, �<span><a href="">{{ pages }}</a></span>���</span>
    {% endif %}
   </div>
  </div>
  <ul class="dashboardNav">
   <li><a href="">{% trans "Dashboard" %}</a></li>
    <li><a href="">{% trans "Go back list" %}</a></li>
    <li><a href="">{% trans "Subscriber list" %}</a></li>
    {% for tag in tags %}
     <li><a href="">{{ tag.name }}</a></li>
    {% endfor %}
  </ul>
{% endblock %}

{% block content %}
<div id="maskDivParent">
 <ul class="menu" id="menuContent">
  <li>
   <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 class="mainBox" name="mainBoxContent">
    <div id="totalRates">
     <table class="statisticsTable" name="rates">
       <tr>
       <td class="tableName" colspan="7">
        <span class="titleStyle TS2-1"></span>{% trans "Statistics" %}
       </td>
      </tr>
      <tr>
       <th>{% trans "Delivery rate" %}:</th>
       <th>{% trans "Open rate" %}:</th>
       <th>{% trans "Click rate" %}:</th>
       <th></th>
      </tr>
      <tr>
       <td name="deliveryRate"></td>
       <td name="openRate"></td>
       <td name="clickRate"></td>
      </tr>
      <tr>
       <th>{% trans "Unsubscribed rate" %}:</th>
       <th>{% trans "Bounced rate" %}:</th>
       <th>{% trans "Reject rate" %}:</th>
       <th>{% trans "Complaint rate" %}:</th>
      </tr>
      <tr>
       <td name="unsubscribeRate"></td>
       <td name="bounceRate"></td>
       <td name="rejectRate"></td>
       <td name="complainRate"></td>
      </tr>
     </table>
     <div id="subscriberCountPie"></div>
     <div class="controlBar">
      <span>{% trans "Change number / rate:" %}</span>
     </div>
     <div>
      <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="totalRatesChart"></div><!-- pie chart -->
    </div>
    <div id="info2b"></div>
   </div>
   <div class="mainBox" name="mainBoxContent">
    <div id="subscriberDistributionPie"></div>
    <div id="emailStatistics">
     <table name="rates">
      <tr>
       <td class="tableName" colspan="7">
        <span class="titleStyle TS2-2"></span>E-mail
       </td>
      </tr>
      <tr>
       <th>{% trans "Delivery rate" %}:</th>
       <th>{% trans "Open rate" %}:</th>
       <th>{% trans "Click rate" %}:</th>
       <th>{% trans "Unsubscribed rate" %}:</th>
       <th>{% trans "Bounced rate" %}:</th>
       <th>{% trans "Reject rate" %}:</th>
       <th>{% trans "Complaint rate" %}:</th>
      </tr>
      <tr>
       <td name="deliveryRate"></td>
       <td name="openRate"></td>
       <td name="clickRate"></td>
       <td name="unsubscribeRate"></td>
       <td name="bounceRate"></td>
       <td name="rejectRate"></td>
       <td name="complainRate"></td>
      </tr>
     </table>
    </div>
    <div id="facebookStatistics">
     <table name="rates">
      <tr>
       <td class="tableName" colspan="5">
        <span class="titleStyle TS2-3"></span>Facebook
       </td>
      </tr>
      <tr>
       <th>{% trans "Delivery rate" %}:</th>
       <th>{% trans "Open rate" %}:</th>
       <th>{% trans "Click rate" %}:</th>
       <th>{% trans "Unsubscribed rate" %}:</th>
       <th>{% trans "Bounced rate" %}:</th>
      </tr>
      <tr>
       <td name="deliveryRate"></td>
       <td name="openRate"></td>
       <td name="clickRate"></td>
       <td name="unsubscribeRate"></td>
       <td name="bounceRate"></td>
      </tr>
     </table>
    </div>
    <div class="controlBar">
     <span>{% trans "Change number / rate:" %}</span>
    </div>
    <div id="both">
     <input type="button" name="displayMode" typeContent="rate" class="current" value="{% trans "Rate" %}" />
     <input type="button" name="displayMode" typeContent="number" value="{% trans "Number" %}" />
    </div>
    <div id="bothChart"></div>
   </div>
<div>
{% endblock %}