var listen = new EventSource('http://vmzakova.fei.stuba.sk/sse/sse.php');
var cline = document.getElementById("cervena");
var mline = document.getElementById("modra");


listen.onopen = function(){
    console.log('DEBUG: Connectioned');
}

var config = {
    type: 'line',
    data: {
        labels: [],
        datasets: [{
            label: 'Data 1',
            fill: false,
            borderColor: window.chartColors.red,
            backgroundColor: window.chartColors.red,
            data: [],
            hidden: false
        }, {
            label: 'Data 2',
            fill: false,
            backgroundColor: window.chartColors.blue,
            borderColor: window.chartColors.blue,
            data: [],
            hidden: false
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: 'Graf:'
        },
        tooltips: {
            mode: 'index',
            intersect: false,
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            xAxes: [{
                display: true,
                ticks: {
                    callback: function(dataLabel, index) {
                        return index % 2 === 0 ? dataLabel : '';
                    }
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Horizontalna hodnota'
                }
            }],
            yAxes: [{
                display: true,
                beginAtZero: false,
                scaleLabel: {
                    display: true,
                    labelString: 'Vertikalna hodnota'
                }
            }]
        }
    }
};

window.onload = function() {
    var ctx = document.getElementById("mainGraf").getContext('2d');
    window.myLine = new Chart(ctx, config);
};

listen.onmessage = function(e){
    //console.log(e.data);
    var info = JSON.parse(e.data);

    console.log(info.x);
    console.log(info.y1);
    console.log(info.y2);

    if (config.data.datasets.length > 0) {

        config.data.labels.push(info.x);
        config.data.datasets[0].data.push(info.y1);
        config.data.datasets[1].data.push(info.y2);

        window.myLine.update();
    }
}

window.onload = function(){
    document.getElementById('stopGraf').addEventListener('click', function() {
        listen.close();
        console.log('DEBUG: Connection has been stopped!');
    });
}

/*document.getElementById('stopGraf').addEventListener('click', function() {
    listen.close();
    console.log('DEBUG: Connection has been stopped!');
});*/

/*function cLineCheck(){
    if(cline.checked == true){
        config.data.datasets[0].hidden = 'false';
        window.myLine.update();
    }
    else{
        config.data.datasets[0].hidden = 'true';
        window.myLine.update();
    }
}

function mLineCheck(){
    if(mline.checked == true){
        config.data.datasets[1].hidden = 'false';
        window.myLine.update();
    }
    else{
        config.data.datasets[1].hidden = 'true';
        window.myLine.update();
    }
}*/

/*cline.addEventListener('click', function(){
    if(cline.checked == true){
        config.data.datasets[0].hidden = 'false';
        window.myLine.update();
    }
    else{
        config.data.datasets[0].hidden = 'true';
        window.myLine.update();
    }

});

mline.addEventListener('click', function(){
    if(mline.checked == true){
        config.data.datasets[1].hidden = 'false';
        window.myLine.update();
    }
    else{
        config.data.datasets[1].hidden = 'true';
        window.myLine.update();
    }

});*/