{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}

Instructions
{% endblock %}

{% block content %}

<p>
    <b> This experiment is not optimized for mobile devices and some important functionalities might not work on
        smartphones. Please open the link on your computer.</b>
</p>

<p>
    Thank you for participating in this experiment! Please read the following instructions carefully. You have to answer
    a short quiz about the task and you can only start the task if your answers are correct.
</p>

<p>
    Instructions: In the experiment you will be asked to pack boxes into a gray container.
    The less container height you need to pack all boxes, the higher the bonus you receive at the end of the experiment.
    As soon as every box is packed successfully inside the container, you will be able to proceed
    to the following round. You will need to complete a total of two rounds, and at the end of the experiment you receive the bonus of both rounds. <br>
    You can place boxes using "drag and drop". Once a box is placed inside the container and you select the next box,
    you will no longer be able to change the position
    of the first box. Note that rotation of boxes is possible by dropping boxes in the rotation space, located to
    the right of the container. The Instructions will be provided on each of the following pages.

</p>


<p>
    Please try out the mechanism of dragging boxes into the container or the rotation space below. <b>Once you have
    placed all boxes into the container you can proceed.</b>
</p>

<button class="otree-btn-next btn btn-primary" id="next-button">Next</button>

<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" onload="makeDraggable(evt)">
    <style>
        .static {
            cursor: not-allowed;
        }

        .draggable {
            cursor: move;
        }
    </style>

    <script>
        function makeDraggable(evt) {
            var svg = evt.target;
            svg.addEventListener('mousedown', startDrag);
            svg.addEventListener('mousemove', drag);
            svg.addEventListener('mouseup', endDrag);


            var selectedElement = null;

            var sequenceArray = [];
            var i = 0;

            var topLineArray = [];
            var rotationCounter = 0;

            document.getElementById("next-button").disabled = true;

            function getMousePosition(evt) {
                var CTM = svg.getScreenCTM();
                return {
                    x: (evt.clientX - CTM.e) / CTM.a,
                    y: (evt.clientY - CTM.f) / CTM.d
                };
            }


            //defines what happens at the beginning of the drag (mousedown)
            function startDrag(evt) {
                if (evt.target.classList.contains('draggable')) {
                    selectedElement = evt.target;

                    reset = getMousePosition(evt);

                    offset = getMousePosition(evt);
                    offset.x -= parseFloat(selectedElement.getAttributeNS(null, "x"));
                    offset.y -= parseFloat(selectedElement.getAttributeNS(null, "y"));

                    //var i;

                    setStatic();

                }

            }


            //defines what happens while dragging (mousemove)
            function drag(evt) {
                if (selectedElement) {
                    evt.preventDefault();
                    var coord = getMousePosition(evt);
                    selectedElement.setAttributeNS(null, "x", coord.x - offset.x);
                    selectedElement.setAttributeNS(null, "y", coord.y - offset.y);

                    var idSelectedElement = selectedElement.getAttributeNS(null, "id");
                    //console.log(idSelectedElement);

                    autoSet(idSelectedElement, "box1");
                    autoSet(idSelectedElement, "box2");
                    autoSet(idSelectedElement, "box3");
                    autoSet(idSelectedElement, "box4");


                    checkBorders();
                }
            }


            //defines what happens at the end of the drag (mouseup)
            function endDrag(evt) {
                //checkBorders();

                var anyCollision = 0;
                var anyCollision = anyCollision + checkCollisions("box1", "box2");
                var anyCollision = anyCollision + checkCollisions("box1", "box3");
                var anyCollision = anyCollision + checkCollisions("box1", "box4");

                var anyCollision = anyCollision + checkCollisions("box2", "box3");
                var anyCollision = anyCollision + checkCollisions("box2", "box4");

                var anyCollision = anyCollision + checkCollisions("box3", "box4");

                console.log(anyCollision);

                //reset in case of collision
                if (anyCollision >= 1) {
                    selectedElement.setAttributeNS(null, "x", reset.x - offset.x);
                    selectedElement.setAttributeNS(null, "y", reset.y - offset.y);
                }

                setTopLine();


                //save sequence
                saveSequence();

                correctSequence();

                rotate();

                enableButton();

                //ending drag
                selectedElement = null;


            }


            //rotates item if dropped in the rotation space
            function rotate() {

                if (selectedElement.getAttribute("x") > 750 && selectedElement.getAttribute("y") < 500) {
                    console.log("rotation");

                    var bufwidth = selectedElement.getAttribute("width");
                    var bufheight = selectedElement.getAttribute("height");

                    selectedElement.setAttribute("width", bufheight);
                    selectedElement.setAttribute("height", bufwidth);

                    rotationCounter++;
                    //console.log(rotationCounter);
                }
            }


            //sets previously placed boxes to static
            function setStatic() {
                var idSelectedElement = selectedElement.getAttributeNS(null, "id");

                //console.log(idSelectedElement);
                //console.log(sequenceArray[0]);
                for (j = 0; j < (sequenceArray.length); j++) {
                    if (!(idSelectedElement == sequenceArray[j])) {
                        //console.log("setStatic");
                        document.getElementById(sequenceArray[j]).setAttribute("class", "static");
                    }
                }

            }


            //checks if box is placed in container and adjusts placement automatically
            function checkBorders() {

                if (selectedElement.getAttributeNS(null, "y") < 500) {
                    //left border
                    if (selectedElement.getAttributeNS(null, "x") < 300) {
                        selectedElement.setAttributeNS(null, "x", 300);
                        //endDrag(evt);

                        //console.log(selectedElement.getAttributeNS(null, "x"));
                    }

                    //right border
                    if (selectedElement.getAttributeNS(null, "x") > 640 - parseInt(selectedElement.getAttributeNS(null, "width")) && selectedElement.getAttributeNS(null, "x") < 640) {
                        selectedElement.setAttributeNS(null, "x", 640 - parseInt(selectedElement.getAttributeNS(null, "width")));
                        //endDrag(evt);
                    }

                    if (selectedElement.getAttributeNS(null, "x") > 640 && selectedElement.getAttributeNS(null, "x") < 750 && selectedElement.getAttributeNS(null, "y") < (500 - parseInt(selectedElement.getAttributeNS(null, "height")))) {
                        selectedElement.setAttributeNS(null, "y", 0);
                        //console.log(selectedElement.getAttributeNS(null, "x"));
                    }

                    //top border
                    if (selectedElement.getAttributeNS(null, "y") < 50) {
                        selectedElement.setAttributeNS(null, "y", 500 - parseInt(selectedElement.getAttributeNS(null, "height")));
                        //endDrag(evt);
                    }

                    //bottom border
                    if (selectedElement.getAttributeNS(null, "y") > 500 - parseInt(selectedElement.getAttributeNS(null, "height")) && selectedElement.getAttributeNS(null, "x") < 600 + parseInt(selectedElement.getAttributeNS(null, 'width'))) {
                        selectedElement.setAttributeNS(null, "y", 500 - parseInt(selectedElement.getAttributeNS(null, "height")));
                        //endDrag(evt);
                    }
                }
            }


            //checks if there is a collision between the two input boxes
            function checkCollisions(input1, input2) {
                firstBox = document.getElementById(input1);
                secondBox = document.getElementById(input2);

                var collision = 0;


                var leftFirst = parseFloat(firstBox.getAttribute("x"));
                var widthFirst = parseFloat(firstBox.getAttribute("width"));
                var rightFirst = leftFirst + widthFirst;

                var topFirst = parseFloat(firstBox.getAttribute("y"));
                var heightFirst = parseFloat(firstBox.getAttribute("height"));
                var bottomFirst = topFirst + heightFirst;

                var leftSecond = parseFloat(secondBox.getAttribute("x"));
                var widthSecond = parseFloat(secondBox.getAttribute("width"));
                var rightSecond = leftSecond + widthSecond;

                var topSecond = parseFloat(secondBox.getAttribute("y"));
                var heightSecond = parseFloat(secondBox.getAttribute("height"));
                var bottomSecond = topSecond + heightSecond;


                //console.log(leftFirst)
                //console.log(widthFirst)
                //console.log(rightFirst)

                if (!(leftSecond > rightFirst ||
                    rightSecond < leftFirst ||
                    topSecond > bottomFirst ||
                    bottomSecond < topFirst)) {
                    collision = 1;
                }

                //console.log(collision);
                return collision;


            }


            //checks if there is a collision between the two input boxes and places it conveniently
            function autoSet(input1, input2) {
                firstBox = document.getElementById(input1);
                secondBox = document.getElementById(input2);

                var collision = 0;

                if (firstBox == secondBox) {
                    collision = 0;
                } else {


                    var leftFirst = parseFloat(firstBox.getAttribute("x"));
                    var widthFirst = parseFloat(firstBox.getAttribute("width"));
                    var rightFirst = leftFirst + widthFirst;

                    var topFirst = parseFloat(firstBox.getAttribute("y"));
                    var heightFirst = parseFloat(firstBox.getAttribute("height"));
                    var bottomFirst = topFirst + heightFirst;

                    var leftSecond = parseFloat(secondBox.getAttribute("x"));
                    var widthSecond = parseFloat(secondBox.getAttribute("width"));
                    var rightSecond = leftSecond + widthSecond;

                    var topSecond = parseFloat(secondBox.getAttribute("y"));
                    var heightSecond = parseFloat(secondBox.getAttribute("height"));
                    var bottomSecond = topSecond + heightSecond;


                    //console.log(leftFirst)
                    //console.log(widthFirst)
                    //console.log(rightFirst)

                    if (!(leftSecond > rightFirst ||
                        rightSecond < leftFirst ||
                        topSecond > bottomFirst ||
                        bottomSecond < topFirst)) {
                        collision = 1;
                    }


                    if (collision == 1) {
                        selectedElement.setAttributeNS(null, "y", (topSecond - heightFirst - 0.001));
                    }

                }


                //console.log("Collision:")
                //console.log(collision);
                //return collision;


            }


            //draws line on top of the highest item
            function setTopLine() {
                if (selectedElement.getAttribute("x") < 640) {
                    topLineArray[0] = parseInt((document.getElementById("box1")).getAttribute("y"));
                    topLineArray[1] = parseInt((document.getElementById("box2")).getAttribute("y"));
                    topLineArray[2] = parseInt((document.getElementById("box3")).getAttribute("y"));
                    topLineArray[3] = parseInt((document.getElementById("box4")).getAttribute("y"));


                    //console.log(topLineArray);

                    var topLineCoordinate = 500;
                    for (j = 0; j < (topLineArray.length); j++) {
                        if (topLineArray[j] < topLineCoordinate) topLineCoordinate = topLineArray[j];
                    }

                    //console.log(topLineCoordinate);

                    document.getElementById("currentTop").setAttribute("y1", topLineCoordinate);
                    document.getElementById("currentTop").setAttribute("y2", topLineCoordinate);
                    document.getElementById("currentTop").setAttribute("y3", topLineCoordinate);
                    document.getElementById("currentTop").setAttribute("y4", topLineCoordinate);

                }
            }


            //saves the sequence in which participant successfully places items
            function saveSequence() {
                if (selectedElement.getAttributeNS(null, "y") < 500
                    && selectedElement.getAttributeNS(null, "x") < 640) {
                    var thisId = selectedElement.getAttributeNS(null, "id");
                    var arrayLength = sequenceArray.length;
                    var d = 0;
                    //console.log(thisId);
                    sequenceArray.push(thisId);

                    for (i = 0; i <= arrayLength - 1; i++) {
                        if (thisId == sequenceArray[i]) {
                            sequenceArray.pop();
                            i++;
                        }
                    }

                    console.log("sequence array:");
                    console.log(sequenceArray);

                }
            }


            //deletes last entry in sequenceArray if item is dragged out of container
            function correctSequence() {
                if (selectedElement.getAttributeNS(null, "y") > 500
                    || selectedElement.getAttributeNS(null, "x") > 640) {
                    var thisId = selectedElement.getAttributeNS(null, "id");
                    if (thisId == sequenceArray[sequenceArray.length - 1]) {
                        sequenceArray.pop();
                        console.log("correctSequence");
                    }
                }
            }


            //checks if next-button can be enabled
            function enableButton() {

                if (sequenceArray.length == 4) {
                    document.getElementById("next-button").disabled = false;
                }
            }


        }

    </script>


    <rect id="container" x="300" y="100" width="340" height="400"
          style="fill: whitesmoke;stroke: black; stroke-dasharray: 0,340,1140"></rect>
    <rect id="rotationSpace" x="800" y="200" width="200" height="200" style="fill: white;stroke: black"></rect>
    <text x="800" y="250" fill="red" font-size="20">
        <tspan x="830" y="285"> Drop boxes here</tspan>
        <tspan x="810" y="315"> to rotate them by 90°</tspan>
    </text>

    <rect id="box1" class="draggable" x="300" y="550" width="80" height="150" style="fill: blueviolet"></rect>
    <rect id="box2" class="draggable" x="390" y="550" width="90" height="90" style="fill: green"></rect>
    <rect id="box3" class="draggable" x="490" y="550" width="120" height="80" style="fill: blue"></rect>
    <rect id="box4" class="draggable" x="620" y="550" width="100" height="180" style="fill: orange"></rect>

    <line id="currentTop" x1="200" y1="500" x2="800" y2="500"
          style="stroke: red; stroke-width: 2; stroke-dasharray: 20"/>

</svg>
{% endblock %}