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

{{ block content }}

<!-- body onload setStartTime() removed -->

<div id="generaldiv">
    {{ if player.round_number < 3 }}
        <p>
            Swipe the boxes
        </p>
    {{ endif }}
</div>

<br>
<div id="myDIV" class="container3 x-scroll x-mandatory" onscroll="scrolltrack()">
    <div class="element3">
        <span id="choicetext1">
            {{ if watches }}
                <img src="{{ shoeimage1 }}" class="fitting-image2 watches"><br>
            {{ else }}
                <img src="{{ shoeimage1 }}" class="fitting-image2 shoes"><br>
            {{ endif }}
        </span>
    </div>
    <div class="element3">
        <span id="choicetext2">
            {{ if watches }}
                <img src="{{ shoeimage2 }}" class="fitting-image2 watches"><br>
            {{ else }}
                <img src="{{ shoeimage2 }}" class="fitting-image2 shoes"><br>
            {{ endif }}
        </span>
    </div>
    <!-- the below is commented off in the binary choice app
    <div class="element3">
        <span id="choicetext3">
            Choice 3<br><br>
        </span>
    </div>
    -->
</div>

<p hidden>
    <span id="currentx"></span>
</p>
<p hidden>
    <!-- these are used to store the values of x, y, and choice during scrolling 
         these values are retrieved when the choicebutton is clicked -->
    <span id="y"></span><br>
    <span id="x"></span><br>
    <span id="choice"></span>
</p>
<p id="choiceindicator">
    <span id="yourchoice"></span>
</p>

<center>
    <button id="choicebutton">OK</button>
</center>

<input type="hidden" name="y" id="id_y">
<input type="hidden" name="time_endscrolling" id="id_time_endscrolling">
<input type="hidden" name="x" id="id_x">
<input type="hidden" name="time_startscrolling" id="id_time_startscrolling">
<input type="hidden" name="dectime_end" id="id_dectime_end">
<input type="hidden" name="choice" id="id_choice">


{{ endblock }}

{{ block scripts }}
<script>
/* 
	randomise the initial position of the scroll bar so that the players
	do not have a tendency to choose the initially shown option
*/
const element = document.getElementById("myDIV");
const initposition = 150; //10 + Math.floor(Math.random() * 300); // changed 21/9/2024
element.scrollLeft = initposition;


/*
	this function tracks the position of the scrollbar and it is called whenever the scrollbar position changes
    (about 20 times per second)
	i.e. this sets values for player.x and player.y
    the x-coordinates are the locations of the scrollbar
    the y-coordinates are the time stamps when the x-coordinates are recorded
*/
function scrolltrack() {
  	var d = new Date();
	const element = document.getElementById("myDIV");
    let x = element.scrollLeft;

  	/* 
    	the below lines make the information appear only after a bit (3 px) of scrolling
    */
	if (Math.abs(x.toFixed() - initposition) > 3) { 
        //const element = document.querySelector('.element3');
        //element.style.scrollSnapAlign = 'center';
		document.getElementById("choicetext1").style.visibility = 'visible';		
      	document.getElementById("choicetext2").style.visibility = 'visible';		
      	//document.getElementById("choicetext3").style.visibility = 'visible';		
      	document.getElementById("generaldiv").style.visibility = 'visible';
        document.getElementById("choicebutton").style.visibility = 'visible';
        document.getElementById("choiceindicator").style.visibility = 'visible';

		// startscrolling is recorded only when these elements are made visible
      	if (!(document.getElementById('id_time_startscrolling').value)) {
            // the below is saved as a string instead of float because Python (pandas) 
            // has problems reading large numbers from csv files
            document.getElementById('id_time_startscrolling').value = String(d.getTime()); 
        }
        // subtract here time_startscrolling from y
        var startscrolling = document.getElementById('id_time_startscrolling').value;
        // the below line adds time as y-coordinate into a list of y-coordinates separated by ','
        document.getElementById("y").innerHTML += d.getTime() - startscrolling + ','; // OK => checked 09/10/2023
        document.getElementById("id_time_endscrolling").value = String(d.getTime()); // absolute time, this is updated until scrolling stops

	}

  	// the below line adds the current x-coordinate into a list of x-coordinates separated by ','
  	document.getElementById("x").innerHTML += x.toFixed() + ',';
	document.getElementById("currentx").innerHTML = x.toFixed(); // just for testing

  	/* 
    	the below lines change the choice indicator div on the page, 
        i.e. as you scroll from option to another the choice indicator changes
    */
  	if (x.toFixed() > 150) { // add condition (&& x.toFixed() <= 450) for the trinary choice app
    	document.getElementById("choice").innerHTML = 2;
        document.getElementById("yourchoice").innerHTML = js_vars.choice2;

    /* the below is commented off in the binary choice app
	} else if (x.toFixed() > 450) {
        document.getElementById("choice").innerHTML = 3;
        document.getElementById("yourchoice").innerHTML = js_vars.choice3;
        document.getElementById("choiceloss").innerHTML = "&nbsp;";
	*/
    
    } else {
        document.getElementById("choice").innerHTML = 1;
        document.getElementById("yourchoice").innerHTML = js_vars.choice1;
    }


}

var choicebutton = document.querySelector('#choicebutton');

/*
	the below function is run when the choicebutton is clicked
    i.e. this sends the information that is saved in the page
*/
function fchoice() {
 	var d = new Date();
  	document.getElementById('id_x').value = document.getElementById('x').innerHTML;
  	document.getElementById('id_y').value = document.getElementById('y').innerHTML;
    document.getElementById('id_dectime_end').value = d.getTime();
  	document.getElementById('id_choice').value = document.getElementById('choice').innerHTML;
}

choicebutton.addEventListener("click", fchoice);

</script>
{{ endblock }}