$(function () {
    //variables init
    const MAXITEMS = 5;
    var languages;
    var counts;
    var chart=null;
    //html components
    var canvas = $('#languagePie');
    var ftrindex = $('#ftrindex');



    //init Pie Chart
    //@params   data: object
    function initLimitedPie(data){
        if (window.debugmode) console.log(data);
        //check if pie exists and destroy
        let exist = existingChart(chart);
        //init/empty arrays for mapping
        languages=[];
        counts=[];
        objects=[];
        //set first object to other countries
        languages.push('others')
        counts.push(0);

        //map object to array
        var objects = $.map(data.list,function(value){
           return[value]
        });

        //sort array, biggest first
        objects.sort(function(a, b){
            var a1= a.count, b1= b.count;
            if(a1== b1) return 0;
            return a1< b1? 1: -1;
        });
        //foreach item in the mapped array
        $.each(objects,function(i,object) {
            //If index is smaller than maxitems, -1 for index0 and -1for other language cat
            if(i>(MAXITEMS-2)) {
                counts[0] += object.count
            }
            //else add to splitted arrays
            else {
                languages.push(object.lang);
                counts.push(object.count);
            }
        });
        //if others is empty
        if(counts[0]==0){
            //remove others
            languages.shift();
            counts.shift();
        }
        else{
            //shift others to end of array
            languages.push(languages.shift());
            counts.push(counts.shift());
        }

        // datasetting for chart, split from init for readable purpose
        const input = {
            labels: languages,
            datasets: [{
                label: 'Languages',
                data: counts,
                backgroundColor: [
                    '#6B878C',//green
                    '#AA854C',//darkestbrown
                    '#555A64',//darkgray
                    '#D1A85E',//brown
                    '#383E49',//darkgreen
                ],
                hoverOffset: 4,
                borderWidth: 0,
            }]
        };

        //create Chart with datasettings
        chart = new Chart(canvas, {
            type: 'pie',
            data: input,
            options: {
                        responsive: true,
    maintainAspectRatio: false,
                       animation: false,
                plugins: {
                    labels:
                        {
                            //label inside piechart
                            render: function (args) {
                      return args.label + ' - ' + args.value;
                            },
                            fontColor: '#fff',
                       // draw label in arc, default is false
        // bar chart ignores this
        arc: false,

        // position to draw label, available value is 'default', 'border' and 'outside'
        // bar chart ignores this
        // default is 'default'
        position: 'border',

        // draw label even it's overlap, default is true
        // bar chart ignores this
        overlap: false
                        },
                    tooltip :
                        {
                            enabled:false
                        }
                }
            },
        })

     //update if element existed on init
        if (exist) {
            chart.update();
        }

    }


    function existingChart(chart){
        var exist =false;
        //if chart exists, destroy chart first
        if(chart){
           exist = true;
            chart.destroy();
        }
        return exist;
    }


//If data object holder ftrindex has length, data is available
    if (ftrindex.length) {
        var ftrindexdata = ftrindex.data('handle');
        //attach hook for when language data changes, call function initPie to init or ReInit
        ftrindexdata.attachHook('languagepie-project', 'languages', initLimitedPie);
            
              

    } else {
        //problem.
        console.log('#ftrindex has no length, abort mission.')
    }

});

/*******************************************************************/
/* ftrtch dino */
/* [type: JS] [file:project-languagepie] [34.127] DESIGN*/
/*******************************************************************/
/* 0.4 D>D */
/* db 168 */