{{ block title }}
    Round {{player.round_number}}
{{ endblock }}


{{ block styles }}
<style>
   .otree-title {
    visibility: hidden;
    height: 0;
    }

    .main_Container{
        display: flex;
        flex-direction: column;
        //align-items: stretch;;
        margin: 25px;
    }

    /* Create two equal columns that floats next to each other */
    .main_Column {
      float: left;
      //width: 50%;
      padding: 10px;
    }
    .main_Column.left{
        width: 60%;
    }
    .main_Column.right{
        width: 40%;
    }

    .main_Row{
        float: top;
        padding: 10px;
    }
    .main_Row.up{
        height: 90%;
    }
    .main_Row.down{
        height: 10%;
    }
    /* Clear floats after the columns */
    .main_Row:after {
      content: "";
      display: table;
      clear: both;
    }

    .status_table table, th, td {
      border: 2px solid black;
    }
    .status_table td {
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
    }

    .status_table th {
        width: 13%;
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
        font-weight: bold;
    }

#canvas{
    //width: 35%;
    //position: absolute;
    //top: -3%;
    //left: 200px;
    z-index: 1;
    //flex-grow: 3;
    position: relative;
    left: -280px;
    top: -210px;
}

.btns{
   position: relative;
    /*top: -370px;
    left: 180px;*/
    z-index: 3;
}

.button {
  background-color: #4CAF50; // Green
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  //margin: 4px 2px;
  margin-left: 4vw;
    cursor: pointer;
    border: white;
    position: relative;
    top: -2vh;
}

.bbutton {
    width: 50px;
    height: 50px;
    color: white;
    font-size: 25px;
    background-color: #4CAF50;
    //padding: 20px;
    position: relative;
    //left: 50px;
    margin-right: 3vw;
    margin-left: 3vw;
    border: white;
}

.bbutton:before {
    content: "";
    position: absolute;
    top: -38px;
    left: -35px;
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 40px solid #4CAF50;
}

.button1 {border-radius: 0px;}
.button2 {border-radius: 0px;}
.button3 {border-radius: 0px;}
.button4 {border-radius: 0px;}
.button5 {border-radius: 0px;}
.button6 {border-radius: 0px;}
.button7 {border-radius: 0px;}
.button8 {border-radius: 0px;}





#bid-label {
    width: 100%;
    font-size: 2.0em;
    margin: 0px auto;
    //position: absolute;
    top: 233px;
    left: 90px;
    color: #FF0000;
    visibility: hidden;
}

.status_table{
    position: relative;
    left: 95px;
    top: 8%;
    z-index: 2;
}

#auction_btns{
    display: none;
}

#postbid_btns{
    display: none;
    position: relative;
    left: 15vw;
}

#postBidText{
    display: none;
}

.quitedMessage{
    display: none;
}

#jumperBtns{
    display: none;
    position: relative;
    left: 20vw;
}

</style>
{{ endblock }}


{{ block content }}


<!-- Animation that runs per second -->
<div id="bid-counter" style="height:280px" hidden></div>


<div class="main_Container">
    <div class="main_Row up">
        <div class="main_Column left">
            <canvas id="canvas" class = "clock_canvas" width = "900px" height="900px" style="background-color:#ffffff;"></canvas>
            <div class = "postBidText" id = "postBidText" >
                <p style="font-size:3vw; text-align:center;">
                    <br>
                    <b id = "jumper">YOU</b>
                    increased the price<br>
                    from <b id = "priceBeforeJump"></b> to <b id = "priceAfterJump"></b><br>
                    Your Value: {{player.value}}
                </p>
                <p style="font-size:1.5vw; text-align:center;">
                    Please click
                        <b id = "b_message">one of the buttons</b>
                        below to continue.<br>
                        (If you don't click any button for 10 seconds,
                    the auction will automatically continue.)
                </p>
            </div>

            <div class = "quitedMessage" id = "quitedMessage" >
                <p style = "font-size: 3vw; text-align: center;" >
                    You have opted out.<br>
                    Please wait for other players to finish the auction.
                </p>
            </div>



        <div class = "continueMessage" id = "continueMessage" style = "display: none">
            <p style = "font-size: 3vw; text-align: center;" >
                You chose to continue.<br>
                Please wait for other players to make their decisions.
            </p>
        </div>

        </div>
        <div class="main_Column right">
            <table class = "status_table">
                <tr>
                    <th>PARTICIPANT</th> <th>STATUS</th>
                </tr>
                <tr>
                    <td id = 'ALabel'>BIDDER A</td> <td id = "state1">ACTIVE</td>
                </tr>
                <tr>
                    <td id = 'BLabel'>BIDDER B</td> <td id = 'state2'>ACTIVE</td>
                </tr>
                <tr>
                    <td id = 'CLabel'>BIDDER C</td> <td id = 'state3'>ACTIVE</td>
                </tr>
                <tr>
                    <td id = 'DLabel'>BIDDER D</td> <td id = 'state4'>ACTIVE</td>
                </tr>
            </table>
        </div>
