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

{% block title %}

    Instructions
{% endblock %}

{% block content %}

    <p>
        <b>IMPORTANT: This experiment is not optimized for mobile devices.
        If the "drag and drop" functionality does not work on your smartphone, please open the link on your computer.</b>
    </p>

    <p>
        <b>Thank you for participating in this experiment!</b>
    </p>

    <p>
        In the experiment you will be asked to pack boxes into a container using "drag and drop".
        The goal is to pack all items in a way that <strong>minimizes</strong> the used height of the container. The better you perform, the higher the bonus you receive at the end of the experiment. <br>
        Once a box is placed inside the container and you select the next one, you will no longer be able to change the position
        of the first. Rotation of boxes is possible in every round by dropping items in the rotation space, located to
        the right of the container.
        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.
    </p>

    <p>
        Instructions will additionally be provided for your help on each of the following pages.
    </p>

    <p>
        <b>You can try out the mechanism of dragging boxes into the container or the rotation space below.</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");


                        checkBorders();
                    }
                }


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

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

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

                        //top border
                        if (selectedElement.getAttributeNS(null, "y") < 0) {
                            selectedElement.setAttributeNS(null, "y", 0);
                            //endDrag(evt);
                        }

                        //bottom border
                        if (selectedElement.getAttributeNS(null, "y") > 500 - parseInt(selectedElement.getAttributeNS(null, "height"))) {
                            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"));


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

                    }
                }


                //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 == 2){
                        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 items here </tspan>
            <tspan x="810" y="315"> to rotate them by 90° </tspan> </text>

        <rect id="box1" class="draggable" x="300" y="550" width="100" height="200" style="fill: blueviolet"> </rect>
        <rect id="box2" class="draggable" x="460" y="550" width="180" height="120" style="fill: green"> </rect>


        <line id="optimalTop" x1="250" y1="300" x2="700" y2="300" style="stroke: black; stroke-width: 2; stroke-dasharray: 20" />
        <text x="200" y="305" fill="black" font-size="15">$2.00</text>
        <line id="optimalTop2" x1="250" y1="270" x2="700" y2="270" style="stroke: black; stroke-width: 1; stroke-dasharray: 20" />
        <text x="200" y="275" fill="black" font-size="15">$1.80</text>
        <line id="optimalTop3" x1="250" y1="240" x2="700" y2="240" style="stroke: black; stroke-width: 1; stroke-dasharray: 20" />
        <text x="200" y="245" fill="black" font-size="15">$1.50</text>
        <line id="optimalTop4" x1="250" y1="210" x2="700" y2="210" style="stroke: black; stroke-width: 1; stroke-dasharray: 20" />
        <text x="200" y="215" fill="black" font-size="15">$0.90</text>
        <line id="optimalTop5" x1="250" y1="180" x2="700" y2="180" style="stroke: black; stroke-width: 1; stroke-dasharray: 20" />
        <text x="200" y="155" fill="black" font-size="15">$0.00</text>
        <line id="optimalTop6" x1="250" y1="150" x2="700" y2="150" style="stroke: black; stroke-width: 1; stroke-dasharray: 20" />
        <text x="200" y="185" fill="black" font-size="15">$0.45</text>
        <line id="currentTop" x1="200" y1="500" x2="800" y2="500" style="stroke: red; stroke-width: 2; stroke-dasharray: 20" />

    </svg>
{% endblock %}