var h5 = document.getElementsByTagName('h5')[0];
// var start = document.getElementById('strt');
// var stop = document.getElementById('stp');
// var reset = document.getElementById('rst');

var score = 0;
var elScore = document.getElementById('score');


var sec = localStorage.getItem('globalTime');
var min = 0;
var hrs = 0;
var t;

function tick(){
   
    if( sec > 0){
        sec--;
        if(sec == 0){
            sec = 0;
            min = 0;
            hrs = 0; 
            ress = confirm("This part is finished! YOU SCORE IS: " + score + " | Do you want to spot it again?");
            if(ress){
                window.location.href = "http://127.0.0.1:5000/rules";
            }
            else{
                window.location.href = "http://127.0.0.1:5000/";
            } 
            
        } 
   
    }
}


function add() {
    tick();
    h5.textContent = (hrs > 9 ? hrs : "0" + hrs) 
            + ":" + (min > 9 ? min : "0" + min)
            + ":" + (sec > 9 ? sec : "0" + sec);
    timer();
}

function timer() {
    t = setTimeout(add, 1000);
}

timer();
// start.onclick = timer;
// stop.onclick = function() {
//     clearTimeout(t);
// }
// reset.onclick = function() {
//     h5.textContent = "00:00:00";
//     seconds = 0; minutes = 0; hours = 0;
// }

var httpRequest;

   // document.getElementById('clickme').onclick = 







const URL = 'http://192.168.37.69:50001/route/'


var count = 0;
            
function clickEvent(e) {
    // e = Mouse click event.
    var rect = e.target.getBoundingClientRect();
    var x = e.clientX - rect.left; //x position within the element.
    var y = e.clientY - rect.top;  //y position within the element.

    // localStorage.setItem('xPosition', x);
    // localStorage.setItem('yPosition', y);
    

    console.log("OK");
    httpRequest = new XMLHttpRequest();

    if(!httpRequest) {
        alert('Giving Up! Cannot send an XMLHTTO request.');
    }
    
    // httpRequest.withCredentials = true;
    httpRequest.open('POST', 'http://192.168.37.69:50001/pixels/'+count);
  
        
    var card1 = document.getElementById('card1');
    var card2 = document.getElementById('card2');
    
    console.log("OK");
    var data = {};
    data.X = x;
    data.Y = y;
    console.log(data)
    var res = JSON.stringify(data); 
    console.log("OK");
    
    httpRequest.send(res);
    console.log("OK");

    httpRequest.onload = function() {//Call a function when the state changes.
        console.log('-------------')
        if(httpRequest.status == 200) {
            if(this.responseText == "OK") {

                  count++;
                  score++;
                  elScore.textContent = ' '+ score;      
                  card1.src = URL + count;
                  card2. src = URL + (count+1);
                  
            } else if(this.responseText == "FINI") {
                ress = confirm("This part is finished! YOU SCORE IS: " + score + " | Do you want to spot it again?");
                if(ress){
                    window.location.href = "http://127.0.0.1:5000/rules";
                }
                else{
                    window.location.href = "http://127.0.0.1:5000/";
                } 
            } 
        }
    } 
    //console.log(JSON.stringify(data)) 
    // var xhr = new XMLHttpRequest();

    // if(!xhr) {
    //     alert('Giving Up! Cannot send an XMLHTTO request.');
    // }
     
    // xhr.open('POST', 'http://192.168.37.69:50001/pools');
    // xhr.send();


    // console.log(xhr.response);



    
    console.log("Left? : " + x + " ; Top? : " + y + ".");
    

}

function restartGame() {
    window.location.href = "http://127.0.0.1:5000/rules";
}






























// // Diaporamaa : --------------------------------------

// var diaporama = 1;
// affichage(diaporama);

// function boutons(n) {
// affichage(diaporama += n);
// }

// function actifIndic(n) {
// affichage(diaporama = n);
// }

// function affichage(n) {
// var i;
// var diapoImg = document.getElementsByClassName("diapo");

// if (n > diapoImg.length) {diaporama = 1}    
// if (n < 1) {diaporama = diapoImg.length}
// for (i = 0; i < diapoImg.length; i++) {
    
//     diapoImg[i].style.opacity = "0";
// }
// diapoImg[diaporama-1].style.opacity = "1";    

// }