</div>

<div class = "main_Row down">
<div class = "btns" id = "auction_btns" >
<button class="bbutton button1" type = "button" onclick="sendBidUpdateOne()">5</button>
<button class="bbutton button2" type = "button" onclick="sendBidUpdateTwo()">10</button>
<button class="bbutton button3" type = "button" onclick="sendBidUpdateThree()">20</button>
<button class="bbutton button4" type = "button" onclick="sendBidUpdateFour()">50</button>
<button class="button button5" type = "button" onclick = "sendBidUpdateOptOut()">OPT OUT</button>
</div>
    <div class = "btns" id = "postbid_btns" >
        <button class="button button6" type = "button" id = "continue" onclick="updateContinue()">CONTINUE</button>
        <button class="button button7" type = "button" id = "optout" onclick = "updatePostBidOptOut()">OPT OUT</button>
    </div>
    <div class = "btns" id = "jumperBtns">
        <button class="button button8" type = "button" id ="jumperctn" onclick="updateContinue()">CONTINUE</button>
    </div>
</div>
</div>


{{ endblock }}

{{ block scripts }}
<script>
//table handler
let one_active = js_vars.player_one_active;
let two_active = js_vars.player_two_active;
let three_active = js_vars.player_three_active;
let four_active = js_vars.player_four_active;
let jumper_id = 0;
let player_id = js_vars.player_id;
let auction = true;
let waiting_for_others = false;
let post_bid = false;
let self_active = js_vars.player_self_active;
let jump_amount = 0;
let continuer = 0;
let first_drawing = true;
let started_over = false;
let preparation_time = 5;


if (!self_active){
    document.getElementById("canvas").style.display = "none";
    document.getElementById("quitedMessage").style.display = "block";
    document.getElementById("auction_btns").style.display = "none";
    document.getElementById("postbid_btns").style.display = "none";
}

function startOver(price, sMinute, sSecond, sHour){
    if (self_active){
        //time_went_by = 0;
        started_over = true;
        document.getElementById("auction_btns").style.display = "none";
        auction = true;
        startPrice = price;
        first_drawing = true;
        start_hour = sHour + 8;
        start_minute = sMinute;
        start_second = sSecond;
        preparation_time = 4; //try to avoid the problem started over but count down start from 6
        ctx.clearRect(-canvas.height / 2, -canvas.height / 2, canvas.height, canvas.height);
        document.getElementById("continueMessage").style.display = "none";
        document.getElementById("postBidText").style.display = "none";
        document.getElementById("canvas").style.display = "block";
        document.getElementById("jumperBtns").style.display = "none";
        //document.getElementById("optout").style.display = "block";
        //document.getElementById("postbid_btns").style.left = "15vw";
        document.getElementById("postbid_btns").style.display = "none";
        //document.getElementById("auction_btns").style.display = "block";

    }

}

    function new_setTable(){
        for (var i = 1; i <= 5; i++){
            tr = $('.status_table tr').eq(i);
            text = tr.find('td').eq(0).text();
            td1= tr.find('td').eq(0);
            td2= tr.find('td').eq(1);
            if(i==pid){
                td1.html(text+"<b> (YOU)</b>");
            }
            else{
                payrounds[i-1]?td1.css('background-color', '#ffd700'):td1.css('background-color', 'white');
                statuses[i-1]?td2.css('background-color', 'white'):td2.text("INACTIVE").css('background-color', '#696969');
            }
        }
    }
    new_setTable();

