// Get the data from the server

    let responses = {}
    let score_n = 0; // Initialize the score
    let score_a = 0; // Initialize the score
    let score_s = 0; // Initialize the score
    let redrawableNodes = document.getElementsByClassName('clear-on-redraw');


    document.addEventListener("DOMContentLoaded", function (event) {
        $('.otree-timer__time-left').on('finish.countdown', function (event) {
            document.getElementById('raw_responses').value = JSON.stringify(responses);
        });
    });


    function recordResponse(btn) {
        let mod = btn.name
        let response = btn.value
        liveSend({'type': 'response', 'response': response, 'mod': mod})
    }


    function sendAssign(btn) {
        let task = btn.value;
        let id_in_group = parseInt(btn.name);
        liveSend({'type': 'assign', 'task': task, 'id': id_in_group});
    }



    function liveRecv(data) {
        for (let [id_in_group, task, score] of data.task) {
            let playerq = `question${id_in_group}`;
            let playeropt = `option${id_in_group}`;
            let playermod = `mod${id_in_group}`;
            let playerscore = `mod${id_in_group}`;
            let isMe = id_in_group === js_vars.my_id;
            if (isMe) {
                for (let [qs, graphic_name, key] of data.question) {
                    question = document.getElementById(playerq)
                    mod = document.getElementById(playermod)
                    scorediv = document.getElementById(playerscore)
                    optDiv = document.getElementById(playeropt)
                    if (key === 5) {
                        optDiv.innerHTML = `<button class="btn btn-primary" onclick="recordResponse(this)" name="${task}" value="A" id="optionA"></button>
                        <button onclick="recordResponse(this)" name="${task}" value="B" id="optionB"></button>
                        <button onclick="recordResponse(this)" name="${task}" value="C" id="optionC"></button>
                        <button onclick="recordResponse(this)" name="${task}" value="D" id="optionD"></button>
                        <button onclick="recordResponse(this)" name="${task}" value="E" id="optionE"></button>`;
                    } else {
                        optDiv.innerHTML = `<button onclick="recordResponse(this)" name="${task}" value="A" id="optionA"></button>
                        <button  onclick="recordResponse(this)" name="${task}" value="B" id="optionB"></button>
                        <button  onclick="recordResponse(this)" name="${task}" value="C" id="optionC"></button>
                        <button  onclick="recordResponse(this)" name="${task}" value="D" id="optionD"></button>`;
        }
                    if (task === 'spa') {
                        img = `<img id="question" width="602" src=${graphic_name}/>`;
                        question.innerHTML = img;
                    } else {
                        question.innerHTML = `<span style="color: black">${qs}</span>`;
                    }
                    mod.innerHTML = `<span style="color: black">${task}</span>`;
                    scorediv.insertAdjacentHTML('beforeend', `<td>score for ${task}</td><td>${score}</td>`);
                    if (js_vars.role === 'You'){ // if leader are the player
                        scorediv.innerHTML = `<td>group score is:</td><td>${min_score}</td>`;
                    }
                }


                question.style.display = 'block';
                mod.style.display = 'block';
                scorediv.style.display = 'block';
                optDiv.style.display = 'block';
            }
        }

        if (data.new_assign) {
            for (let ele of redrawableNodes) {
                ele.style.display = 'none';
            }
        }
    }
 // time before we unhideDiv the first image (give time to get hands ready on keyboard)
    const INITIAL_DELAY = 2000;
    window.onload = QIDFunction

    function QIDFunction() {
        liveSend({'type': 'seen'});
    }

     document.addEventListener('DOMContentLoaded',  (event) => {
            liveSend({'type': 'load'});
        });

    document.addEventListener("DOMContentLoaded", function (event) {
    $('.otree-timer__time-left').on('update.countdown', function (event) {
         if (event.offset.totalSeconds === 180 ) {
            var popUpCounter = 0
            var popUpTimer = setTimeout(loadPopupBox, 1)

            $('#popupBoxClose').click(function () {
                unloadPopupBox();
            });

            $('#container').click(function () {
                unloadPopupBox();
            });

            function unloadPopupBox() { // TO Unload the Popupbox
                $('#popup_box').fadeOut("slow");
                $("#container").css({ // this is just for style
                    "opacity": "1"
                });

            }

            function loadPopupBox() { // To Load the Popupbox
                popUpCounter += 1;

                var counter = 60;
                var id;
                $('#popup_box').fadeIn("slow");
                $("#container").css({ // this is just for style
                    "opacity": "0.3"
                });

                id = setInterval(function () {
                    counter -= 1;
                    if (counter < 0) {
                        clearInterval(id);
                        unloadPopupBox();

                    } else {
                        $("#countDown").text("Paused for " + counter.toString() + " seconds.");
                    }
                }, 1000);


                if (popUpCounter < 4) {

                    popUpTimer = setTimeout(loadPopupBox, 1 * (popUpCounter + 1));

                } else {

                    clearTimeout(popUpTimer);
                }
            }
        }
    });
});