{{ extends "global/Page.html" }}
{{ block title }} <center>Mobile check 2/2</center>{{ endblock }}

{{ block content }}

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

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

<div id="bidwrapperabs">

    <center>
        <span id="boxinstructiontext"></span>
        <span id="rejectaccept">Swipe box 5 times</span>
    </center>
    <div id="biddivabs">
        <div id="bid">
            <center>
                <span id="current"></span>
            </center>
        </div>
    </div>
</div>

opened: <span id="dataopenedcards"></span>
<span id="starttime" hidden></span>
<span id="loadtime" hidden></span>
<span id="startleft" hidden>0</span>
<span id="currentleft" hidden>0</span>
<span id="touchtimes" hidden></span>
<span id="stimulus" 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 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 = '#91D8FF';

document.getElementById("bid").style.visibility = "visible";
document.getElementById("rejectaccept").style.visibility = "visible";

if (js_vars.practice) {
	document.getElementById('boxinstructiontext').innerHTML = '';
}

// 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" 
});

if (js_vars.practice) {
  document.getElementById("roundinfotext").innerHTML = 'Swipe trial #'
} else {
  document.getElementById("roundinfotext").innerHTML = 'Practice swipe #'
}

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 = "35%"; // 25% when width is 50vw
divi.style.width = "30vw";
divi.style.height = "30vw";

document.getElementById("stimulus").innerHTML = ''; 

// 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
  	document.getElementById("dataopenedcards").innerHTML = 'ok';
	console.log('received a message!', data);

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

    setTimeout(function(){
        //document.getElementById("current").style.visibility = "visible";
        document.getElementById("gaintally").innerHTML = Number(document.getElementById("gaintally").innerHTML) + 1;
        document.getElementById("stimulus").innerHTML = 1;
      	// record load time of the new stimulus
        var dtt = new Date();
        document.getElementById('loadtime').innerHTML = dtt.getTime();

    }, 1000);
}


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

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

  	var currentleft = 0;
  	var startleft = 0;
  
    function dragMouseDown(e) {
        document.getElementById('boxinstructiontext').innerHTML = '';
      	// 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;

        let divi = document.getElementById("biddivabs");
        divi.style.backgroundColor = "#f9f9f9"; // #f1f1f1

      	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;
        }

      	/* this means that choice is already made and there is no turning back */
      	if (currentleft - startleft > 150) { // right swipe
          	d = new Date();
          	let sd = document.getElementById('starttime').innerHTML;
            let ld = document.getElementById('loadtime').innerHTML;
            liveSend({'opened': 1,
                      'frame': 'swipe',
                      'direction': 'R',
                      'time': d.getTime(), 
                      'starttime': sd,
                      'loadtime': ld,
                      'x': document.getElementById('id_x').innerHTML,
                      'y': document.getElementById('id_y').innerHTML,
                      'startleft': document.getElementById('startleft').innerHTML,
          			  'touchtimes': document.getElementById('touchtimes').innerHTML,
                      'stimulus': 0
                     });
			document.getElementById('touchtimes').innerHTML = ''; // clear touchtimes

          	document.getElementById("current").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 (currentleft - startleft < -150) { // left swipe
          	d = new Date();
          	let sd = document.getElementById('starttime').innerHTML;
            let ld = document.getElementById('loadtime').innerHTML;
            liveSend({'opened': 1,
                      'frame': 'swipe',
                      'direction': 'L',
                      'time': d.getTime(),
                      'starttime': sd,
                      'loadtime': ld,
                      'x': document.getElementById('id_x').innerHTML,
                      'y': document.getElementById('id_y').innerHTML,
                      'startleft': document.getElementById('startleft').innerHTML,
          			  'touchtimes': document.getElementById('touchtimes').innerHTML,
                      'stimulus': 0
                     });
			document.getElementById('touchtimes').innerHTML = ''; // clear touchtimes

          	document.getElementById("current").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); 
        }
    }
  
  	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 */
      
        let divi = document.getElementById("biddivabs");
        divi.style.backgroundColor = '#f1f1f1'

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


</script>
{{ endblock }}