function setText(){
    if (player_id === jumper_id){
        document.getElementById("b_message").innerHTML = "the button";
    }

    if (player_id === 1){
        if (jumper_id === 1){
            document.getElementById("jumper").innerHTML = "YOU";
        }
        else if (jumper_id === 2){
            document.getElementById("jumper").innerHTML = "Bidder A";
        }
        else if (jumper_id === 3){
            document.getElementById("jumper").innerHTML = "Bidder B";
        }
        else if (jumper_id === 4){
            document.getElementById("jumper").innerHTML = "Bidder C";
        }
    }
    if (player_id === 2){
        if (jumper_id === 2){
            document.getElementById("jumper").innerHTML = "YOU";
        }
        else if (jumper_id === 1){
            document.getElementById("jumper").innerHTML = "Bidder A";
        }
        else if (jumper_id === 3){
            document.getElementById("jumper").innerHTML = "Bidder B";
        }
        else if (jumper_id === 4){
            document.getElementById("jumper").innerHTML = "Bidder C";
        }
    }
    if (player_id === 3){
        if (jumper_id === 3){
            document.getElementById("jumper").innerHTML = "YOU";
        }
        else if (jumper_id === 1){
            document.getElementById("jumper").innerHTML = "Bidder A";
        }
        else if (jumper_id === 2){
            document.getElementById("jumper").innerHTML = "Bidder B";
        }
        else if (jumper_id === 4){
            document.getElementById("jumper").innerHTML = "Bidder C";
        }
    }
    if (player_id === 4){
        if (jumper_id === 4){
            document.getElementById("jumper").innerHTML = "YOU";
        }
        else if (jumper_id === 1){
            document.getElementById("jumper").innerHTML = "Bidder A";
        }
        else if (jumper_id === 2){
            document.getElementById("jumper").innerHTML = "Bidder C";
        }
        else if (jumper_id === 3){
            document.getElementById("jumper").innerHTML = "Bidder D";
        }
    }
}

function auction_initialization(){
    auction = true;
    time_went_by = 0;

}


const bid_increment = {{C.BID_INCREMENT}};
const max_bid_val = {{C.MAX_AUCTION_VALUE}};
const max_bid_time = (max_bid_val / bid_increment) + preparation_time;

var now = new Date();
//var tz = now.
<!--let start_hour = js_vars.enter_hour + 8;-->
<!--let start_minute = js_vars.enter_minute;-->
<!--let start_second = js_vars.enter_second;-->
<!--let time_went_by = 3600*(now.getHours() - start_hour)+60*(now.getMinutes() - start_minute)-->
<!--    + (now.getSeconds() - start_second);-->
let time_went_by = Math.round((Date.now() / 1000) - js_vars.entry_time);
//console.log("time went by: " + time_went_by);
let bid_label = document.getElementById("bid-label");
let bid_input = document.getElementById("bid_amount");
let bid_val = parseInt(js_vars.starting_price);

let bid_btn = document.getElementsByClassName("bid-btn");
let remaining_players = js_vars.remaining_players; 
//setUpCanvas();
    //first deal with the clock
var canvas = document.getElementById("canvas");
/*var div = document.getElementsByClassName("hcanvas");
canvas.width = div.clientWidth;
canvas.height = div.clientHeight;*/
var ctx = canvas.getContext("2d");

var radius =  (canvas.height)/4;
ctx.translate(canvas.height/2, canvas.height/2);
radius = radius * 0.9;
let startPrice = js_vars.starting_price;
let livePrice = js_vars.starting_price;// + ((time_went_by - 8)/2);


setInterval(prepare, 1000);


//prepare();

function prepare(){

    if (time_went_by < preparation_time){
    ctx.clearRect(-canvas.height/2, -canvas.height/2, canvas.height, canvas.height);
    //console.log("Seconds passed: ");
    drawCountDownStatement(ctx, radius);
    document.getElementById("auction_btns").style.display = "none";

    }
    let now2 = new Date();
        console.log("shour " + start_hour + "sminute + " + start_minute + "ssecond " + start_second);
        console.log("hour " + now2.getHours() + "minute + " + now2.getMinutes() + "second " + now2.getSeconds());
    time_went_by=3600*(now2.getHours() - start_hour) + 60*(now2.getMinutes() - start_minute) +
        (now2.getSeconds() - start_second);

    //("Seconds passed: " + time_went_by);
}




//drawClock();

setInterval(drawClock, 1000);
setInterval(bid_handler, 2000);

//setInterval(ctx.clearRect(0, 0, canvas.width, canvas.height), 1000);
//var now1 = new Date();


