{{ extends "global/Page.html" }}
{{ block title }} {{ endblock }}

{{ block content }}

<center>

    <br><br><br>
    <table width="100%" id="stimulustable">
        <tr>
            <td class="td1" width="90px">£0</td>
            <td class="td1"></td>
            <td class="td1" width="90px"></td>
        </tr>
        <tr>
            <td class="td1" width="90px">
                <span id="top"><center>&nbsp;50</center></span>
                <span id="bot"><center>&nbsp;50</center></span>
            </td>
            <td class="td1"></td>
            <td class="td1" width="90px">£<span id="stimC"></td>
        </tr>
        <tr>
            <td class="td1" width="90px">£<span id="stimX"></span></td>
            <td class="td1"></td>
            <td class="td1" width="90px"></td>
        </tr>
    </table>

    <table width="100%" id="stimulustable2">
        <tr>
            <td class="td1" width="90px"></td>
            <td class="td1"></td>
            <td class="td1" width="90px">£0</td>
        </tr>
        <tr>
            <td class="td1" width="90px">£<span id="stimC2"></td>
            <td class="td1"></td>
            <td class="td1" width="90px">
                <span id="top2"><center>&nbsp;50</center></span>
                <span id="bot2"><center>&nbsp;50</center></span>
            </td>
        </tr>
        <tr>
            <td class="td1" width="90px"></td>
            <td class="td1"></td>
            <td class="td1" width="90px">£<span id="stimX2"></span></td>
        </tr>
    </table>
    <span hidden>
        loadtime: <span id="loadtime" ></span><br>
        riskyonleft: <span id="riskyonleft"></span><br>
        received: <span id="received"></span><br>
        choicecountervalue: <span id="choicecountervalue"></span><br>
    </span>

    <br><br> 
    <table width="100%">
        <tr>
            <td width="110px" class="td1"><span id="checkL"></span></td>
            <td class="td1"></td>
            <td width="110px" class="td1"><span id="checkR"></span></td>
        </tr>
    </table>
    <br><br><br><br>

<table width="100%">
    <tr>
        <td width="90px" style="border: 0px;">
            <button id="leftbutton" type="button" class="choicebutton">Left</button>
        </td>
        <td style="border: 0px;"></td>
        <td width="90px" style="border: 0px;">
            <button id="rightbutton" type="button" class="choicebutton">Right</button>
        </td>
    </tr>
</table>

</center>




<!-- the only value sent with form is boolean indicating that the round ends -->
<input type="hidden" name="stopped" id="id_stopped">


{{ endblock }}

{{ block scripts }}
<script>

document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".powered-by-otree")
        .forEach(el => el.remove());
});

document.body.style.background = '#fff';
document.getElementsByTagName("body")[0].style.position = "fixed";
document.getElementsByTagName("html")[0].style.position = "fixed";

const topp = document.getElementById("top");
const topp2 = document.getElementById("top2");
topp.style.display = "flex";
topp.style.alignItems = "center";
topp.style.backgroundColor = "coral";
topp.style.fontSize = "18px";
topp.style.color = "white";
topp.style.height = "50px";
topp.style.width = "30px";
topp2.style.display = "flex";
topp2.style.alignItems = "center";
topp2.style.backgroundColor = "coral";
topp2.style.fontSize = "18px";
topp2.style.color = "white";
topp2.style.height = "50px";
topp2.style.width = "30px";

const bott = document.getElementById("bot");
const bott2 = document.getElementById("bot2");
bott.style.display = "flex";
bott.style.alignItems = "center";
bott.style.backgroundColor = "#0e4c92";
bott.style.fontSize = "18px";
bott.style.color = "white";
bott.style.height = "50px";
bott.style.width = "30px";
bott2.style.display = "flex";
bott2.style.alignItems = "center";
bott2.style.backgroundColor = "#0e4c92";
bott2.style.fontSize = "18px";
bott2.style.color = "white";
bott2.style.height = "50px";
bott2.style.width = "30px";

document.getElementById('checkL').style.color = 'green';
document.getElementById('checkR').style.color = 'green';

// set button widths to equal width
document.getElementById("leftbutton").style.width = '92px';
document.getElementById("rightbutton").style.width = '92px';

