{{ 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="boxrow">
</div>

<span id="values_id" hidden>{{ values }}</span>

<div id="bidwrapperabs">
    <center>
        <span id="rejectaccept">&nbsp;</span>
        <span id="recbox" hidden>{{ recommendation }}</span>
    </center>
    <div id="biddivabs">
        <div id="bid">
            <center>
                {{ if fullinfo }}Value: 
                {{ else }}Rank: 
                {{ endif }}
                <span id="current"></span>
                <br><span id="recommendation"></span>
            </center>
        </div>
    </div>
</div>
{{ if pilot }}
    <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 }}

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

<!-- boolean indicating that the round ends into stopping -->
<input type="hidden" name="stopped" id="id_stopped">
<input type="hidden" name="reachedend" id="id_reachedend">

{{ endblock }}

{{ block scripts }}
<script>
document.getElementById("id_reachedend").value = 0;
document.getElementById("boxrow").style.visibility = "visible"; // always show 
document.getElementById("bid").style.visibility = "hidden";

if (!js_vars.showrecommendation) {
	document.getElementById("recommendation").style.visibility = "hidden";
}

const boxvalues = JSON.parse("[" + document.getElementById("values_id").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.fullinfo == 1) {
	document.getElementById("current").innerHTML = boxvalues[0].toFixed(1);
} else {
	document.getElementById("current").innerHTML = 1;
}


// create the required amount of boxes that are opened, current, or unopened
const element = document.getElementById("boxrow"); // attach to the div that displays the opened boxes in a row
while (element.firstChild) {
    element.removeChild(element.firstChild);
}

// this is used only at the initial display of the boxes
// after opening the first box, they are displayed using the liveRecv function
for (let i = 0; i < js_vars.boxes; i++) { // js_vars.boxes is the value of C.BOXES
    const para = document.createElement("span");
    para.className = "box";
    var node;
    node = document.createTextNode('?'); //relrank[i]); // relative rank
    para.appendChild(node);
    element.appendChild(para);
}

// generate initial recommendation
if (1 == document.getElementById("recbox").innerHTML) {
    document.getElementById("recommendation").innerHTML = '(You should <font color=green>accept</font>)'
} else {
    document.getElementById("recommendation").innerHTML = '(You should <font color=red>reject</font>)'      
}