function drawClock(){
    //let auction = auction;
    if ((time_went_by > preparation_time) && (auction)) {
        if (self_active) {
            document.getElementById("auction_btns").style.display = "block";
        }
        let now1 = new Date();
        //console.log("shour " + start_hour + "sminute + " + start_minute + "ssecond " + start_second);
        //console.log("hour " + now1.getHours() + "minute + " + now1.getMinutes() + "second " + now1.getSeconds());
        time_went_by = 3600*(now1.getHours() - start_hour)+ 60*(now1.getMinutes() - start_minute)
            + (now1.getSeconds() - start_second);
        /*if (!first_drawing) {
            livePrice += 1;
        }
        if (first_drawing){
            //to set the price when players arrive, or refresh for the first bid round
            livePrice = Math.ceil(livePrice + ((time_went_by - 8)/2));
            first_drawing = false;
        }*/
        livePrice = Math.ceil(startPrice + ((time_went_by - 7)/2));
        //console.log("server date: " + ServerDate.now());
        ctx.clearRect(-canvas.height / 2, -canvas.height / 2, canvas.height, canvas.height);
        drawFace(ctx, radius);
        drawNumbers(ctx, radius);
        drawTime(ctx, radius);
        drawStartingPrice(ctx, radius);
        drawYourValue(ctx, radius);
        drawCenter(ctx, radius);
        drawLivePrice(ctx, radius);
        //sendOnTimeUpdate();
        //livePrice += 1;
        //console.log("update live price: " + livePrice);
    }

    //ctx.clearRect(0, 0, 2*canvas.height, 2*canvas.height);

}

/*function sendOnTimeUpdate() {
    //console.log('received');
    liveSend({'type': 'time_increment', 'value': livePrice});
}*/

function drawTime(ctx, radius){
    /*var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();*/
    var i;
    /*hour = hour%12;
    hour = (hour * Math.PI/6) + (minute * Math.PI/(6*60)) + (second*Math.PI/(360*60));
    minute = (minute * Math.PI/30) + (second * Math.PI/(30*60));
    second = (second*Math.PI/30);*/
    const hands = [0, 30, 60, 90, 100] //, js_vars.start_price_for_js
    for (i = 0; i < 5; i++){
        drawHand(ctx, 2*hands[i]*Math.PI/120, radius * 0.98, radius*0.01);
    }

    //drawHand(ctx, hour, radius * 0.5, radius * 0.07);
    //drawHand(ctx, minute, radius*0.8, radius*0.07);
    drawArrow(ctx,(js_vars.player_value * Math.PI / 60),radius * 0.9, radius * 0.02, 0, 0, 0, -radius*0.95, 2, "blue");
    drawArrow(ctx, (livePrice * Math.PI/60), radius * 0.9, radius * 0.02, 0, 0, 0, -radius*0.95, 2, "DarkOrange");
}

function drawHand(ctx, pos, length, width){
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}

function drawArrow(ctx, pos, length, width, fromx, fromy, tox, toy, arrowWidth, color){
    //variables to be used when creating the arrow
    var headlen = 10;
    var angle = Math.atan2(toy-fromy,tox-fromx);

    ctx.save();
    ctx.strokeStyle = color;

    //starting path of the arrow from the start square to the end square
    //and drawing the stroke
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    //ctx.rotate(-pos);

    //starting a new path from the head of the arrow to one of the sides of
    //the point
    ctx.beginPath();
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),
               toy-headlen*Math.sin(angle-Math.PI/7));

    //path from the side point of the arrow, to the other side point
    ctx.lineTo(tox-headlen*Math.cos(angle+Math.PI/7),
               toy-headlen*Math.sin(angle+Math.PI/7));

    //path from the side point back to the tip of the arrow, and then
    //again to the opposite side point
    ctx.lineTo(tox, toy);
    ctx.lineTo(tox-headlen*Math.cos(angle-Math.PI/7),
               toy-headlen*Math.sin(angle-Math.PI/7));

    //draws the paths created above
    //ctx.strokestyle
    ctx.fillStyle = color;
    ctx.fill();
    ctx.stroke();
    /*ctx.fillstyle = color;
    ctx.fill();*/
    ctx.rotate(-pos);
    ctx.restore();
}

