</div>

<script type="text/javascript">

var data = ${h.js(c.trending_languages)};

var total = 0;

var tbl = document.createElement('table');

tbl.setAttribute('class','trending_language_tbl');

var cnt = 0;

for (var i=0;i<data.length;i++){

    total+= data[i][1].count;

}

for (var i=0;i<data.length;i++){

    cnt += 1;

    var hide = cnt>2;

    var tr = document.createElement('tr');

    if (hide){

        tr.setAttribute('style','display:none');

        tr.setAttribute('class','stats_hidden');

    }

    var k = data[i][0];

    var obj = data[i][1];

    var percentage = Math.round((obj.count/total*100),2);

    var td1 = document.createElement('td');

    td1.width = 150;

    var trending_language_label = document.createElement('div');

    trending_language_label.innerHTML = obj.desc+" ("+k+")";

    td1.appendChild(trending_language_label);

    var td2 = document.createElement('td');

    td2.setAttribute('style','padding-right:14px !important');

    var trending_language = document.createElement('div');

    var nr_files = obj.count + ' ' + ${h.jshtml(_('files'))};

    trending_language.title = k+" "+nr_files;

    if (percentage>22){

        trending_language.innerHTML = "<b style='font-size:0.8em'>"+percentage+"% "+nr_files+ "</b>";

    }

    else{

        trending_language.innerHTML = "<b style='font-size:0.8em'>"+percentage+"%</b>";

    }

    trending_language.setAttribute("class", 'trending_language top-right-rounded-corner bottom-right-rounded-corner');

    trending_language.style.width=percentage+"%";

    td2.appendChild(trending_language);

    tr.appendChild(td1);

    tr.appendChild(td2);

    tbl.appendChild(tr);

    if(cnt == 3){

        var show_more = document.createElement('tr');

        var td = document.createElement('td');

        lnk = document.createElement('a');

        lnk.href='#';

        lnk.innerHTML = ${h.jshtml(_('Show more'))};

        lnk.id='code_stats_show_more';

        td.appendChild(lnk);

        show_more.appendChild(td);

        show_more.appendChild(document.createElement('td'));

        tbl.appendChild(show_more);

    }

}

</script>

<script type="text/javascript">

/**

 * Plots summary graph

 *

 * @class SummaryPlot

 * @param {from} initial from for detailed graph

 * @param {to} initial to for detailed graph

 * @param {dataset}

 * @param {overview_dataset}

 */

