$(function () {

    function changesChart(labels, datasets) {
        var $container=$('.changes-chartcontainer');
        $container.empty();
        var $canvas = $('<canvas>').addClass('chart').appendTo($container);
        var charttitle = "Changes";

        var chart = new Chart($canvas, {
            type: 'line',

            data: {
                labels: labels,
                datasets: datasets
            },
            options: {
                animation: false,
                title: {display: true, text: charttitle, fontColor: "#fff"},
                legend: {

                    labels: {
                        fontColor: "#fff",
                    }
                },
                scales: {
                    y: {
                        grid: {display: false},
                        title: {display: true, text:'occurrence in % of articles'},
                        ticks: {
                            stepSize: 10,
                            beginAtZero: true,

                        }
                    }
                },
            }
        });
    }

    function changesTimeline(data, keywords, hook, steptype='month') {

        if (window.debugmode) console.log('got changes timeline', {d: data, labels: keywords});

        var changes={}, labels = [];

        const shortMonthNames = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"];
        const bordercolors = ['#d6c3c9', '#b49082', '#98473e', '#a37c40', '#07090f'];

        $.each(data, function (i, step) {
          
            switch (steptype)
            {
              case 'day':labels.push(step.id.day+'/'+step.id.month);break;
              case 'month':labels.push(shortMonthNames[step.id.month - 1]);break;
              default: labels.push('?');  
            }

            $.each(step.fields, function(f, count){
                if (!changes[f]) changes[f]=[];
                changes[f].push(count);
            });


        });

        var datasets = [];
        var idx=0;
        $.each(changes, function(tid, values){
            datasets.push({
                data: values,
                fill: false,
                borderColor: bordercolors[idx++],
                label: keywords[tid],
                lineTension: 0.2,

            })});

        changesChart(labels, datasets);

    }

    if ($('#ftrindex').length) {
        var ftrindex = $('#ftrindex').data('handle');
        ftrindex.attachHook('changes-timeline', 'timeline', changesTimeline, {field: 'changes', step: 'month', top: 6});

    } else {
        console.log('#ftrindex has no length, abort mission.')
    }
});
/*******************************************************************/
/* ftrtch dino */
/* [type: JS] [file:project-changes-timeline] [36.154] DESIGN*/
/*******************************************************************/
/* 0.7 D>D */
/* db 177 */