function drawFace(ctx, radius){
    var grad;
    ctx.beginPath();
    ctx.lineTo(0,0);
    ctx.arc(0, 0, radius, -(1/2) * Math.PI, (js_vars.starting_price/60 - 0.5) * Math.PI);
    ctx.lineTo(0,0);
    ctx.fillStyle = "lightskyblue";
    ctx.fill();
    ctx.lineWidth = radius * 0.01;
    ctx.stroke();
    ctx.beginPath();
    ctx.lineTo(0,0);
    ctx.arc(0, 0, radius, (js_vars.starting_price/60 - 0.5) * Math.PI, (100/60 - 0.5) * Math.PI);
    ctx.lineTo(0,0);
    ctx.fillStyle = "gray";
    ctx.fill();
    ctx.lineWidth = radius * 0.01;
    ctx.stroke();
    ctx.beginPath();
    ctx.lineTo(0,0);
    ctx.arc(0, 0, radius, (100/60 - 0.5) * Math.PI, 1.5 * Math.PI);
    ctx.lineTo(0,0);
    ctx.fillStyle = "lightskyblue";
    ctx.lineWidth = radius * 0.01;
    ctx.fill();
    ctx.lineWidth = radius * 0.01;
    ctx.stroke();
    ctx.fillStyle = '#000000';
}
function drawCenter(ctx, radius){
        ctx.beginPath();
    ctx.arc(0, 0, radius * 0.25, 0, 2 * Math.PI);
    ctx.fillStyle = 'DodgerBlue';
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.fillStyle = '#000000';
}

function drawNumbers(ctx, radius){
    var ang;
    var num;
    ctx.font = radius * 0.15 + "px arial";
    ctx.textBaseline = "middle";
    ctx.textAlign = "center";
    const numbers = [0,30,60,90,100];
    for (num = 0; num < 5; num++){
        ang = 2 * numbers[num] * Math.PI/120;
        ctx.rotate(ang);
        ctx.translate(0, -radius * 1.15);
        ctx.rotate(-ang);
        ctx.fillText(numbers[num].toString(), 0, 0);
        ctx.rotate(ang);
        ctx.translate(0, radius * 1.15);
        ctx.rotate(-ang);
    }
}

function drawStartingPrice(ctx, radius){
    var ang;
    ctx.font = radius * 0.13 + "px arial";
    ctx.textBaseline = "middle";
    ctx.textAlign = "center";
    ang = js_vars.starting_price * Math.PI / 60;
    ctx.rotate(ang);
    ctx.translate(0, -radius * 1.51);
    ctx.rotate(-ang);
    ctx.fillText("Starting Price: " + js_vars.starting_price.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius * 1.51);
    ctx.rotate(-ang);
}

function drawYourValue(ctx, radius){
    var ang;
    ctx.font = radius * 0.15 + "px arial";
    ctx.textBaseline = "middle";
    ctx.textAlign = "center";
    ang = js_vars.player_value * Math.PI / 60;
    ctx.rotate(ang);
    ctx.translate(0, -radius * 1.41);
    ctx.rotate(-ang);
    ctx.fillText("Your Value: " + js_vars.player_value.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius * 1.41);
    ctx.rotate(-ang);
}

function drawLivePrice(ctx, radius){
    //var ang;
    ctx.font = radius * 0.25 + "px arial";
    ctx.textBaseline = "middle";
    ctx.textAlign = "center";
    ctx.fillStyle = "white";
    ctx.fillText(livePrice.toString(), 0, 0);
}

function drawCountDownStatement(ctx, radius){
    //console.log("fuck the shit up");
    ctx.font = radius * 0.25 + "px arial";
    ctx.textBaseline = "middle";
    ctx.textAlign = "center";
    ctx.fillStyle = "black";
    ctx.fillText("Please wait for the auction to start", 0, -radius * 0.15);
    ctx.font = radius * 0.45 + "px arial";
    ctx.fillText((preparation_time-time_went_by).toString(), 0, radius * 0.3);
    //console.log("fuck the shit up again");
}

let bid_display = document.getElementById("bid-counter");
bid_display.innerHTML = `<div id="bid-label"></div>`;



let seconds_elapsed = 0;
//let jump_amount = 0;
let jumped = false;

// Run every second to update bid value
//let bid_counter = setInterval(bid_handler, 2000);

