doc.ready(() => {

    ////////////////////////////////////////////////////////////
    // Globals
    ////////////////////////////////////////////////////////////

    const pies = $(".-jsPieValue");
    const charts = $(".o-pieCharts__chart");

    let pie_values = [ // this is used to keep track of the current pie state

        Array(charts.length).fill(0),
        Array(charts.length).fill(0)

    ];


    ////////////////////////////////////////////////////////////
    // Helpers
    ////////////////////////////////////////////////////////////

    // Temp data generation:

    const generateDummyPieValues = (sets_of_data = 1) => { // 1 by default, pass in 2 for comparison

        /*
            The real data needs to always be a 2D array, even if
            there isn't a comparison being made.

            // to show regular full blue circles:

            pie_values = [

                [10, 20, 30, 40, 50], // regular data

            ];

            // to show comparison with blue / orange half circles:

            pie_values = [

                [10, 20, 30, 40, 50], // regular data
                [50, 40, 30, 20, 10], // comparison data
            ];

        */

        let data = [];

        for(let i = 0; i < sets_of_data; i++)
            data.push([...Array(charts.length)].map(e => rand(1, 230)));

        return data;
    }

    // Numbers animation:

    const tweenPieValues = (pie, current, next, speed) => {

        if(current != next) {

            pie.text(current);

            setTimeout(() => {

                tweenPieValues(pie, (current > next ? --current : ++current), next, speed);

            }, speed);
        }
    }


    ////////////////////////////////////////////////////////////
    // Update
    ////////////////////////////////////////////////////////////

    // Numerical Values:

    const updatePieValues = new_pie_values => {

        new_pie_values.map((e, pie_set) => {

            charts.each(function(p) {

                const chart = $(this);
                const pie = chart.find(".m-pie").eq(pie_set).find(".a-text");
                const current = pie_values[pie_set][p];
                const next = new_pie_values[pie_set][p];
                const difference = current > next ? (current - next) : (next - current);
                const speed = 450 / difference;

                pie_values[pie_set][p] = new_pie_values[pie_set][p];

                tweenPieValues(pie, current, next, speed);

            });

        });

        updatePieSizes();
    }

    // Sizes:

    const updatePieSizes = () => {

        const is_comparison = pie_values.length == 2;
        const max_height = is_comparison ? 250 : 300;

        pie_values.map((e, pie_set) => {

            const largest = pie_values[pie_set].indexOf(Math.max.apply(Math, pie_values[pie_set]));

            charts.each(function(p) {

                const chart = $(this);
                const pie = chart.find(".m-pie").eq(pie_set);
                const circle = pie.find(".a-circle");
                const percentage = pie_values[pie_set][p] / pie_values[pie_set][largest];
                const size = max_height * percentage;

                if(is_comparison) { // comparison

                    $(".o-pieCharts").addClass("-compare");

                    circle.css({

                        width : (size / 2),
                        height : size,
                        "border-radius" : (pie_set == 0 ? `${ size / 2 }px 0 0 ${ size / 2 }px` : `0 ${ size / 2 }px ${ size / 2 }px 0`)

                    });

                } else {

                    $(".o-pieCharts").removeClass("-compare");

                    circle.css({ width : size, height : size });
                }

                size >= 100 ? pie.addClass("-large") : pie.removeClass("-large");

            });

        });
    }


    ////////////////////////////////////////////////////////////
    // Init and updates
    ////////////////////////////////////////////////////////////

    // Update on data change:

    doc.on("click", () => { // This will likely be an input onchange event instead of a doc click

        updatePieValues(generateDummyPieValues(2)); // replace generateDummyPieValues() call with data array

    });

    // Initialisation:

    updatePieValues(generateDummyPieValues(2)); // replace generateDummyPieValues() call with data array

});