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

{% block title %}

    First Round
{% endblock %}

{% block content %}

    <p>
        <i>Please pack all colored boxes at the bottom of the page in the container using "drag and drop".
        You will earn more based on how well you can place the boxes (as seen by the red dotted line).
        You can move an item as often as you want as long as you do not click on the next item.
        After the next item is moved, you will no longer be able to change the position of all previously moved boxes.
        Once you have successfully placed every box, you will be able to continue with the next round by clicking
            the button below.</i>

    </p>

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


    <input type="hidden" name="bx1" value=0/>
    <input type="hidden" name="by1" value=0/>
    <input type="hidden" name="bx2" value=0/>
    <input type="hidden" name="by2" value=0/>
    <input type="hidden" name="bx3" value=0/>
    <input type="hidden" name="by3" value=0/>
    <input type="hidden" name="bx4" value=0/>
    <input type="hidden" name="by4" value=0/>
    <input type="hidden" name="bx5" value=0/>
    <input type="hidden" name="by5" value=0/>
    <input type="hidden" name="bx6" value=0/>
    <input type="hidden" name="by6" value=0/>
    <input type="hidden" name="bx7" value=0/>
    <input type="hidden" name="by7" value=0/>
    <input type="hidden" name="bx8" value=0/>
    <input type="hidden" name="by8" value=0/>
    <input type="hidden" name="bx9" value=0/>
    <input type="hidden" name="by9" value=0/>
    <input type="hidden" name="bx10" value=0/>
    <input type="hidden" name="by10" value=0/>
    <input type="hidden" name="bx11" value=0/>
    <input type="hidden" name="by11" value=0/>
    <input type="hidden" name="bx12" value=0/>
    <input type="hidden" name="by12" value=0/>
    <input type="hidden" name="bx13" value=0/>
    <input type="hidden" name="by13" value=0/>
    <input type="hidden" name="bx14" value=0/>
    <input type="hidden" name="by14" value=0/>
    <input type="hidden" name="bx15" value=0/>
    <input type="hidden" name="by15" value=0/>

    <input type="hidden" name="bseq1"/>
    <input type="hidden" name="bseq2"/>
    <input type="hidden" name="bseq3"/>
    <input type="hidden" name="bseq4"/>
    <input type="hidden" name="bseq5"/>
    <input type="hidden" name="bseq6"/>
    <input type="hidden" name="bseq7"/>
    <input type="hidden" name="bseq8"/>
    <input type="hidden" name="bseq9"/>
    <input type="hidden" name="bseq10"/>
    <input type="hidden" name="bseq11"/>
    <input type="hidden" name="bseq12"/>
    <input type="hidden" name="bseq13"/>
    <input type="hidden" name="bseq14"/>
    <input type="hidden" name="bseq15"/>


    <input type="hidden" name="bHighestPoint"/>

    <input type="hidden" name="bRotationCounter"/>






    <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");
                        autoSet(idSelectedElement, "box5");
                        autoSet(idSelectedElement, "box6");
                        autoSet(idSelectedElement, "box7");
                        autoSet(idSelectedElement, "box8");
                        autoSet(idSelectedElement, "box9");
                        autoSet(idSelectedElement, "box10");
                        autoSet(idSelectedElement, "box11");
                        autoSet(idSelectedElement, "box12");
                        autoSet(idSelectedElement, "box13");
                        autoSet(idSelectedElement, "box14");
                        autoSet(idSelectedElement, "box15");

                        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("box1", "box5");
                    var anyCollision = anyCollision + checkCollisions("box1", "box6");
                    var anyCollision = anyCollision + checkCollisions("box1", "box7");
                    var anyCollision = anyCollision + checkCollisions("box1", "box8");
                    var anyCollision = anyCollision + checkCollisions("box1", "box9");
                    var anyCollision = anyCollision + checkCollisions("box1", "box10");
                    var anyCollision = anyCollision + checkCollisions("box1", "box11");
                    var anyCollision = anyCollision + checkCollisions("box1", "box12");
                    var anyCollision = anyCollision + checkCollisions("box1", "box13");
                    var anyCollision = anyCollision + checkCollisions("box1", "box14");
                    var anyCollision = anyCollision + checkCollisions("box1", "box15");

                    var anyCollision = anyCollision + checkCollisions("box2", "box3");
                    var anyCollision = anyCollision + checkCollisions("box2", "box4");
                    var anyCollision = anyCollision + checkCollisions("box2", "box5");
                    var anyCollision = anyCollision + checkCollisions("box2", "box6");
                    var anyCollision = anyCollision + checkCollisions("box2", "box7");
                    var anyCollision = anyCollision + checkCollisions("box2", "box8");
                    var anyCollision = anyCollision + checkCollisions("box2", "box9");
                    var anyCollision = anyCollision + checkCollisions("box2", "box10");
                    var anyCollision = anyCollision + checkCollisions("box2", "box11");
                    var anyCollision = anyCollision + checkCollisions("box2", "box12");
                    var anyCollision = anyCollision + checkCollisions("box2", "box13");
                    var anyCollision = anyCollision + checkCollisions("box2", "box14");
                    var anyCollision = anyCollision + checkCollisions("box2", "box15");

                    var anyCollision = anyCollision + checkCollisions("box3", "box4");
                    var anyCollision = anyCollision + checkCollisions("box3", "box5");
                    var anyCollision = anyCollision + checkCollisions("box3", "box6");
                    var anyCollision = anyCollision + checkCollisions("box3", "box7");
                    var anyCollision = anyCollision + checkCollisions("box3", "box8");
                    var anyCollision = anyCollision + checkCollisions("box3", "box9");
                    var anyCollision = anyCollision + checkCollisions("box3", "box10");
                    var anyCollision = anyCollision + checkCollisions("box3", "box11");
                    var anyCollision = anyCollision + checkCollisions("box3", "box12");
                    var anyCollision = anyCollision + checkCollisions("box3", "box13");
                    var anyCollision = anyCollision + checkCollisions("box3", "box14");
                    var anyCollision = anyCollision + checkCollisions("box3", "box15");

                    var anyCollision = anyCollision + checkCollisions("box4", "box5");
                    var anyCollision = anyCollision + checkCollisions("box4", "box6");
                    var anyCollision = anyCollision + checkCollisions("box4", "box7");
                    var anyCollision = anyCollision + checkCollisions("box4", "box8");
                    var anyCollision = anyCollision + checkCollisions("box4", "box9");
                    var anyCollision = anyCollision + checkCollisions("box4", "box10");
                    var anyCollision = anyCollision + checkCollisions("box4", "box11");
                    var anyCollision = anyCollision + checkCollisions("box4", "box12");
                    var anyCollision = anyCollision + checkCollisions("box4", "box13");
                    var anyCollision = anyCollision + checkCollisions("box4", "box14");
                    var anyCollision = anyCollision + checkCollisions("box4", "box15");

                    var anyCollision = anyCollision + checkCollisions("box5", "box6");
                    var anyCollision = anyCollision + checkCollisions("box5", "box7");
                    var anyCollision = anyCollision + checkCollisions("box5", "box8");
                    var anyCollision = anyCollision + checkCollisions("box5", "box9");
                    var anyCollision = anyCollision + checkCollisions("box5", "box10");
                    var anyCollision = anyCollision + checkCollisions("box5", "box11");
                    var anyCollision = anyCollision + checkCollisions("box5", "box12");
                    var anyCollision = anyCollision + checkCollisions("box5", "box13");
                    var anyCollision = anyCollision + checkCollisions("box5", "box14");
                    var anyCollision = anyCollision + checkCollisions("box5", "box15");

                    var anyCollision = anyCollision + checkCollisions("box6", "box7");
                    var anyCollision = anyCollision + checkCollisions("box6", "box8");
                    var anyCollision = anyCollision + checkCollisions("box6", "box9");
                    var anyCollision = anyCollision + checkCollisions("box6", "box10");
                    var anyCollision = anyCollision + checkCollisions("box6", "box11");
                    var anyCollision = anyCollision + checkCollisions("box6", "box12");
                    var anyCollision = anyCollision + checkCollisions("box6", "box13");
                    var anyCollision = anyCollision + checkCollisions("box6", "box14");
                    var anyCollision = anyCollision + checkCollisions("box6", "box15");

                    var anyCollision = anyCollision + checkCollisions("box7", "box8");
                    var anyCollision = anyCollision + checkCollisions("box7", "box9");
                    var anyCollision = anyCollision + checkCollisions("box7", "box10");
                    var anyCollision = anyCollision + checkCollisions("box7", "box11");
                    var anyCollision = anyCollision + checkCollisions("box7", "box12");
                    var anyCollision = anyCollision + checkCollisions("box7", "box13");
                    var anyCollision = anyCollision + checkCollisions("box7", "box14");
                    var anyCollision = anyCollision + checkCollisions("box7", "box15");

                    var anyCollision = anyCollision + checkCollisions("box8", "box9");
                    var anyCollision = anyCollision + checkCollisions("box8", "box10");
                    var anyCollision = anyCollision + checkCollisions("box8", "box11");
                    var anyCollision = anyCollision + checkCollisions("box8", "box12");
                    var anyCollision = anyCollision + checkCollisions("box8", "box13");
                    var anyCollision = anyCollision + checkCollisions("box8", "box14");
                    var anyCollision = anyCollision + checkCollisions("box8", "box15");

                    var anyCollision = anyCollision + checkCollisions("box9", "box10");
                    var anyCollision = anyCollision + checkCollisions("box9", "box11");
                    var anyCollision = anyCollision + checkCollisions("box9", "box12");
                    var anyCollision = anyCollision + checkCollisions("box9", "box13");
                    var anyCollision = anyCollision + checkCollisions("box9", "box14");
                    var anyCollision = anyCollision + checkCollisions("box9", "box15");

                    var anyCollision = anyCollision + checkCollisions("box10", "box11");
                    var anyCollision = anyCollision + checkCollisions("box10", "box12");
                    var anyCollision = anyCollision + checkCollisions("box10", "box13");
                    var anyCollision = anyCollision + checkCollisions("box10", "box14");
                    var anyCollision = anyCollision + checkCollisions("box10", "box15");

                    var anyCollision = anyCollision + checkCollisions("box11", "box12");
                    var anyCollision = anyCollision + checkCollisions("box11", "box13");
                    var anyCollision = anyCollision + checkCollisions("box11", "box14");
                    var anyCollision = anyCollision + checkCollisions("box11", "box15");

                    var anyCollision = anyCollision + checkCollisions("box12", "box13");
                    var anyCollision = anyCollision + checkCollisions("box12", "box14");
                    var anyCollision = anyCollision + checkCollisions("box12", "box15");

                    var anyCollision = anyCollision + checkCollisions("box13", "box14");
                    var anyCollision = anyCollision + checkCollisions("box13", "box15");

                    var anyCollision = anyCollision + checkCollisions("box14", "box15");


                    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 coordinates
                    bx1.value = parseInt(document.getElementById("box1").getAttributeNS(null, "x"));
                    by1.value = parseInt(document.getElementById("box1").getAttributeNS(null, "y"));
                    bx2.value = parseInt(document.getElementById("box2").getAttributeNS(null, "x"));
                    by2.value = parseInt(document.getElementById("box2").getAttributeNS(null, "y"));
                    bx3.value = parseInt(document.getElementById("box3").getAttributeNS(null, "x"));
                    by3.value = parseInt(document.getElementById("box3").getAttributeNS(null, "y"));
                    bx4.value = parseInt(document.getElementById("box4").getAttributeNS(null, "x"));
                    by4.value = parseInt(document.getElementById("box4").getAttributeNS(null, "y"));
                    bx5.value = parseInt(document.getElementById("box5").getAttributeNS(null, "x"));
                    by5.value = parseInt(document.getElementById("box5").getAttributeNS(null, "y"));
                    bx6.value = parseInt(document.getElementById("box6").getAttributeNS(null, "x"));
                    by6.value = parseInt(document.getElementById("box6").getAttributeNS(null, "y"));
                    bx7.value = parseInt(document.getElementById("box7").getAttributeNS(null, "x"));
                    by7.value = parseInt(document.getElementById("box7").getAttributeNS(null, "y"));
                    bx8.value = parseInt(document.getElementById("box8").getAttributeNS(null, "x"));
                    by8.value = parseInt(document.getElementById("box8").getAttributeNS(null, "y"));
                    bx9.value = parseInt(document.getElementById("box9").getAttributeNS(null, "x"));
                    by9.value = parseInt(document.getElementById("box9").getAttributeNS(null, "y"));
                    bx10.value = parseInt(document.getElementById("box10").getAttributeNS(null, "x"));
                    by10.value = parseInt(document.getElementById("box10").getAttributeNS(null, "y"));
                    bx11.value = parseInt(document.getElementById("box11").getAttributeNS(null, "x"));
                    by11.value = parseInt(document.getElementById("box11").getAttributeNS(null, "y"));
                    bx12.value = parseInt(document.getElementById("box12").getAttributeNS(null, "x"));
                    by12.value = parseInt(document.getElementById("box12").getAttributeNS(null, "y"));
                    bx13.value = parseInt(document.getElementById("box13").getAttributeNS(null, "x"));
                    by13.value = parseInt(document.getElementById("box13").getAttributeNS(null, "y"));
                    bx14.value = parseInt(document.getElementById("box14").getAttributeNS(null, "x"));
                    by14.value = parseInt(document.getElementById("box14").getAttributeNS(null, "y"));
                    bx15.value = parseInt(document.getElementById("box15").getAttributeNS(null, "x"));
                    by15.value = parseInt(document.getElementById("box15").getAttributeNS(null, "y"));

                    //save sequence
                    saveSequence();

                    correctSequence();

                    rotate();
                    bRotationCounter.value = rotationCounter;

                    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"));
                        topLineArray[2] = parseInt((document.getElementById("box3")).getAttribute("y"));
                        topLineArray[3] = parseInt((document.getElementById("box4")).getAttribute("y"));
                        topLineArray[4] = parseInt((document.getElementById("box5")).getAttribute("y"));
                        topLineArray[5] = parseInt((document.getElementById("box6")).getAttribute("y"));
                        topLineArray[6] = parseInt((document.getElementById("box7")).getAttribute("y"));
                        topLineArray[7] = parseInt((document.getElementById("box8")).getAttribute("y"));
                        topLineArray[8] = parseInt((document.getElementById("box9")).getAttribute("y"));
                        topLineArray[9] = parseInt((document.getElementById("box10")).getAttribute("y"));
                        topLineArray[10] = parseInt((document.getElementById("box11")).getAttribute("y"));
                        topLineArray[11] = parseInt((document.getElementById("box12")).getAttribute("y"));
                        topLineArray[12] = parseInt((document.getElementById("box13")).getAttribute("y"));
                        topLineArray[13] = parseInt((document.getElementById("box14")).getAttribute("y"));
                        topLineArray[14] = parseInt((document.getElementById("box15")).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);

                        bHighestPoint.value = 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);

                        bseq1.value = sequenceArray[0];
                        bseq2.value = sequenceArray[1];
                        bseq3.value = sequenceArray[2];
                        bseq4.value = sequenceArray[3];
                        bseq5.value = sequenceArray[4];
                        bseq6.value = sequenceArray[5];
                        bseq7.value = sequenceArray[6];
                        bseq8.value = sequenceArray[7];
                        bseq9.value = sequenceArray[8];
                        bseq10.value = sequenceArray[9];
                        bseq11.value = sequenceArray[10];
                        bseq12.value = sequenceArray[11];
                        bseq13.value = sequenceArray[12];
                        bseq14.value = sequenceArray[13];
                        bseq15.value = sequenceArray[14];
                    }
                }


                //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 == 15){
                        document.getElementById("next-button").disabled=false;
                    }
                }


            }




        </script>




        <rect id="container" x="300" y="0" width="340" height="500" style="fill: whitesmoke;stroke: black; stroke-dasharray: 0,340,1340"> </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="0" y="550" width="90" height="156" style="fill: aqua"> </rect>
        <rect id="box2" class="draggable" x="125" y="550" width="90" height="132" style="fill: orange"> </rect>
        <rect id="box3" class="draggable" x="250" y="550" width="102" height="126" style="fill: red"> </rect>
        <rect id="box4" class="draggable" x="375" y="550" width="74" height="114" style="fill: darkblue"> </rect>
        <rect id="box5" class="draggable" x="500" y="550" width="78" height="110" style="fill: darkred"> </rect>
        <rect id="box6" class="draggable" x="625" y="550" width="86" height="107" style="fill: darkslategray"> </rect>
        <rect id="box7" class="draggable" x="750" y="550" width="72" height="104" style="fill: gold"> </rect>
        <rect id="box8" class="draggable" x="875" y="550" width="72" height="98" style="fill: darkgrey"> </rect>
        <rect id="box9" class="draggable" x="0" y="720" width="48" height="87" style="fill: yellow"> </rect>
        <rect id="box10" class="draggable" x="125" y="700" width="54" height="86" style="fill: hotpink"> </rect>
        <rect id="box11" class="draggable" x="250" y="700" width="57" height="75" style="fill: deepskyblue"> </rect>
        <rect id="box12" class="draggable" x="375" y="700" width="54" height="72" style="fill: darkseagreen"> </rect>
        <rect id="box13" class="draggable" x="500" y="700" width="51" height="69" style="fill: peru"> </rect>
        <rect id="box14" class="draggable" x="625" y="700" width="48" height="60" style="fill: green"> </rect>
        <rect id="box15" class="draggable" x="750" y="700" width="36" height="54" style="fill: blueviolet"> </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="currentTop" x1="200" y1="500" x2="800" y2="500" style="stroke: red; stroke-width: 2; stroke-dasharray: 20" />

    </svg>





    <script>

    let bseq1 = document.querySelector('[name=bseq1');
    let bseq2 = document.querySelector('[name=bseq2');
    let bseq3 = document.querySelector('[name=bseq3');
    let bseq4 = document.querySelector('[name=bseq4');
    let bseq5 = document.querySelector('[name=bseq5');
    let bseq6 = document.querySelector('[name=bseq6');
    let bseq7 = document.querySelector('[name=bseq7');
    let bseq8 = document.querySelector('[name=bseq8');
    let bseq9 = document.querySelector('[name=bseq9');
    let bseq10 = document.querySelector('[name=bseq10');
    let bseq11 = document.querySelector('[name=bseq11');
    let bseq12 = document.querySelector('[name=bseq12');
    let bseq13 = document.querySelector('[name=bseq13');
    let bseq14 = document.querySelector('[name=bseq14');
    let bseq15 = document.querySelector('[name=bseq15');


    let bx1 = document.querySelector('[name=bx1');
    let by1 = document.querySelector('[name=by1');
    let bx2 = document.querySelector('[name=bx2');
    let by2 = document.querySelector('[name=by2');
    let bx3 = document.querySelector('[name=bx3');
    let by3 = document.querySelector('[name=by3');
    let bx4 = document.querySelector('[name=bx4');
    let by4 = document.querySelector('[name=by4');
    let bx5 = document.querySelector('[name=bx5');
    let by5 = document.querySelector('[name=by5');
    let bx6 = document.querySelector('[name=bx6');
    let by6 = document.querySelector('[name=by6');
    let bx7 = document.querySelector('[name=bx7');
    let by7 = document.querySelector('[name=by7');
    let bx8 = document.querySelector('[name=bx8');
    let by8 = document.querySelector('[name=by8');
    let bx9 = document.querySelector('[name=bx9');
    let by9 = document.querySelector('[name=by9');
    let bx10 = document.querySelector('[name=bx10');
    let by10 = document.querySelector('[name=by10');
    let bx11 = document.querySelector('[name=bx11');
    let by11 = document.querySelector('[name=by11');
    let bx12 = document.querySelector('[name=bx12');
    let by12 = document.querySelector('[name=by12');
    let bx13 = document.querySelector('[name=bx13');
    let by13 = document.querySelector('[name=by13');
    let bx14 = document.querySelector('[name=bx14');
    let by14 = document.querySelector('[name=by14');
    let bx15 = document.querySelector('[name=bx15');
    let by15 = document.querySelector('[name=by15');

    let bHighestPoint = document.querySelector('[name=bHighestPoint');

    let bRotationCounter = document.querySelector('[name=bRotationCounter');

    </script>



{% endblock %}