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

{% block title %}

Second Round
{% endblock %}

{% block content %}

<p>
    <i>You have to pack all colored boxes into the gray container (from bottom to top). You can proceed once you have
        placed all boxes sucessfully.
        You can move a box (as often as you want) using drag & drop.
        However, once you move another box, you will no longer be able to change the position of any previous box.
        <b>The less container height you need (red dotted line), the more money you earn</b>
    </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 xthe 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="cx1" value=0/>
<input type="hidden" name="cy1" value=0/>
<input type="hidden" name="cx2" value=0/>
<input type="hidden" name="cy2" value=0/>
<input type="hidden" name="cx3" value=0/>
<input type="hidden" name="cy3" value=0/>
<input type="hidden" name="cx4" value=0/>
<input type="hidden" name="cy4" value=0/>
<input type="hidden" name="cx5" value=0/>
<input type="hidden" name="cy5" value=0/>
<input type="hidden" name="cx6" value=0/>
<input type="hidden" name="cy6" value=0/>
<input type="hidden" name="cx7" value=0/>
<input type="hidden" name="cy7" value=0/>
<input type="hidden" name="cx8" value=0/>
<input type="hidden" name="cy8" value=0/>
<input type="hidden" name="cx9" value=0/>
<input type="hidden" name="cy9" value=0/>
<input type="hidden" name="cx10" value=0/>
<input type="hidden" name="cy10" value=0/>
<input type="hidden" name="cx11" value=0/>
<input type="hidden" name="cy11" value=0/>
<input type="hidden" name="cx12" value=0/>
<input type="hidden" name="cy12" value=0/>
<input type="hidden" name="cx13" value=0/>
<input type="hidden" name="cy13" value=0/>
<input type="hidden" name="cx14" value=0/>
<input type="hidden" name="cy14" value=0/>
<input type="hidden" name="cx15" value=0/>
<input type="hidden" name="cy15" value=0/>
<input type="hidden" name="cx16" value=0/>
<input type="hidden" name="cy16" value=0/>
<input type="hidden" name="cx17" value=0/>
<input type="hidden" name="cy17" value=0/>
<input type="hidden" name="cx18" value=0/>
<input type="hidden" name="cy18" value=0/>
<input type="hidden" name="cx19" value=0/>
<input type="hidden" name="cy19" value=0/>
<input type="hidden" name="cx20" value=0/>
<input type="hidden" name="cy20" value=0/>

<input type="hidden" name="cr1"/>
<input type="hidden" name="cr2"/>
<input type="hidden" name="cr3"/>
<input type="hidden" name="cr4"/>
<input type="hidden" name="cr5"/>
<input type="hidden" name="cr6"/>
<input type="hidden" name="cr7"/>
<input type="hidden" name="cr8"/>
<input type="hidden" name="cr9"/>
<input type="hidden" name="cr10"/>
<input type="hidden" name="cr11"/>
<input type="hidden" name="cr12"/>
<input type="hidden" name="cr13"/>
<input type="hidden" name="cr14"/>
<input type="hidden" name="cr15"/>
<input type="hidden" name="cr16"/>
<input type="hidden" name="cr17"/>
<input type="hidden" name="cr18"/>
<input type="hidden" name="cr19"/>
<input type="hidden" name="cr20"/>

<input type="hidden" name="cseq1"/>
<input type="hidden" name="cseq2"/>
<input type="hidden" name="cseq3"/>
<input type="hidden" name="cseq4"/>
<input type="hidden" name="cseq5"/>
<input type="hidden" name="cseq6"/>
<input type="hidden" name="cseq7"/>
<input type="hidden" name="cseq8"/>
<input type="hidden" name="cseq9"/>
<input type="hidden" name="cseq10"/>
<input type="hidden" name="cseq11"/>
<input type="hidden" name="cseq12"/>
<input type="hidden" name="cseq13"/>
<input type="hidden" name="cseq14"/>
<input type="hidden" name="cseq15"/>
<input type="hidden" name="cseq16"/>
<input type="hidden" name="cseq17"/>
<input type="hidden" name="cseq18"/>
<input type="hidden" name="cseq19"/>
<input type="hidden" name="cseq20"/>


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

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