document.getElementById('riskyonleft').innerHTML = 1; // INITIALLY RISKY ALWAYS ON LEFT, UPDATED BY liveRecv
document.getElementById('stimulustable2').style.display = 'none';
document.getElementById('stimX').innerHTML = js_vars.stimuliX[0];
document.getElementById('stimX2').innerHTML = js_vars.stimuliX[0];
document.getElementById('stimC').innerHTML = js_vars.stimuliC[0];
document.getElementById('stimC2').innerHTML = js_vars.stimuliC[0];

// record load time of the initial stimulus
var dtt = new Date();
document.getElementById('loadtime').innerHTML = dtt.getTime();


// LEFT
let leftbutton = document.getElementById("leftbutton");
leftbutton.addEventListener("click", function() {
    document.getElementById('checkL').innerHTML = '&check;';
    document.getElementById("leftbutton").style.backgroundColor = "#4992fd"; // 25% lighter
    let d = new Date();
    let ld = document.getElementById('loadtime').innerHTML;
    let choicerisky = 0;
    if (document.getElementById('riskyonleft').innerHTML == 0) { choicerisky = 1 }
    setTimeout(function(){
        document.getElementById('checkL').innerHTML = '';
        document.getElementById("leftbutton").style.backgroundColor = "#0d6efd";
        document.getElementById("rightbutton").style.visibility = "hidden";
        document.getElementById("leftbutton").style.visibility = "hidden";
        liveSend({'direction': 'L',
                  'choicerisky': choicerisky,
                  'time': d.getTime(), 
                  'loadtime': ld,
                  'riskyonleft': document.getElementById('riskyonleft').innerHTML
                 });

    }, 600);

});

// RIGHT
let rightbutton = document.getElementById("rightbutton");
rightbutton.addEventListener("click", function() {
    document.getElementById('checkR').innerHTML = '&check;';
    document.getElementById("rightbutton").style.backgroundColor = "#4992fd"; // 25% lighter
    let d = new Date();
    let ld = document.getElementById('loadtime').innerHTML;
    let choicerisky = 0;
    if (document.getElementById('riskyonleft').innerHTML == 0) { choicerisky = 1 }
    setTimeout(function(){
	document.getElementById('checkR').innerHTML = '';
        document.getElementById("rightbutton").style.backgroundColor = "#0d6efd";
        document.getElementById("rightbutton").style.visibility = 'hidden'; 
        document.getElementById("leftbutton").style.visibility = 'hidden';
        liveSend({'direction': 'R',
                  'choicerisky': choicerisky,
                  'time': d.getTime(), 
                  'loadtime': ld,
                  'riskyonleft': document.getElementById('riskyonleft').innerHTML
                 });

    }, 600);

});




function liveRecv(data) { // this function receives the live message from server to create new stimuli

  	document.getElementById('received').innerHTML += 1;
  	document.getElementById('choicecountervalue').innerHTML = data.choicecountervalue;
	document.getElementById('stimulustable').style.display = 'none';
	document.getElementById('stimulustable2').style.display = 'none';

  	if (data.choicecountervalue == js_vars.howmanychoices) {
        document.getElementById("id_stopped").value = 1;
      	document.getElementById("form").submit();
    }

  	// practice round ends after one decision
  	if ((data.choicecountervalue == 1) && (js_vars.practice))  {
        document.getElementById("id_stopped").value = 1;
      	document.getElementById("form").submit();
    }

    setTimeout(function(){
        // randomise here the side of the risky stimulus (riskyonleft)
        document.getElementById("rightbutton").style.visibility = "visible";
  	document.getElementById("leftbutton").style.visibility = "visible";

        if (Math.random() < 0.5) {
            document.getElementById('riskyonleft').innerHTML = 1;
            document.getElementById('stimulustable').style.display = 'table';
            document.getElementById('stimulustable2').style.display = 'none';
        } else {
            document.getElementById('riskyonleft').innerHTML = 0;
	    document.getElementById('stimulustable2').style.display = 'table';
            document.getElementById('stimulustable').style.display = 'none';
        }

        let newstimX = js_vars.stimuliX[data.choicecountervalue];
        let newstimC = js_vars.stimuliC[data.choicecountervalue];

      	document.getElementById("stimX").innerHTML = newstimX;
        document.getElementById("stimX2").innerHTML = newstimX;
      	document.getElementById("stimC").innerHTML = newstimC;
        document.getElementById("stimC2").innerHTML = newstimC;

      	// record load time of the new stimulus
        var dtt = new Date();
        document.getElementById('loadtime').innerHTML = dtt.getTime();

    }, 1000);
}


</script>
{{ endblock }}