var c1 = document.getElementById("c1");
var parent = document.getElementById("p1");
c1.width = parent.offsetWidth - 40;
c1.height = parent.offsetHeight - 40;

function nearest(n, v) {
    n = n / v;
    n = (n < 0 ? Math.floor(n) : Math.ceil(n)) * v;
    return n;
}

$(document).ready(function(){
    var count = 17;
    var data = {
        labels : [],
        datasets : [
            {
                fillColor : "rgba(255,255,255,.1)",
                strokeColor : "rgba(255,255,255,1)",
                pointColor : "#b66e5d",
                pointStrokeColor : "rgba(255,255,255,1)",
                data : []
            }
        ]
    };

    var optionsAnimation = {
        //Boolean - If we want to override with a hard coded scale
        scaleOverride : true,
        //** Required if scaleOverride is true **
        //Number - The number of steps in a hard coded scale
        scaleSteps : 10,
        //Number - The value jump in the hard coded scale
        scaleStepWidth : 10,
        //Number - The scale starting value
        scaleStartValue : 0
    };

    // Not sure why the scaleOverride isn't working...
    var optionsNoAnimation = {
        animation : false,
        scaleFontColor : "rgba(255,255,255,1)",
        scaleLineColor : "rgba(255,255,255,1)",
        scaleGridLineColor : "transparent",
        // bezierCurve : false,

        //Boolean - If we want to override with a hard coded scale
        scaleOverride : true,
        //** Required if scaleOverride is true **
        //Number - The number of steps in a hard coded scale
        scaleSteps : 20,
        //Number - The value jump in the hard coded scale
        scaleStepWidth : 15,
        //Number - The scale starting value
        scaleStartValue : 500
    };

    var updateData = function(oldData){
        var labels = oldData["labels"];
        var dataSetA = oldData["datasets"][0]["data"];

        $.ajax({
            type: 'GET',
            url: 'https://xboxapi.com/v1/stats/hour/',
            dataType: 'JSON',
            success: function(response) {
                dataSetA.push(response['requests']);
                // labels.push(response['time']);
                labels.push('Count: ' + response['requests']);

                if (labels.length > count) {
                    labels.shift();
                    dataSetA.shift();
                }

                optionsAnimation.scaleSteps   = nearest(Math.max.apply(Math, dataSetA), 100) / 100;
                optionsNoAnimation.scaleSteps = optionsAnimation.scaleSteps;

                optionsAnimation.scaleStartValue   = (optionsAnimation.scaleSteps - 1) * 100;
                if (Math.min.apply(Math, dataSetA) < 20) {
                    optionsAnimation.scaleStartValue = 0;
                } else if ((Math.min.apply(Math, dataSetA) - (optionsAnimation.scaleSteps - 1) * 100) < 20) {
                    optionsAnimation.scaleStartValue = (Math.min.apply(Math, dataSetA) - 20);
                }
              
                optionsNoAnimation.scaleStartValue = optionsAnimation.scaleStartValue;
            }
        });
    };

    setInterval(function() {
        updateData(data);
        myNewChart.Line(data, optionsNoAnimation);
    }, (2.5 * 1000));

    //Get the context of the canvas element we want to select
    var ctx = document.getElementById('c1').getContext("2d");
    var myNewChart = new Chart(ctx);
    myNewChart.Line(data, optionsAnimation);
});