function updatePostBidOptOut(){
    self_active = false;
    document.getElementById("postBidText").style.display = "none";
    document.getElementById("quitedMessage").style.display = "block";
    document.getElementById("postbid_btns").style.display = "none";
    document.getElementById("auction_btns").style.display = "none";
    //displayForQuiters();
    //to be optimized
    liveSend({'type': 'opt_out', 'value_before_jump':livePrice});//'value':0, 'remaining':remaining_players, 'value_before_jump':livePrice});
}

function updateContinue(){
    document.getElementById("jumperBtns").style.display = "none";
    document.getElementById("postBidText").style.display = "none";
    document.getElementById("continueMessage").style.display = "block";
    document.getElementById("postbid_btns").style.display = "none";
    liveSend({'type': 'continue', 'value_before_jump':livePrice}); //'value':0, 'remaining':remaining_players, 'value_before_jump':livePrice});
}


// Updates bid counter and bid_amount
function bid_handler() {
    let display_bid_val = parseInt((bid_val)).toFixed(2);
    //bid_label.innerHTML = parseInt((bid_val)).toFixed(2);
    // Check if bid should begin, if not show countdown
    if (seconds_elapsed <= preparation_time) {
        //bid_label.innerHTML = parseInt((bid_val)).toFixed(2);
    }
    // Update bid value
    if (time_went_by > preparation_time && auction) {

        //e <= 100) {
        //bid_label.innerHTML = display_bid_val;
        bid_val += bid_increment;
        //if (bid_btn.hasAttribute("disabled")) {bid_btn.disabled = false};
        //}
    }
    // Once max value is reached, submit bid as max value
    //else if (livePrice > 100) {
        //clearInterval(bid_counter);
        //bid_btn.setAttribute("disabled","disabled");
        //bid_input.value = {{C.MAX_ALLOWABLE_BID}};
        //document.getElementById('form').submit();
    //}
    // Print values outside range for troubleshooting
    /*else {
        console.log("Seconds passed: " + seconds_elapsed);
    }*/
    // Increase count of seconds elapsed
    seconds_elapsed++;
}
let jump_increment = 0;
// Player wins auctions when 2nd last player quits
function liveRecv(data) {
    //console.log('received', data);
    //jump_amount = data.jump_amount;
    //remaining_players = data.remaining_players;
    //let jump_increment = 0;//data["jump_amount"];  //redundant calculation
    let action = data["action"];   //remain functional scope
    //remaining_players = 0;//data["remaining_players"];  //redundant calculation
    let actor_id = 0//data["actor"]; //data["opt-outer"];  //maybe redundant

    if (action === "start_over"){
        //var now = new Date()
        //time_went_by = 60*(now.getMinutes() - data['minute']) + (now.getSeconds() - data['second']);
        console.log("start over received");
        started_over = true;
        startOver(data["live_price"], data['minute'], data['second'], data['hour']);
    }
    ///change the location of this block
    /*if (remaining_players === 1) {
        console.log("live price before submissioin: " + livePrice)

        //not sure if this is a good fix, let's see run time result
        bid_val = livePrice - 3;
        bid_input.value = bid_val.toFixed(2);
        document.getElementById('form').submit();
    }*/

    else if (action === 'opt_out'){
        actor_id = data["actor"];
        //opt_out received");
        //console.log("continuer: " + continuer + " remaining_player " + remaining_players);
        remaining_players--;
        if (remaining_players === 1){
            submit_bid();
        }
        else if (actor_id === js_vars.player_id){
            self_active = false;
            document.getElementById("canvas").style.display = "none";
            document.getElementById("quitedMessage").style.display = "block";
            document.getElementById("state1").style.backgroundColor = "#696969";
            document.getElementById("state1").innerHTML = "INACTIVE";
            document.getElementById("auction_btns").style.display = "none";
            document.getElementById("postbid_btns").style.display = "none";

            //console.log("well received");
            //document.getElementById('form').submit();
        }

        else {
            switch (actor_id) {
            case 1:
                one_active = false;
                break;
            case 2:
                two_active = false;
                break;
            case 3:
                three_active = false;
                break;
            case 4:
                four_active = false;
                break;
            }
            new_setTable();
        }

        if (continuer === remaining_players){
            continuer = 0;
            liveSend({'type': 'start_over', 'value_before_jump':livePrice});//'value':0, 'remaining':remaining_players, 'value_before_jump':livePrice});
            //startOver(data["live_price"]);
        }


    }


    else if (action === 'jump') {

        started_over = false;
        auction = false;
        jump_increment = data['jump_amount'];
        bid_val += jump_increment;
        livePrice = data["live_price"] + jump_increment;
        //bid_input.value = bid_val.toFixed(2);
        //document.getElementById('form').submit();
        jumper_id = data["actor"];
        setText();

        if (self_active) {
            //if ((!started_over) && (!auction)) {
                //console.log("timeout start over sent");
            let myTimeout = setTimeout(sendStartOver, 11000);
            //}
            document.getElementById("canvas").style.display = "none";
            document.getElementById("auction_btns").style.display = "none";
            document.getElementById("postBidText").style.display = "block";
            if (player_id === jumper_id) {
                document.getElementById("jumperBtns").style.display = "block";
            }
            else {
                document.getElementById("postbid_btns").style.display = "block";
            }
            document.getElementById("priceBeforeJump").innerHTML = (livePrice - jump_increment).toString();
            document.getElementById("priceAfterJump").innerHTML = (livePrice).toString();
            /*if (player_id === jumper_id){
                document.getElementById("postbid_btns").style.display = "none";
                //document.getElementById("postbid_btns").style.left = "20vw";
            }*/
        }
    }

    else if (action === 'continue'){
        //auction = false;
        continuer += 1;
        if (continuer === remaining_players){
            continuer = 0;
            if (player_id === data['actor']) {
                liveSend({'type': 'start_over', 'value_before_jump': livePrice});
            }
             //, 'value':0, 'remaining':remaining_players, 'value_before_jump':livePrice});
            //startOver(data["live_price"]);
            //return;
        }

        /*if (actor_id === js_vars.player_id) {
            document.getElementById("postBidText").style.display = "none";
            document.getElementById("continueMessage").style.display = "block";
            document.getElementById("postbid_btns").style.display = "none";
        }*/
    }









    /*if (action === 'opt_out') {
        switch (actor_id) {
            case 1:
                one_active = false;
                break;
            case 2:
                two_active = false;
                break;
            case 3:
                three_active = false;
                break;
            case 4:
                four_active = false;
                break;
        }
        new_setTable();
    }*/
}