<input type="hidden" name="epochC" id="epochC"/>

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

            var pageTimeElapsed = 0;
            var pageTimerID = -1;

            var c1 = 0;
            var c2 = 0;
            var c3 = 0;
            var c4 = 0;
            var c5 = 0;
            var c6 = 0;
            var c7 = 0;
            var c8 = 0;
            var c9 = 0;
            var c10 = 0;
            var c11 = 0;
            var c12 = 0;
            var c13 = 0;
            var c14 = 0;
            var c15 = 0;
            var c16 = 0;
            var c17 = 0;
            var c18 = 0;
            var c19 = 0;
            var c20 = 0;

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

            function pageTick() {
                pageTimeElapsed++
                document.getElementById("epochC").value = pageTimeElapsed;
            }

            window.onload = function () {
                if (pageTimerID == -1) {
                    pageTimerID = setInterval(pageTick, 1000);
                }
            };

            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");
                    autoSet(idSelectedElement, "box16");
                    autoSet(idSelectedElement, "box17");
                    autoSet(idSelectedElement, "box18");
                    autoSet(idSelectedElement, "box19");
                    autoSet(idSelectedElement, "box20");

                    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("box1", "box16");
                var anyCollision = anyCollision + checkCollisions("box1", "box17");
                var anyCollision = anyCollision + checkCollisions("box1", "box18");
                var anyCollision = anyCollision + checkCollisions("box1", "box19");
                var anyCollision = anyCollision + checkCollisions("box1", "box20");

                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("box2", "box16");
                var anyCollision = anyCollision + checkCollisions("box2", "box17");
                var anyCollision = anyCollision + checkCollisions("box2", "box18");
                var anyCollision = anyCollision + checkCollisions("box2", "box19");
                var anyCollision = anyCollision + checkCollisions("box2", "box20");

                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("box3", "box16");
                var anyCollision = anyCollision + checkCollisions("box3", "box17");
                var anyCollision = anyCollision + checkCollisions("box3", "box18");
                var anyCollision = anyCollision + checkCollisions("box3", "box19");
                var anyCollision = anyCollision + checkCollisions("box3", "box20");

                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("box4", "box16");
                var anyCollision = anyCollision + checkCollisions("box4", "box17");
                var anyCollision = anyCollision + checkCollisions("box4", "box18");
                var anyCollision = anyCollision + checkCollisions("box4", "box19");
                var anyCollision = anyCollision + checkCollisions("box4", "box20");

                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("box5", "box16");
                var anyCollision = anyCollision + checkCollisions("box5", "box17");
                var anyCollision = anyCollision + checkCollisions("box5", "box18");
                var anyCollision = anyCollision + checkCollisions("box5", "box19");
                var anyCollision = anyCollision + checkCollisions("box5", "box20");

                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("box6", "box16");
                var anyCollision = anyCollision + checkCollisions("box6", "box17");
                var anyCollision = anyCollision + checkCollisions("box6", "box18");
                var anyCollision = anyCollision + checkCollisions("box6", "box19");
                var anyCollision = anyCollision + checkCollisions("box6", "box20");

                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("box7", "box16");
                var anyCollision = anyCollision + checkCollisions("box7", "box17");
                var anyCollision = anyCollision + checkCollisions("box7", "box18");
                var anyCollision = anyCollision + checkCollisions("box7", "box19");
                var anyCollision = anyCollision + checkCollisions("box7", "box20");

                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("box8", "box16");
                var anyCollision = anyCollision + checkCollisions("box8", "box17");
                var anyCollision = anyCollision + checkCollisions("box8", "box18");
                var anyCollision = anyCollision + checkCollisions("box8", "box19");
                var anyCollision = anyCollision + checkCollisions("box8", "box20");


                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("box9", "box16");
                var anyCollision = anyCollision + checkCollisions("box9", "box17");
                var anyCollision = anyCollision + checkCollisions("box9", "box18");
                var anyCollision = anyCollision + checkCollisions("box9", "box19");
                var anyCollision = anyCollision + checkCollisions("box9", "box20");

                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("box10", "box16");
                var anyCollision = anyCollision + checkCollisions("box10", "box17");
                var anyCollision = anyCollision + checkCollisions("box10", "box18");
                var anyCollision = anyCollision + checkCollisions("box10", "box19");
                var anyCollision = anyCollision + checkCollisions("box10", "box20");

                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("box11", "box16");
                var anyCollision = anyCollision + checkCollisions("box11", "box17");
                var anyCollision = anyCollision + checkCollisions("box11", "box18");
                var anyCollision = anyCollision + checkCollisions("box11", "box19");
                var anyCollision = anyCollision + checkCollisions("box11", "box20");

                var anyCollision = anyCollision + checkCollisions("box12", "box13");
                var anyCollision = anyCollision + checkCollisions("box12", "box14");
                var anyCollision = anyCollision + checkCollisions("box12", "box15");
                var anyCollision = anyCollision + checkCollisions("box12", "box16");
                var anyCollision = anyCollision + checkCollisions("box12", "box17");
                var anyCollision = anyCollision + checkCollisions("box12", "box18");
                var anyCollision = anyCollision + checkCollisions("box12", "box19");
                var anyCollision = anyCollision + checkCollisions("box12", "box20");

                var anyCollision = anyCollision + checkCollisions("box13", "box14");
                var anyCollision = anyCollision + checkCollisions("box13", "box15");
                var anyCollision = anyCollision + checkCollisions("box13", "box16");
                var anyCollision = anyCollision + checkCollisions("box13", "box17");
                var anyCollision = anyCollision + checkCollisions("box13", "box18");
                var anyCollision = anyCollision + checkCollisions("box13", "box19");
                var anyCollision = anyCollision + checkCollisions("box13", "box20");

                var anyCollision = anyCollision + checkCollisions("box14", "box15");
                var anyCollision = anyCollision + checkCollisions("box14", "box16");
                var anyCollision = anyCollision + checkCollisions("box14", "box17");
                var anyCollision = anyCollision + checkCollisions("box14", "box18");
                var anyCollision = anyCollision + checkCollisions("box14", "box19");
                var anyCollision = anyCollision + checkCollisions("box14", "box20");

                var anyCollision = anyCollision + checkCollisions("box15", "box16");
                var anyCollision = anyCollision + checkCollisions("box15", "box17");
                var anyCollision = anyCollision + checkCollisions("box15", "box18");
                var anyCollision = anyCollision + checkCollisions("box15", "box19");
                var anyCollision = anyCollision + checkCollisions("box15", "box20");

                var anyCollision = anyCollision + checkCollisions("box16", "box17");
                var anyCollision = anyCollision + checkCollisions("box16", "box18");
                var anyCollision = anyCollision + checkCollisions("box16", "box19");
                var anyCollision = anyCollision + checkCollisions("box16", "box20");

                var anyCollision = anyCollision + checkCollisions("box17", "box18");
                var anyCollision = anyCollision + checkCollisions("box17", "box19");
                var anyCollision = anyCollision + checkCollisions("box17", "box20");

                var anyCollision = anyCollision + checkCollisions("box18", "box19");
                var anyCollision = anyCollision + checkCollisions("box18", "box20");

                var anyCollision = anyCollision + checkCollisions("box19", "box20");


                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
                cx1.value = parseInt(document.getElementById("box1").getAttributeNS(null, "x"));
                cy1.value = parseInt(document.getElementById("box1").getAttributeNS(null, "y"));
                cx2.value = parseInt(document.getElementById("box2").getAttributeNS(null, "x"));
                cy2.value = parseInt(document.getElementById("box2").getAttributeNS(null, "y"));
                cx3.value = parseInt(document.getElementById("box3").getAttributeNS(null, "x"));
                cy3.value = parseInt(document.getElementById("box3").getAttributeNS(null, "y"));
                cx4.value = parseInt(document.getElementById("box4").getAttributeNS(null, "x"));
                cy4.value = parseInt(document.getElementById("box4").getAttributeNS(null, "y"));
                cx5.value = parseInt(document.getElementById("box5").getAttributeNS(null, "x"));
                cy5.value = parseInt(document.getElementById("box5").getAttributeNS(null, "y"));
                cx6.value = parseInt(document.getElementById("box6").getAttributeNS(null, "x"));
                cy6.value = parseInt(document.getElementById("box6").getAttributeNS(null, "y"));
                cx7.value = parseInt(document.getElementById("box7").getAttributeNS(null, "x"));
                cy7.value = parseInt(document.getElementById("box7").getAttributeNS(null, "y"));
                cx8.value = parseInt(document.getElementById("box8").getAttributeNS(null, "x"));
                cy8.value = parseInt(document.getElementById("box8").getAttributeNS(null, "y"));
                cx9.value = parseInt(document.getElementById("box9").getAttributeNS(null, "x"));
                cy9.value = parseInt(document.getElementById("box9").getAttributeNS(null, "y"));
                cx10.value = parseInt(document.getElementById("box10").getAttributeNS(null, "x"));
                cy10.value = parseInt(document.getElementById("box10").getAttributeNS(null, "y"));
                cx11.value = parseInt(document.getElementById("box11").getAttributeNS(null, "x"));
                cy11.value = parseInt(document.getElementById("box11").getAttributeNS(null, "y"));
                cx12.value = parseInt(document.getElementById("box12").getAttributeNS(null, "x"));
                cy12.value = parseInt(document.getElementById("box12").getAttributeNS(null, "y"));
                cx13.value = parseInt(document.getElementById("box13").getAttributeNS(null, "x"));
                cy13.value = parseInt(document.getElementById("box13").getAttributeNS(null, "y"));
                cx14.value = parseInt(document.getElementById("box14").getAttributeNS(null, "x"));
                cy14.value = parseInt(document.getElementById("box14").getAttributeNS(null, "y"));
                cx15.value = parseInt(document.getElementById("box15").getAttributeNS(null, "x"));
                cy15.value = parseInt(document.getElementById("box15").getAttributeNS(null, "y"));
                cx16.value = parseInt(document.getElementById("box16").getAttributeNS(null, "x"));
                cy16.value = parseInt(document.getElementById("box16").getAttributeNS(null, "y"));
                cx17.value = parseInt(document.getElementById("box17").getAttributeNS(null, "x"));
                cy17.value = parseInt(document.getElementById("box17").getAttributeNS(null, "y"));
                cx18.value = parseInt(document.getElementById("box18").getAttributeNS(null, "x"));
                cy18.value = parseInt(document.getElementById("box18").getAttributeNS(null, "y"));
                cx19.value = parseInt(document.getElementById("box19").getAttributeNS(null, "x"));
                cy19.value = parseInt(document.getElementById("box19").getAttributeNS(null, "y"));
                cx20.value = parseInt(document.getElementById("box20").getAttributeNS(null, "x"));
                cy20.value = parseInt(document.getElementById("box20").getAttributeNS(null, "y"));

                //save sequence
                saveSequence();

                correctSequence();

                rotate();
                cRotationCounter.value = rotationCounter;
                cr1.value = c1;
                cr2.value = c2;
                cr3.value = c3;
                cr4.value = c4;
                cr5.value = c5;
                cr6.value = c6;
                cr7.value = c7;
                cr8.value = c8;
                cr9.value = c9;
                cr10.value = c10;
                cr11.value = c11;
                cr12.value = c12;
                cr13.value = c13;
                cr14.value = c14;
                cr15.value = c15;
                cr16.value = c16;
                cr17.value = c17;
                cr18.value = c18;
                cr19.value = c19;
                cr20.value = c20;

                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");
                    var boxname = selectedElement.getAttribute("id");

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

                    rotationCounter++;

                    if (boxname == 'box1') {
                        c1++;
                    } else if (boxname == 'box2') {
                        c2++;
                    } else if (boxname == 'box3') {
                        c3++;
                    } else if (boxname == 'box4') {
                        c4++;
                    } else if (boxname == 'box5') {
                        c5++;
                    } else if (boxname == 'box6') {
                        c6++;
                    } else if (boxname == 'box7') {
                        c7++;
                    } else if (boxname == 'box8') {
                        c8++;
                    } else if (boxname == 'box9') {
                        c9 = 1;
                    } else if (boxname == 'box10') {
                        c10++;
                    } else if (boxname == 'box11') {
                        c11++;
                    } else if (boxname == 'box12') {
                        c12++;
                    } else if (boxname == 'box13') {
                        c13++;
                    } else if (boxname == 'box14') {
                        c14++;
                    } else if (boxname == 'box15') {
                        c15++;
                    } else if (boxname == 'box16') {
                        c16++;
                    } else if (boxname == 'box17') {
                        c17++;
                    } else if (boxname == 'box18') {
                        c18++;
                    } else if (boxname == 'box19') {
                        c19++;
                    } else if (boxname == 'box20') {
                        c20++;
                    } else {
                        //pass
                    }

                    //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") < 600) {
                    //left border
                    if (selectedElement.getAttributeNS(null, "x") < 260) {
                        selectedElement.setAttributeNS(null, "x", 260);
                        //endDrag(evt);

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

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

                        }
                    }


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

                    //bottom border
                    if (selectedElement.getAttributeNS(null, "y") > 600 - parseInt(selectedElement.getAttributeNS(null, "height")) && selectedElement.getAttributeNS(null, "x") < 600 + parseInt(selectedElement.getAttributeNS(null, 'width'))) {
                        selectedElement.setAttributeNS(null, "y", 600 - 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") < 668) {
                    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"));
                    topLineArray[15] = parseInt((document.getElementById("box16")).getAttribute("y"));
                    topLineArray[16] = parseInt((document.getElementById("box17")).getAttribute("y"));
                    topLineArray[17] = parseInt((document.getElementById("box18")).getAttribute("y"));
                    topLineArray[18] = parseInt((document.getElementById("box19")).getAttribute("y"));
                    topLineArray[19] = parseInt((document.getElementById("box20")).getAttribute("y"));

                    //console.log(topLineArray);

                    var topLineCoordinate = 600;
                    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);

                    cHighestPoint.value = 600-topLineCoordinate;
                }
            }


            //saves the sequence in which participant successfully places items
            function saveSequence() {
                if (selectedElement.getAttributeNS(null, "y") < 600
                    && selectedElement.getAttributeNS(null, "x") < 670) {
                    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);

                    cseq1.value = sequenceArray[0];
                    cseq2.value = sequenceArray[1];
                    cseq3.value = sequenceArray[2];
                    cseq4.value = sequenceArray[3];
                    cseq5.value = sequenceArray[4];
                    cseq6.value = sequenceArray[5];
                    cseq7.value = sequenceArray[6];
                    cseq8.value = sequenceArray[7];
                    cseq9.value = sequenceArray[8];
                    cseq10.value = sequenceArray[9];
                    cseq11.value = sequenceArray[10];
                    cseq12.value = sequenceArray[11];
                    cseq13.value = sequenceArray[12];
                    cseq14.value = sequenceArray[13];
                    cseq15.value = sequenceArray[14];
                    cseq16.value = sequenceArray[15];
                    cseq17.value = sequenceArray[16];
                    cseq18.value = sequenceArray[17];
                    cseq19.value = sequenceArray[18];
                    cseq20.value = sequenceArray[19];
                }
            }


            //deletes last entry in sequenceArray if item is dragged out of container
            function correctSequence() {
                if (selectedElement.getAttributeNS(null, "y") > 600 || selectedElement.getAttributeNS(null, "x") > 670) {
                    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 == 20) {
                    document.getElementById("next-button").disabled = false;
                }
            }


        }


    </script>


    <rect id="container" x="260" y="0" width="410" height="600"
          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="620" width="57" height="87" style="fill: gold"></rect>
    <rect id="box2" class="draggable" x="67" y="620" width="57" height="87" style="fill: peru"></rect>
    <rect id="box3" class="draggable" x="134" y="620" width="57" height="87" style="fill: aqua"></rect>
    <rect id="box4" class="draggable" x="201" y="620" width="57" height="87" style="fill: blueviolet"></rect>
    <rect id="box5" class="draggable" x="268" y="620" width="57" height="87" style="fill: maroon"></rect>
    <rect id="box6" class="draggable" x="335" y="620" width="57" height="87" style="fill: olive"></rect>
    <rect id="box7" class="draggable" x="402" y="620" width="57" height="87" style="fill: green"></rect>
    <rect id="box8" class="draggable" x="469" y="620" width="87" height="87" style="fill: fuchsia"></rect>
    <rect id="box9" class="draggable" x="566" y="620" width="87" height="87" style="fill: IndianRed"></rect>
    <rect id="box10" class="draggable" x="663" y="620" width="87" height="87" style="fill: orange"></rect>
    <rect id="box11" class="draggable" x="760" y="620" width="87" height="87" style="fill: blue"></rect>
    <rect id="box12" class="draggable" x="0" y="735" width="87" height="114" style="fill: pink"></rect>
    <rect id="box13" class="draggable" x="97" y="735" width="87" height="114" style="fill: orange"></rect>
    <rect id="box14" class="draggable" x="194" y="735" width="87" height="114" style="fill: lime"></rect>
    <rect id="box15" class="draggable" x="291" y="735" width="87" height="114" style="fill: navy"></rect>
    <rect id="box16" class="draggable" x="388" y="735" width="87" height="114" style="fill: purple"></rect>
    <rect id="box17" class="draggable" x="485" y="735" width="87" height="114" style="fill: deepskyblue"></rect>
    <rect id="box18" class="draggable" x="582" y="735" width="87" height="114" style="fill: yellow"></rect>
    <rect id="box19" class="draggable" x="679" y="735" width="87" height="114" style="fill: teal"></rect>
    <rect id="box20" class="draggable" x="776" y="735" width="87" height="114" style="fill: hotpink"></rect>





    <line id="optimalTop" x1="250" y1="250" x2="700" y2="250"
          style="stroke: gray; stroke-width: 1; stroke-dasharray: 18"></line>
    <!--<line id="optimalTop" x1="250" y1="110" x2="700" y2="110"
          style="stroke: gray; stroke-width: 1; stroke-dasharray: 18"></line> -->
    <line id="optimalTop" x1="250" y1="170" x2="700" y2="170"
          style="stroke: gray; stroke-width: 1; stroke-dasharray: 18"></line>
    <line id="optimalTop" x1="250" y1="210" x2="700" y2="210"
          style="stroke: gray; stroke-width: 1; stroke-dasharray: 18"></line>

    <line id="optimalTop50" x1="250" y1="150" x2="700" y2="150"
          style="stroke: black; stroke-width: 2; stroke-dasharray: 18"></line>
    <text x="200" y="155" fill="black" font-size="15">$0.00</text>
    <line id="optimalTop150" x1="250" y1="190" x2="700" y2="190"
          style="stroke: black; stroke-width: 2; stroke-dasharray: 18"></line>
    <text x="200" y="195" fill="black" font-size="15">$1.00</text>

    <line id="optimalTop" x1="250" y1="230" x2="700" y2="230"
          style="stroke: black; stroke-width: 2; stroke-dasharray: 18"></line>
    <text x="200" y="235" fill="black" font-size="15">$2.00</text>
    <line id="currentTop" x1="200" y1="600" x2="800" y2="600"
          style="stroke: red; stroke-width: 2; stroke-dasharray: 18"></line>