function SummaryPlot(from,to,dataset,overview_dataset) {

    var initial_ranges = {

        "xaxis":{

            "from":from,

            "to":to

        }

    };

    for(var key in dataset){

      var data = dataset[key].data;

      for(var d in data){

        data[d].time *= 1000;

      }

    }

    for(var key in overview_dataset){

      overview_dataset[key][0] *= 1000;

    }

    var choiceContainer = $("#legend_choices")[0];

    var choiceContainerTable = $("#legend_choices_tables")[0];

    var $plotContainer = $('#commit_history');

    var plotContainer = $('#commit_history')[0];

    var $overviewContainer = $('#overview');

    var overviewContainer = $('#overview')[0];

    var plot_options = {

        bars: {show:true, align: 'center', lineWidth: 4},

        legend: {show:true,

                container: "#legend_container",

                labelFormatter: function(label, series) {

                        // series is the series object for the label

                        return '<a href="javascript:void(0)"> ' + label + '</a>';

                    }

        },

        points: {show:true, radius: 0, fill: false},

        yaxis: {tickDecimals: 0},

        xaxis: {

            mode: "time",

            timeformat: "%d/%m",

            min: from,

            max: to

        },

        grid: {

            hoverable: true,

            clickable: true,

            autoHighlight: true,

            color: "#999"

        },

        //selection: {mode: "x"}

    };

    var overview_options = {

        legend:{show:false},

        bars: {show:true, barWidth: 2},

        shadowSize: 0,

        xaxis: {mode: "time", timeformat: "%d/%m/%y"},

        yaxis: {ticks: 3, min: 0, tickDecimals:0},

        grid: {color: "#999"},

        selection: {mode: "x"}

    };

    /**

    *get dummy data needed in few places

    */

    function getDummyData(label){

        return {"label":label,

         "data":[{"time":0,

             "commits":0,

                 "added":0,

                 "changed":0,

                 "removed":0

            }],

            "schema":["commits"],

            "color":'#ffffff'

        }

    }

    /**

     * generate checkboxes accordingly to data

     * @param keys

     * @returns

     */

    function generateCheckboxes(data) {

        //append checkboxes

        var i = 0;

        choiceContainerTable.innerHTML = '';

        for(var pos in data) {

            data[pos].color = i;

            i++;

            if(data[pos].label != ''){

                choiceContainerTable.innerHTML +=

                    '<tr style="display:none"><td><label><input type="checkbox" id="id_user_{0}" name="{0}" checked="checked" /> \

                     {0}</label></td></tr>'.format(data[pos].label);

            }

        }

    }

    /**

     * ToolTip show

     */

    function showTooltip(x, y, contents) {

        var div=document.getElementById('tooltip');

        if(!div) {

            div = document.createElement('div');

            div.id="tooltip";

            div.style.position="absolute";

            div.style.border='1px solid #fdd';

            div.style.padding='2px';

            div.style.backgroundColor='#fee';

            document.body.appendChild(div);

        }

        $(div).css('opacity', 0)

        div.innerHTML = contents;

        div.style.top=(y + 5) + "px";

     * plot only selected items from overview

     * @param ranges

     * @returns

     */

    function plotselected(e, ranges) {

        //updates the data for new plot

        var data = getDataAccordingToRanges(ranges);

        generateCheckboxes(data);

        var new_options = $.extend(plot_options, {

            xaxis: {

                min: ranges.xaxis.from,

                max: ranges.xaxis.to,

                mode:"time",

                timeformat: "%d/%m"

            }

        });

        // do the zooming

        plot = $.plot(plotContainer, data, new_options);

        $plotContainer.on("plotselected", plotselected);

        //resubscribe plothover

        $plotContainer.on("plothover", plothover);

        // don't fire event on the overview to prevent eternal loop

        overview.setSelection(ranges, true);

        //resubscribe choiced

        $('#legend_container tr a').on("click", [data, ranges], plotchoiced);

    }

    var previousPoint = null;

    function plothover(e, pos, item) {

        if (item) {

            if (previousPoint != item.datapoint) {

                previousPoint = item.datapoint;

                var tooltip = $("#tooltip")[0];

                if(tooltip) {

                      tooltip.parentNode.removeChild(tooltip);

                }

                var d = new Date(item.datapoint[0]);

                var fd = d.toDateString();

                var nr_commits = item.datapoint[1];

                if (!item.series.label){

                    item.series.label = 'commits';

                }

                var cur_data = dataset[item.series.label].data[item.dataIndex];

                var added = cur_data.added;

                var changed = cur_data.changed;

                var removed = cur_data.removed;

                var nr_commits_suffix = ' ' + ${h.jshtml(_('commits'))} + ' ';

                var added_suffix = ' ' + ${h.jshtml(_('files added'))} + ' ';

                var changed_suffix = ' ' + ${h.jshtml(_('files changed'))} + ' ';

                var removed_suffix = ' ' + ${h.jshtml(_('files removed'))} + ' ';

                if(nr_commits == 1){ nr_commits_suffix = ' ' + ${h.jshtml(_('commit'))} + ' '; }

                if(added == 1) { added_suffix=' ' + ${h.jshtml(_('file added'))} + ' '; }

                if(changed == 1) { changed_suffix=' ' + ${h.jshtml(_('file changed'))} + ' '; }

                if(removed == 1) { removed_suffix=' ' + ${h.jshtml(_('file removed'))} + ' '; }

                showTooltip(item.pageX, item.pageY, item.series.label + " on " + fd

                         +'<br/>'+

                         nr_commits + nr_commits_suffix+'<br/>'+

                         added + added_suffix +'<br/>'+

                         changed + changed_suffix + '<br/>'+

                         removed + removed_suffix + '<br/>');

            }

        }

        else {

              var tooltip = $("#tooltip")[0];

              if(tooltip) {

                    tooltip.parentNode.removeChild(tooltip);

              }

              previousPoint = null;

        }

    }

    /**

     * MAIN EXECUTION

     */

    var data = getDataAccordingToRanges(initial_ranges);

    generateCheckboxes(data);

    //main plot

    var plot = $.plot(plotContainer,data,plot_options);

    //overview

    //show initial selection on overview

    overview.setSelection(initial_ranges);

    $plotContainer.on("plotselected", plotselected);

    $plotContainer.on("plothover", plothover);

    $overviewContainer.on("plotselected", function (e, ranges) {

        plot.setSelection(ranges);

    });

    // user choices on overview

    $('#legend_container tr a').on("click", [data, initial_ranges], plotchoiced);

}

SummaryPlot(${h.js(c.ts_min)}, ${h.js(c.ts_max)}, ${h.js(c.commit_data)}, ${h.js(c.overview_data)});

</script>

</%def>