function sendStartOver(){
    if ((!started_over) && (!auction)) {
        liveSend({'type': 'start_over', 'value_before_jump': livePrice});
    }
}

function submit_bid(){
        if (self_active) {
            bid_val = livePrice;
        }
        else{
            bid_val = 0;
        }
        bid_input.value = bid_val.toFixed(2);
        document.getElementById('form').submit();
}

// Send current players remaining
function sendBidUpdateOne() {
    //console.log('received');
    //jump_increment = 5;
    liveSend({'type': 'jump', 'value':5, 'value_before_jump':livePrice});
    //'value':5, 'remaining':remaining_players,
}

function sendBidUpdateTwo() {
    //jump_increment = 10;
    liveSend({'type': 'jump', 'value':10, 'value_before_jump':livePrice});
    //'value':10,  'remaining':remaining_players,
}

function sendBidUpdateThree() {
    //jump_increment = 20;
    liveSend({'type': 'jump', 'value':20, 'value_before_jump':livePrice});
    //'value':20,  'remaining':remaining_players,
}

function sendBidUpdateFour() {
    //jump_increment = 50;
    liveSend({'type': 'jump', 'value':50, 'value_before_jump':livePrice});
    //'value':50, 'remaining':remaining_players,
}
function sendBidUpdateOptOut() {
    //document.getElementById("11")
    //displayForQuiters();
    document.getElementById("auction_btns").style.display = "none";
    self_active = false;
    //console.log("opt_out sent");
    liveSend({'type': 'opt_out', 'value_before_jump':livePrice});// 'value':0, 'remaining':remaining_players,

    //document.getElementById('form').submit();
}

/*function displayForQuiters(){
            self_active = false;
            document.getElementById("canvas").style.display = "none";
            document.getElementById("quitedMessage").style.display = "block";
            //document.getElementById("state1").style.backgroundColor = "#696969";
            //document.getElementById("state1").innerHTML = "INACTIVE";
            document.getElementById("auction_btns").style.display = "none";
            document.getElementById("postbid_btns").style.display = "none";

            //console.log("well received");
            //document.getElementById('form').submit();
        }
*/
</script>

{{ endblock }}