</svg>


<script>

    let cseq1 = document.querySelector('[name=cseq1');
    let cseq2 = document.querySelector('[name=cseq2');
    let cseq3 = document.querySelector('[name=cseq3');
    let cseq4 = document.querySelector('[name=cseq4');
    let cseq5 = document.querySelector('[name=cseq5');
    let cseq6 = document.querySelector('[name=cseq6');
    let cseq7 = document.querySelector('[name=cseq7');
    let cseq8 = document.querySelector('[name=cseq8');
    let cseq9 = document.querySelector('[name=cseq9');
    let cseq10 = document.querySelector('[name=cseq10');
    let cseq11 = document.querySelector('[name=cseq11');
    let cseq12 = document.querySelector('[name=cseq12');
    let cseq13 = document.querySelector('[name=cseq13');
    let cseq14 = document.querySelector('[name=cseq14');
    let cseq15 = document.querySelector('[name=cseq15');
    let cseq16 = document.querySelector('[name=cseq16');
    let cseq17 = document.querySelector('[name=cseq17');
    let cseq18 = document.querySelector('[name=cseq18');
    let cseq19 = document.querySelector('[name=cseq19');
    let cseq20 = document.querySelector('[name=cseq20');


    let cx1 = document.querySelector('[name=cx1');
    let cy1 = document.querySelector('[name=cy1');
    let cx2 = document.querySelector('[name=cx2');
    let cy2 = document.querySelector('[name=cy2');
    let cx3 = document.querySelector('[name=cx3');
    let cy3 = document.querySelector('[name=cy3');
    let cx4 = document.querySelector('[name=cx4');
    let cy4 = document.querySelector('[name=cy4');
    let cx5 = document.querySelector('[name=cx5');
    let cy5 = document.querySelector('[name=cy5');
    let cx6 = document.querySelector('[name=cx6');
    let cy6 = document.querySelector('[name=cy6');
    let cx7 = document.querySelector('[name=cx7');
    let cy7 = document.querySelector('[name=cy7');
    let cx8 = document.querySelector('[name=cx8');
    let cy8 = document.querySelector('[name=cy8');
    let cx9 = document.querySelector('[name=cx9');
    let cy9 = document.querySelector('[name=cy9');
    let cx10 = document.querySelector('[name=cx10');
    let cy10 = document.querySelector('[name=cy10');
    let cx11 = document.querySelector('[name=cx11');
    let cy11 = document.querySelector('[name=cy11');
    let cx12 = document.querySelector('[name=cx12');
    let cy12 = document.querySelector('[name=cy12');
    let cx13 = document.querySelector('[name=cx13');
    let cy13 = document.querySelector('[name=cy13');
    let cx14 = document.querySelector('[name=cx14');
    let cy14 = document.querySelector('[name=cy14');
    let cx15 = document.querySelector('[name=cx15');
    let cy15 = document.querySelector('[name=cy15');
    let cx16 = document.querySelector('[name=cx16');
    let cy16 = document.querySelector('[name=cy16');
    let cx17 = document.querySelector('[name=cx17');
    let cy17 = document.querySelector('[name=cy17');
    let cx18 = document.querySelector('[name=cx18');
    let cy18 = document.querySelector('[name=cy18');
    let cx19 = document.querySelector('[name=cx19');
    let cy19 = document.querySelector('[name=cy19');
    let cx20 = document.querySelector('[name=cx20');
    let cy20 = document.querySelector('[name=cy20');

    let cr1 = document.querySelector('[name=cr1');
    let cr2 = document.querySelector('[name=cr2');
    let cr3 = document.querySelector('[name=cr3');
    let cr4 = document.querySelector('[name=cr4');
    let cr5 = document.querySelector('[name=cr5');
    let cr6 = document.querySelector('[name=cr6');
    let cr7 = document.querySelector('[name=cr7');
    let cr8 = document.querySelector('[name=cr8');
    let cr9 = document.querySelector('[name=cr9');
    let cr10 = document.querySelector('[name=cr10');
    let cr11 = document.querySelector('[name=cr11');
    let cr12 = document.querySelector('[name=cr12');
    let cr13 = document.querySelector('[name=cr13');
    let cr14 = document.querySelector('[name=cr14');
    let cr15 = document.querySelector('[name=cr15');
    let cr16 = document.querySelector('[name=cr16');
    let cr17 = document.querySelector('[name=cr17');
    let cr18 = document.querySelector('[name=cr18');
    let cr19 = document.querySelector('[name=cr19');
    let cr20 = document.querySelector('[name=cr20');

    let cHighestPoint = document.querySelector('[name=cHighestPoint');
    let cRotationCounter = document.querySelector('[name=cRotationCounter');

</script>


{% endblock %}