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

{{ block content }}


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

<br>

<p id="choiceindicator">
    <span id="yourchoice"></span>
</p>


<div id="myDIV" class="container3 x-scroll multiattribute" onscroll="scrolltrack()">
    <div class="element3">
        <span id="choicetext1"><br>
            <img src="{{ shoeimage1 }}" class="gallery-img2"><br>
            <br><br><br><p>
                <center>Star rating: 3.5</center>
            </p><br>
        </span>
    </div>
    <div class="element3">
        <span id="choicetext2"><br>
            <img src="{{ shoeimage2 }}" class="gallery-img2"><br>
            <br><br><br><p>
                <center>Star rating: 4.1</center>
            </p><br>
        </span>
    </div>
</div>

<p>
    <!-- this is just for testing, unhide if you want to see the current x position -->
    <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 onto the form using JavaScript function fchoice() 
         when the choicebutton is clicked 
         please use <p hidden> if not testing
    -->
    y: <span id="y"></span><br>
    x: <span id="x"></span><br>
    choice: <span id="choice"></span>
</p>

    <!-- these are for testing -->
<p hidden>
    Length of player.y: <span id="ylength"></span><br>    
    Length of player.x: <span id="xlength"></span><br>    
</p>

<center>
    <button id="choicebutton1" name="choice" value="1">1</button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button id="choicebutton2" name="choice" value="2">2</button>
</center>

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




{{ endblock }}

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


const element = document.getElementById("myDIV");
/* 
	randomise the initial position of the scroll bar so that the players
	do not have a tendency to choose the initially shown option
	const initposition = Math.floor(Math.random() * 250); /* 10 + Math.floor(Math.random() * 250);
*/
const initposition = 150; /* 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("choicebutton1").style.visibility = 'visible';
        document.getElementById("choicebutton2").style.visibility = 'visible';
        document.getElementById("choiceindicator").style.visibility = 'visible';

		// time_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 + ',';
        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

  	// this is for testing: indicate the length of x and y
  	document.getElementById("ylength").innerHTML = (document.getElementById("y").innerHTML.match(/,/g) || []).length
  	document.getElementById("xlength").innerHTML = (document.getElementById("x").innerHTML.match(/,/g) || []).length
  
  	/* 
    	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) {
    	document.getElementById("choice").innerHTML = 2;
        document.getElementById("yourchoice").innerHTML = js_vars.choice2;    
    } else {
        document.getElementById("choice").innerHTML = 1;
        document.getElementById("yourchoice").innerHTML = js_vars.choice1;
    }

}


/*
let touchStartX = 0;
let touchStartY = 0;

// 1. Capture where the touch starts
element.addEventListener('touchstart', function(e) {
    touchStartX = e.touches[0].clientX;
    touchStartY = e.touches[0].clientY;
}, { passive: true });

// 2. Intercept the movement vector before iOS scrolls the element
element.addEventListener('touchmove', function(e) {
    const currentX = element.scrollLeft;
    const currentY = element.scrollTop;

    // Calculate swipe distance and direction
    const deltaX = e.touches[0].clientX - touchStartX;
    const deltaY = e.touches[0].clientY - touchStartY;

    // Scenario A: User is inside the "X-Locked Zone" (X is between 5 and 295)
    if (currentX >= 5 && currentX <= 295) {
        // If they attempt to swipe up or down (Y-axis movement), block it
        if (Math.abs(deltaY) > Math.abs(deltaX)) {
        	e.preventDefault(); // Kills Y scrolling seamlessly without resetting X
        }
    } 

    // Scenario B: User is outside the zone (X > 295 or X < 5) AND has scrolled vertically
    else if (currentY > 5) {
        // If they attempt to swipe left or right (X-axis movement), block it
        if (Math.abs(deltaX) > Math.abs(deltaY)) {
        	e.preventDefault(); // Kills X scrolling seamlessly without resetting X to 0
        }
    }
}, { passive: false }); // 'passive: false' is mandatory to allow e.preventDefault()


*/

















var choicebutton1 = document.querySelector('#choicebutton1');
var choicebutton2 = document.querySelector('#choicebutton2');

/*
	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_lastdwell').value = document.getElementById('choice').innerHTML;
}

choicebutton1.addEventListener("click", fchoice);
choicebutton2.addEventListener("click", fchoice);
</script>
{{ endblock }}