{{ block title }}
    First Stage
{{ endblock }}
{{ block content }}

    <div style="background-image: url('../_static/gift.jpeg');"></div>
    <div id="door_series"></div>

    <button id="next" type="button" class="btn btn-primary" onclick="liveSend('next')">Next</button>

    <style>
        #next{
            margin: 15px;
        }

        #door_series{
            width:720px;
        }

        .answer{
            background-image: url("{{ static 'dio_no_bg.png' }}");
            background-size: contain;
            background-color: black;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
            width:60px;
            height:60px;
  
            margin-left: 6px;
            margin-right: 6px;
            margin-top:2px;
            margin-bottom: 2px;
            display: inline-grid;
        }

        .door_bg{
            background-color: black;
            position: relative;
            width:60px;
            height:60px;
  
            margin-left: 6px;
            margin-right: 6px;
            margin-top:2px;
            margin-bottom: 2px;
            display: inline-grid;
        }

        .door{
            background-color: orange;
            border: solid 5px orange;
            position: absolute;
            top:0px;
            left:0px;
            width:60px;
            height:60px;
            overflow-x: hidden;
            cursor: pointer;
            display: inline-grid;
            transform-origin: left;
            /*Speed of the Door animation*/
            transition: all 0.5s ease-in-out;
        }

        .transparent_door{
            background-color: transparent;
            border: solid 5px orange;
            position: absolute;
            top:0px;
            left:0px;
            width:60px;
            height:60px;
            overflow-x: hidden;
            cursor: pointer;
            display: inline-grid;
            transform-origin: left;
            /*Speed of the Door animation*/
            transition: all 0.5s ease-in-out;
        }

        .doorOpen{
            /*prespectiv creates the door open effect*/
            transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-95deg);
        }

        
    </style>

    <script>
        var width_unit = (720*js_vars.num_rows)/(js_vars.num_doors*12)

        // Create doors
        for (let i = 1; i < js_vars.num_doors+1; i++) {
            var bg = document.createElement("div");
            var door = document.createElement("div");
            if (i == js_vars.answer){
                bg.className='answer'
                door.className='door';
                door.onclick = function() { liveSend(i); }
            } else if (i == js_vars.another_door){
                bg.className='door_bg'
                door.className='door';
                door.onclick = function() { liveSend(i); }
            } else {
                bg.className='door_bg'
                door.className='transparent_door';
            }
            bg.style.width = width_unit*10 + 'px';
            bg.style.height = width_unit*10 + 'px';
            bg.style.marginLeft = width_unit + 'px';
            bg.style.marginRight = width_unit + 'px';

            door.id = i;
            door.style.width = width_unit*10 + 'px';
            door.style.height = width_unit*10 + 'px';

            bg.appendChild(door)
            document.getElementById("door_series").appendChild(bg);
        }

        function toggleDoor() {
            element.classList.toggle("doorOpen");
        }

        // live section
        function liveRecv(data) {
            if (data.game_over === true) {
                for (let i = 1; i < js_vars.num_doors+1; i++){
                    document.getElementById(i).classList.add("doorOpen");
                }
                setTimeout(() => { document.getElementById('form').submit(); }, 1000);
            }

            let current_choice;
            if (data.stage != 3){
                current_choice = data.first_choice
            } else {
                current_choice = data.final_choice
            }
                
            if (current_choice != 101) {
                if (data.old_choice != 101) {
                    old_choice = document.getElementById(data.old_choice);
                    old_choice.style.borderColor = "orange";
                };
                document.getElementById(current_choice).style.borderColor = "blue";
            };

            if (data.stage == 2) {
                var keep = data.door_keep;
                var first_choice = data.first_choice;

                for (let i = 1; i < js_vars.num_doors+1; i++) {
                    if (i != keep && i != first_choice) {
                        door = document.getElementById(i)
                        door.classList.toggle("doorOpen");
                        door.onclick = null;
                    };
                };
                liveSend('next');
            };
                

        };

        window.addEventListener('DOMContentLoaded', (event) => {
            liveSend(null);
        });
    </script>

{{ endblock }}