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

{{ block content }}

<!-- these divs have position: absolute
     so there is space for five rows of boxes -->

<div id="roundinfo" hidden>
        Tap #&nbsp;<span id="gaintally">1</span>&nbsp; 
</div>

<center>
    <div id="bidwrapperabs">
        <div id="biddivabs">
            <div id="bid">
                <center>
                    <span id="current"></span>
                </center>
            </div>
        </div>
    </div>
</center>

<span id="pageloadcounter" hidden></span>
<span id="loadtime" hidden></span>
<span id="test" hidden></span>
<span id="stimulus" hidden></span>

<div id="tapbuttons">
    <div id="float-child-element">
        <div id="red">
            <!--<button id="leftbutton" type="button" class="choicebutton">Smaller</button>-->
            <button id="leftbutton" type="button" class="choicebutton">Smaller</button>
        </div>
    </div>
    <div id="float-child-element">
        <div id="yellow">
            <!--<button id="rightbutton" type="button" class="choicebutton">Larger</button>-->
            <button id="rightbutton" type="button" class="choicebutton">Larger</button>
        </div>
    </div>
</div>

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

{{ if pilot == 1 }}
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
{{ endif }}

{{ endblock }}

{{ block scripts }}
<script>
document.body.style.background = '#91D8FF';
/* in this app, always show the number inside the box */
document.getElementById("bid").style.visibility = "visible";








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

// update pageloadcounter if there is a refresh
const navType = performance.getEntriesByType("navigation")[0].type;
if (navType === 'reload') {
  // Get count from sessionStorage
  let count = sessionStorage.getItem('reloadCount') || 0;
  count = parseInt(count) + 1;
  sessionStorage.setItem('reloadCount', count);
  document.getElementById('pageloadcounter').textContent = count;
} else {
  // First load
  sessionStorage.setItem('reloadCount', 0);
  document.getElementById('pageloadcounter').textContent = 0;
}




let divi = document.getElementById("biddivabs");
//divi.style.top = 200 + "px"; // keep this commented off!
divi.style.left = "35%"; // 25% when width is 50vw
divi.style.width = "30vw";
divi.style.height = "30vw";

// change otree container class padding to zero for this page only
var elems = document.getElementsByClassName('container');
Array.prototype.filter.call(elems, function(testElement){
    testElement.style.padding = "0px" 
});


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

//let divi = document.getElementById("biddivabs");
//divi.style.top = 200 + "px"; // keep this commented off!
//divi.style.left = "25%";

// IF PAGE IS REFRESHED, THE CURRENT STIMULUS VALUE IS SET FROM THE BEGINNING OF player.stimulus BECAUSE INITIAL VALUE OF gaintally IS 1; SHOULD USE player.choicecounter INSTEAD
document.getElementById("gaintally").innerHTML = js_vars.choicecounter + 1
setTimeout(function(){
    document.getElementById("current").innerHTML = js_vars.stimulus[Number(document.getElementById("gaintally").innerHTML) - 1]
    document.getElementById("stimulus").innerHTML = js_vars.stimulus[Number(document.getElementById("gaintally").innerHTML) - 1]
}, 500);

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

function liveRecv(data) { // this function receives the live message from server to create new stimuli
  
    // reset pageloadcounter
    sessionStorage.setItem('reloadCount', 0);
    document.getElementById('pageloadcounter').textContent = 0;

  	if (data.openedcards == js_vars.howmanyswipes)  {
        document.getElementById("id_stopped").value = 1;
      	document.getElementById("form").submit(); // form submitted only after required number of taps 
    }
  
  	// practice round ends after one tap
  	if ((data.openedcards == 1) && (js_vars.practice))  {
        document.getElementById("id_stopped").value = 1;
      	document.getElementById("form").submit();
    }

    setTimeout(function(){
        document.getElementById("gaintally").innerHTML = Number(document.getElementById("gaintally").innerHTML) + 1;
	    document.getElementById("rightbutton").style.visibility = "visible";
    	document.getElementById("leftbutton").style.visibility = "visible";

      	let newstim = js_vars.stimulus[Number(document.getElementById("gaintally").innerHTML) - 1];
    	document.getElementById("current").innerHTML = newstim
      	document.getElementById("stimulus").innerHTML = newstim;

	  	document.getElementById("leftbutton").disabled = false;
	  	document.getElementById("rightbutton").disabled = false;

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

    }, 1000);
}


// OPEN
let leftbutton = document.getElementById("leftbutton");
leftbutton.addEventListener("click", function() {
    document.getElementById("current").innerHTML = '';
    //document.getElementById("leftbutton").style.visibility = "hidden";
	document.getElementById("leftbutton").style.backgroundColor = "#4992fd"; // 25% lighter
  	document.getElementById("rightbutton").disabled = true; 
  	document.getElementById("leftbutton").disabled = true; 
    setTimeout(function(){ document.getElementById("leftbutton").style.backgroundColor = "#0d6efd"; }, 600);

  	let d = new Date();
    let ld = document.getElementById('loadtime').innerHTML;
    liveSend({'opened': 1,
              'frame': 'tap',
              'direction': 'L',
              'time': d.getTime(), 
              'starttime': 0,
              'loadtime': ld,
              'x': '', 
              'y': '',
              'startleft': '',
              'touchtimes': '',
              'stimulus': document.getElementById('stimulus').innerHTML,
              'pageloads': document.getElementById('pageloadcounter').innerHTML
             });
 
});

// STOP
let rightbutton = document.getElementById("rightbutton");
rightbutton.addEventListener("click", function() {
    document.getElementById("current").innerHTML = '';
    //document.getElementById("rightbutton").style.visibility = "hidden";
	document.getElementById("rightbutton").style.backgroundColor = "#4992fd"; // 25% lighter
  	document.getElementById("rightbutton").disabled = true; 
  	document.getElementById("leftbutton").disabled = true; 
    setTimeout(function(){ document.getElementById("rightbutton").style.backgroundColor = "#0d6efd"; }, 600);

  	let d = new Date();
    let ld = document.getElementById('loadtime').innerHTML;
    liveSend({'opened': 1,
              'frame': 'tap',
              'direction': 'R',
    		  'time': d.getTime(), 
          	  'starttime': 0,
              'loadtime': ld,
              'x': '', 
              'y': '',
              'startleft': '',
              'touchtimes': '',
              'stimulus': document.getElementById('stimulus').innerHTML,
              'pageloads': document.getElementById('pageloadcounter').innerHTML
             });

});



</script>
{{ endblock }}