function liveRecv(data) { // this function receives the live message from server to create opened boxes
  
  	// if at the end of the boxes then submit form
    // stopped = 1 if reached the end
    if (data.openedcards == js_vars.boxes)  {
        document.getElementById("id_reachedend").value = 1;
      	document.getElementById("form").submit();
    }
  
    // generate recommendation: if subject goes past the recommendation, then it is not shown anymore
	if (data.openedcards + 1 < document.getElementById("recbox").innerHTML) {
      	document.getElementById("recommendation").innerHTML = '(You should <font color=red>reject</font>)'
    } else if (data.openedcards + 1 == document.getElementById("recbox").innerHTML) {
      	document.getElementById("recommendation").innerHTML = '(You should <font color=green>accept</font>)'
    } else {
      	document.getElementById("recommendation").innerHTML = ''      
    }

    // create the required amount of boxes that are opened, current, or unopened
    const element = document.getElementById("boxrow"); // attach to the div that displays the opened boxes in a row
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }
    for (let i = 0; i < js_vars.boxes; i++) { // js_vars.boxes is the value of C.BOXES
        const para = document.createElement("span");

        // the below 7 lines have been translated from the python function to js by ChatGPT
        let boxval = boxvalues;
        let seq = boxval.slice(0, data.openedcards + 1);
        let seqCopy = seq.slice();
        seqCopy.sort((a, b) => a - b);
      	seqCopy.reverse(); /* in this app the values are in ascending order, therefore reverse */
        let relrank = [];
        for (let i = 0; i < seq.length; i++) {
            relrank.push(seqCopy.indexOf(seq[i]) + 1);
        }

        if (js_vars.fullinfo == 1) {
	        document.getElementById("current").innerHTML = boxvalues[data.openedcards].toFixed(1);
        } else {
	        document.getElementById("current").innerHTML = relrank[data.openedcards];
        }
      	if (i < data.openedcards) {
            para.className = "box";
            var node;
          	if (js_vars.fullinfo == 1) {
	            node = document.createTextNode(boxvalues[i].toFixed(1)); // value
            } else {
	            node = document.createTextNode(relrank[i]); // relative rank          
            }
            para.appendChild(node);

        } else if (i == data.openedcards) { 
            para.className = "currentbox";
            const node = document.createTextNode('');
            para.appendChild(node);
        } else {
            para.className = "box";
            const node = document.createTextNode('?');
            para.appendChild(node);
        }

        setTimeout(function(){
	      	element.appendChild(para);
        }, 500);
    }
 	
  	document.getElementById("bid").style.visibility = "hidden";
}


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;

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

      	/* always show the boxrow */
      	//document.getElementById("boxrow").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;
        }
      	
		/* this means deliberation i.e. not showing the accept/reject text */
      	const deliberationthreshold = 30;
      	if (currentleft - startleft > deliberationthreshold) {
			document.getElementById("rejectaccept").style.visibility = "visible";
			// document.getElementById("rejectaccept").style.color = "green";
			document.getElementById("rejectaccept").innerHTML = "accept";
        }
        if ((currentleft - startleft < deliberationthreshold) && (currentleft - startleft > 0)) {
			document.getElementById("rejectaccept").style.visibility = "hidden";
        }
        if (currentleft - startleft < -deliberationthreshold) {
			document.getElementById("rejectaccept").style.visibility = "visible";
			// document.getElementById("rejectaccept").style.color = "red";
			document.getElementById("rejectaccept").innerHTML = "reject";
        }
      	if ((currentleft - startleft > -deliberationthreshold) && (currentleft - startleft < 0)) {
			document.getElementById("rejectaccept").style.visibility = "hidden";
        }

      	/* this means that choice is already made and there is no turning back */
      	if (currentleft - startleft > 150) { // stop opening cards
            document.getElementById("id_stopped").value = 1;
			document.onpointermove = throwDragElement; /* when the choice is made, hide the element */
	        document.onpointerup = throwDragElement;
			document.getElementById("bid").style.visibility = "hidden";          
          	d = new Date();
          	let sd = document.getElementById('starttime').innerHTML;
            liveSend({'opened': 0,
                      '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

          	setTimeout(function(){
	            document.getElementById("form").submit();
            }, 500);
        }

      	if (currentleft - startleft < -150) {
          	// this means that a box is opened
          	d = new Date();
          	let sd = document.getElementById('starttime').innerHTML;

          	//setTimeout(function(){ // timeout not needed here??
            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});
            //}, 500);

			document.getElementById('touchtimes').innerHTML = ''; // clear touchtimes

          	document.getElementById("rejectaccept").style.visibility = "hidden";
            document.getElementById("bid").style.visibility = "hidden";
            //document.getElementById("boxrow").style.visibility = "hidden"; // always show
            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(){
                //document.getElementById("bid").style.visibility = "visible";
                elmnt.style.visibility = "visible";
                elmnt.style.left = document.getElementById("startleft").innerHTML + "px";
			}, 500); 
        }

    }

  	function closeDragElement() {
      	/* stop moving when mouse button is released and return to start position */
        document.onpointerup = null;
        document.onpointermove = null;
        document.getElementById("rejectaccept").style.visibility = "hidden";
        /* only show the bid value when the element is touched */
      	document.getElementById("bid").style.visibility = "hidden";
      	//document.getElementById("boxrow").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("rejectaccept").style.visibility = "hidden";
      	document.getElementById("bid").style.visibility = "hidden";

    }



}

</script>
{{ endblock }}