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

{{ block content }}

<div id="baselineheader">
    Swipe the grey box {{ leftright }} 10 times
    <br><br>
    <span id="swipenumber"></span>
</div>

<div id="bidwrapperabs">
    <div id="biddivabs">
        
        <div id="bid">
            <center>
                {{ if leftright == 'left' }} &larr; {{ else }} &rarr; {{ endif }}
            </center>
        </div>
    </div>
</div>

<span id="starttime" hidden></span>
<span id="startleft" hidden>0</span>
<span id="currentleft" hidden>0</span>
<span id="touchtimes" hidden></span>

<!-- instead of inputs, x and y are recorded in span elements and sent with liveSend 
     these need to be emptied whenever touch is released from the box -->
<span id="id_y" hidden></span> <!-- time -->
<span id="id_x" hidden></span>        <!-- scroll -->

<!-- the only value sent with form is boolean indicating if the round ends into stopping or not (into opening a loss card) -->
<input type="hidden" name="stopped" id="id_stopped">


{{ endblock }}

{{ block scripts }}
<script>
// 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" 
});


function liveRecv(data) { // this function receives the live message from server to create opened boxes
     // data.chosencard should indicate the current number of cards that are opened
  	if (data.openedcards == js_vars.boxes)  { // submit when all boxes are swiped
        document.getElementById("id_stopped").value = 0;
      	document.getElementById("form").submit();
    }

  	document.getElementById("swipenumber").innerHTML = data.openedcards;

}


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%";

// make the DIV element draggagle
dragElement(divi);

function dragElement(elmnt) {
    var pos1 = 0, pos3 = 0;
    elmnt.onpointerdown = dragMouseDown;

  	var currentleft = 0;
  	var startleft = 0;

    function dragMouseDown(e) {

      	// if element is only clicked, make sure that startleft still gets nonzero value
        if (document.getElementById("startleft").innerHTML == 0) { 
            startleft = (elmnt.offsetLeft);
            document.getElementById("startleft").innerHTML = startleft;
        }
        var dt = new Date();
		document.getElementById('touchtimes').innerHTML += dt.getTime() + ','; // this is a list of timestamps that indicate when the box is touched
		document.getElementById('starttime').innerHTML = dt.getTime(); // this is needed for liveSend
        document.getElementById("id_x").innerHTML = ""; // clear
        document.getElementById("id_y").innerHTML = ""; // clear

      	e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;

        /* only show the bid value when the element is touched */
      	document.getElementById("bid").style.visibility = "visible";

      	document.onpointerup = closeDragElement;
        document.onpointermove = elementDrag;

    }

    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos3 = e.clientX;

      	// set the element's new position:
      	currentleft = (elmnt.offsetLeft - pos1);
      	document.getElementById("id_x").innerHTML += currentleft + ',';
		var d = new Date();
      	document.getElementById("id_y").innerHTML += d.getTime() - document.getElementById("starttime").innerHTML + ','; // this is the list of time as the y-coordinate

        elmnt.style.left = currentleft + "px";
      	document.getElementById("currentleft").innerHTML = currentleft;

      	if (document.getElementById("startleft").innerHTML == 0) { 
          	startleft = (elmnt.offsetLeft - pos1);
        	document.getElementById("startleft").innerHTML = startleft;
        }
      	

		// baseline rounds: swiping right needs to have the same function as swiping left
      	if ((currentleft - startleft < -150) || (currentleft - startleft > 150)) {
          	// this means that a box is opened
          	d = new Date();
          	let sd = document.getElementById('starttime').innerHTML;
            liveSend({'opened': 1, 
                      'time': d.getTime(), 
                      'starttime': sd,
                      'x': document.getElementById('id_x').innerHTML,
                      'y': document.getElementById('id_y').innerHTML,
                      'startleft': document.getElementById('startleft').innerHTML,
          			  'touchtimes': document.getElementById('touchtimes').innerHTML});
			document.getElementById('touchtimes').innerHTML = ''; // clear touchtimes

            document.getElementById("bid").style.visibility = "hidden";
            document.onpointerup = null;
            document.onpointermove = null;

          	// the box is first hidden (thrown) and then after timeout returned back to center
            elmnt.style.visibility = "hidden";
          	setTimeout(function(){
                elmnt.style.visibility = "visible";
            	elmnt.style.left = document.getElementById("startleft").innerHTML + "px";
			}, 1000);
          
          	if (document.getElementById("swipenumber").innerHTML == '10') {
                setTimeout(function() {
                    document.getElementById("form").submit();
                }, 1000);
            }
        }

    }
  
  	function closeDragElement() {
      	/* stop moving when mouse button is released and return to start position */
        document.onpointerup = null;
        document.onpointermove = null;
        /* only show the bid value when the element is touched */
      	document.getElementById("bid").style.visibility = "hidden";
      
      	elmnt.style.left = document.getElementById("startleft").innerHTML + "px";
    }

  	function throwDragElement() {
      	/* when a choice is made, throw the drag element off screen into the direction of the swipe */
        elmnt.style.visibility = "hidden";
      	document.getElementById("bid").style.visibility = "hidden";

    }

}

</script>
{{ endblock }}