{{ extends "global/Base.html" }}
{{ load staticfiles otree }}

{{ block title }}
{{ endblock }}

{{ block styles }}

    <style>
        body{
            text-align: center;
        }
        .otree-body{
            max-width: 95%;
        }
        .verticalmiddle{
            height: 100%;
            line-height: 0;
            vertical-align: middle;
        }
        .verticaltop{
            vertical-align: top;
        }
        .hundred{
            width: 100%;
        }
        .flex{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }
        .twenty{
            width: 18%;
            display: inline-block;
        }
        .fifteen{
            width: 15%;
            display: inline-block;
        }
        .twentyfive{
            width: 23%;
            display: inline-block;
        }
        .thirty{
            width: 30%;
            display: inline-block;
        }
        .seventy{
            width: 68%;
            display: inline-block;
        }
        .forty{
            width: 38%;
            display: inline-block;
        }
        .sixty{
            width: 58%;
            display: inline-block;
        }
        .fifty{
            width: 45%;
            display: inline-block;
        }
        .marketpanel{
            display: inline-block;
            width: 40%;
        {#background-color: lightgrey;#}
        }
        .clockpanel{
            display: inline-block;
            width: 15%;
            background-color: #c2ff7b;
            font-size: 2em;
            font-weight: bold;
            vertical-align: top;
        }
        .messagepanel{
            display: inline-block;
            width: 33%;
        {#background-color: green;#}
            vertical-align: top;
        }
        .wallet{
            display: inline-block;
        {#width: %;#}
        {#float: right;#}
            background-color: #fff2cc;
            vertical-align: top;
            margin-top: 20px;
        }
        .marketcashinput{
            width: 90%;
        }
        .marketcashimage{
            width: 50%;
        }
        .verticallines{
            border-left: 2px solid black;
            border-right: 2px solid black;
        }
        .youimage{
            width: 50%;
        }
        .otherimage{
            width: 50%;
        }
        .chatimage{
            height: 4em;
        }
        .circle{
            border-radius: 50%;
            width: 2em;
            height: 2em;
            text-align: center;
            font-size: 2em;
            font-weight: bold;
            line-height: 2em;
        }
        .square{
            width: 2em;
            height: 2em;
            text-align: center;
            font-size: 2em;
            font-weight: bold;
            line-height: 2em;
        }
        .rectangle{
            width: 2em;
            height: 1.5em;
            text-align: center;
            font-size: 2em;
            font-weight: bold;
            line-height: 1.2em;
        }
        .color1{
            background-color: {{ subsession.token_color_1 }}
        }
        .color2{
            background-color: {{ subsession.token_color_2 }}
        }
        .color3{
            background-color: {{ subsession.token_color_3 }}
        }
        .color4{
            background-color: {{ subsession.token_color_4 }}
        }
        .cashgreen{
            background-color: #00b453;
        }
        .cashgreenborder{
            border: 5px solid #00b453;
        }
        .minusbutton{
            width: 90%;
        }
        .plusbutton{
            width: 90%;
        }
        .checkbutton{
            width: 4em;
        }
        .xbutton{
            width: 4em;
        }
        .chattext{
            font-size: 1em;
            height: 2em;
            font-weight: bold;
        {#line-height: 2em;#}
            margin-top: auto;
            margin-bottom: auto;
        }
        .commcircle{
            margin-left: auto;
            margin-right: auto;
            margin-top: 0.5em;
            margin-bottom: 0.5em;
            border-radius: 50%;
            width: 2em;
            height: 2em;
            text-align: center;
        }
        .morecircle{
            margin-left: auto;
            margin-right: auto;
            margin-top: 0.5em;
            margin-bottom: 0.5em;
            {#border-radius: 50%;#}
            {#width: 2em;#}
            {#height: 2em;#}
            line-height: 2em;
            text-align: center;
        }
        .commbutton{
            border-radius: 0.5em;
            background-color: #b4c7e7;
            margin-top: 0.25em;
            margin-bottom: 0.25em;

        }
        .walletimage{
            height: 4em;
        }
        .walletlabel{
            display: inline-block;
            font-size: 2em;
            border: 1px solid black;
        {#padding: 0.1em;#}
        }
        .walletcircle{
            border-radius: 50%;
            width: 2em;
            height: 2em;
            text-align: center;
            font-size: 1.75em;
            font-weight: bold;
            line-height: 2em;
        }
        .okbutton{
            font-size: 1.5em;
            font-weight: bold;
        }
        .exitbutton{
            font-size: 1.5em;
            font-weight: bold;
            background-color: #ed7d31;
            margin-top: 0.5em;
            padding-left: 1em;
            padding-right: 1em;
            border: 2px solid black;
        }
        .message{
            font-size: 1em;
        }
        .lds-ring {
            background-color: #f1dddd;
            color: black;
          display: inline-block;
          position: relative;
          width: 80px;
          height: 80px;
        }
        .lds-ring div {
          box-sizing: border-box;
          display: block;
          position: absolute;
          width: 64px;
          height: 64px;
          margin: 8px;
          border: 8px solid #000;
          border-radius: 50%;
          animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
          border-color: #fff transparent transparent transparent;
        }
        .lds-ring div:nth-child(1) {
          animation-delay: -0.45s;
        }
        .lds-ring div:nth-child(2) {
          animation-delay: -0.3s;
        }
        .lds-ring div:nth-child(3) {
          animation-delay: -0.15s;
        }
        @keyframes lds-ring {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
        .stopbutton{
            margin-top: 1em;
            padding: 0.3em 0.6em 0.3em 0.6em;
            border: 2px solid black;
            font-weight: bold;
        }
        .stopbuttondiv{
            text-align: right;
        }
        .inline-block{
            display: inline-block;
        }
        #bigmessagediv{
            color: red;
            font-weight: bold;
            font-size: 1.8em;
            text-align: center;
        }
        .otree-timer, alert, alert-warning{
            display: none;
        }
        .chatmoney{
            width: 20%;
            height: auto;
        }
        .moneybutton{
            margin-top: 0.5em;
            margin-bottom: 0.5em;
            width: 2em;
            height: 2em;
            text-align: center;
        }
        .buttonmoney{
            width: 120%;
            height: auto;
        }
    </style>

{{ endblock }}

{{ block content }}
    <div class="hundred">
        <div class="marketpanel">
            <div class="hundred">
                <div class="thirty verticaltop">
                    <div class="hundred">
                        <img src="{{ static "marketkids/you.jpg" }}" class="youimage"/>
                    </div>
                    <div class="hundred">
                        <div class="fifty rectangle cashgreenborder" id="offering_token_0">
                            0
                        </div>
                        <div class="fifty">
                            <div class="fifty">
                                <input type="button" value="-1" id="t0_minus1_button" class="minus1button" onclick="cashminus_1_click()">
                            </div>
                            <div class="fifty">
                                <input type="button" value="+1" id="t0_plus1_button" class="plus1button" onclick="cashplus_1_click()">
                            </div>
                            <div class="fifty">
                                <input type="button" value="-10" id="t0_minus10_button" class="minus10button" onclick="cashminus_10_click()">
                            </div>
                            <div class="fifty">
                                <input type="button" value="+10" id="t0_plus10_button" class="plus10button" onclick="cashplus_10_click()">
                            </div>
                        </div>
                    </div>
                    <div class="hundred">
                        <div class="fifty circle color1" id="offering_token_1">
                            {{ player.initial_token_1 }}
                        </div>
                        <div class="fifty">
                            <div class="fifty">
                                <input type="button" value="-" id="t1_minus_button" class="minusbutton" onclick="minus_1_click()">
                            </div>
                            <div class="fifty">
                                <input type="button" value="+" id="t1_plus_button" class="plusbutton" onclick="plus_1_click()">
                            </div>
                        </div>
                    </div>
                    <div class="hundred">
                        <div class="fifty circle color2" id="offering_token_2">
                            {{ player.initial_token_2 }}
                        </div>
                        <div class="fifty">
                            <div class="fifty">
                                <input type="button" value="-" id="t2_minus_button" class="minusbutton" onclick="minus_2_click()">
                            </div>
                            <div class="fifty">
                                <input type="button" value="+" id="t2_plus_button" class="plusbutton" onclick="plus_2_click()">
                            </div>
                        </div>
                    </div>
                    <div class="hundred">
                        <div class="fifty circle color3" id="offering_token_3">
                            {{ player.initial_token_3 }}
                        </div>
                        <div class="fifty">
                            <div class="fifty">
                                <input type="button" value="-" id="t3_minus_button" class="minusbutton" onclick="minus_3_click()">
                            </div>
                            <div class="fifty">
                                <input type="button" value="+" id="t3_plus_button" class="plusbutton" onclick="plus_3_click()">
                            </div>
                        </div>
                    </div>

                    <div id="ownreceived">
                    </div>
                </div>
                <div class="thirty verticallines verticaltop">
                    {#        <img src="{{ static "marketkids/you.png" }}" class=""/>#}
                    <div class="hundred">
                        <div class="fifty">
                            <img id="self_check_button" type="image" class="checkbutton" src="{{ static 'marketkids/self_check.jpg' }}" onclick="self_check_click()">
                        </div>
                        <div class="fifty">
                            <img id="other_check_button" type="image" class="checkbutton" src="{{ static 'marketkids/other_check.jpg' }}">
                        </div>
                    </div>

                    <div class="hundred">
                        <div class="fifty">
                            <img id="self_x_button" type="image" class="xbutton" src="{{ static 'marketkids/self_x.jpg' }}" onclick="self_x_click()">
                        </div>
                        <div class="fifty">
                            <img id="other_x_button" type="image" class="xbutton" src="{{ static 'marketkids/other_x.jpg' }}">
                        </div>
                    </div>

                    <div class="hundred">
                        <div class="fifty">
                            <input id="self_ok_button" type="button" class="okbutton" value="OK" onclick="self_ok_click()" disabled>
                        </div>
                        <div class="fifty">
                            <input id="other_ok_button" type="button" class="okbutton" value="OK" onclick="other_ok_click()" disabled>
                        </div>
                    </div>

                    <div class="hundred">
                        <input id="exit_button" type="button" class="exitbutton" value="EXIT" onclick="exit_click()">
                    </div>
                </div>
                <div class="thirty verticaltop">
                    <div class="hundred">
                        <img src="{{ static "marketkids/other.jpg" }}" class="otherimage"/>
                    </div>
                    <div class="hundred">
                        <div class="fifty">
{#                            <input type="text" id="othercashinput" class="marketcashinput">#}
                            <div class="fifty rectangle cashgreenborder " id="offered_token_0">
                                0
                            </div>
                        </div>
                        <div class="fifty">
{#                            <img src="{{ static "marketkids/money.jpg" }}" class="marketcashimage"/>#}
                        </div>
                    </div>
                    <div class="hundred">
                        <div class="fifty circle color1" id="offered_token_1">
                            {{ player.initial_token_1 }}
                        </div>
                        <div class="fifty">

                        </div>
                    </div>
                    <div class="hundred">
                        <div class="fifty circle color2" id="offered_token_2">
                            {{ player.initial_token_2 }}
                        </div>
                        <div class="fifty">

                        </div>
                    </div>
                    <div class="hundred">
                        <div class="fifty circle color3" id="offered_token_3">
                            {{ player.initial_token_3 }}
                        </div>
                        <div class="fifty">
                        </div>
                    </div>

                    <div id="otherreceived">

                    </div>

                </div>
            </div>
        </div>
        <div class="clockpanel" id="clockpanel">
            TIME LEFT:
        </div>
        <div class="messagepanel">
            <div class="hundred">
                <div class="hundred">
                    <img src="{{ static 'marketkids/chat.jpg' }}" class="chatimage" />
                </div>
                <div class="hundred flex">
                    <div class="fifteen chattext">
                        I WANT
                    </div>
                    <div class="fifteen commbutton">
                        <input type="button" class="commcircle color1" onclick="send_msg('I want',1)" id="want_button_1">
                    </div>
                    <div class="fifteen commbutton">
                        <input type="button" class="commcircle color2" onclick="send_msg('I want',2)" id="want_button_2">
                    </div>
                    <div class="fifteen commbutton">
                        <input type="button" class="commcircle color3" onclick="send_msg('I want',3)" id="want_button_3">
                    </div>
                    <div class="fifteen commbutton">
                        <button type="button" class="moneybutton" onclick="send_msg('I want $',-1)" id="want_button_4"><img class="buttonmoney" src="{{ static 'marketkids/money.jpg' }}"></button>
                    </div>
                    <input type="button" class="fifteen commbutton chattext" value="MORE" onclick="send_msg('I want more',-1)" id="want_button_5">
                </div>
                <div class="hundred">
                    <div class="hundred">
                        <input type="button" class="hundred commbutton chattext" value="MY FINAL OFFER" onclick="send_msg('It\'s my final offer',-1)" id="final_offer_button">
                    </div>
                </div>
                <div class="hundred flex">
                    <div class="twenty chattext">
                        I CANNOT GIVE
                    </div>
                    <div class="twenty commbutton">
                        <input type="button" class="commcircle color1" onclick="send_msg('I cannot give',1)" id="dont_have_button_1">
                    </div>
                    <div class="twenty commbutton">
                        <input type="button" class="commcircle color2" onclick="send_msg('I cannot give',2)" id="dont_have_button_2">
                    </div>
                    <div class="twenty commbutton">
                        <input type="button" class="commcircle color3" onclick="send_msg('I cannot give',3)" id="dont_have_button_3">
                    </div>
                    <div class="twenty commbutton">
                        <button type="button" class="moneybutton" onclick="send_msg('I cannot give $',-1)" id="dont_have_button_4"><img class="buttonmoney" src="{{ static 'marketkids/money.jpg' }}"></button>
                    </div>
                </div>
            </div>

            <div class="hundred wallet">
                <div class="hundred">
                    <div class="twenty verticalmiddle">
                        <img src="{{ static 'marketkids/wallet.jpg' }}" class="walletimage">
                    </div>
                    <div class="thirty">
                        <div class="hundred">
                            <img src="{{ static 'marketkids/money.jpg' }}" class="marketcashimage">
                        </div>
                        <div class="hundred">
                            <div class="walletlabel" id="wallet_cash">150</div>
                        </div>
                    </div>

                    <div class="fifty">
                        <div class="hundred">
                            <div class="twentyfive walletcircle color1" id="wallet_token_1">
                                3
                            </div>
                            <div class="twentyfive walletcircle color2" id="wallet_token_2">
                                1
                            </div>
                            <div class="twentyfive walletcircle color3" id="wallet_token_3">
                                2
                            </div>
                            {#                        <div class="twentyfive walletcircle color4" id="wallet_token_3">#}
                            {#                            1#}
                            {#                        </div>#}
                        </div>
                        <div class="hundred">
                            <div class="walletlabel" id="tokenvalue">100</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="stopbuttondiv hundred">
                <input type="button" class="stopbutton" id="stopbutton" value="STOP" onclick="stopButtonClick()">
            </div>
        </div>
    </div>
    <div class="hundred" id="bigmessagediv">{{ if not other_id }}WAITING FOR PARTNER{{ endif }}</div>
{{ endblock }}

{{ block scripts }}
    {#    <script src="https://cdn.rawgit.com/Mottie/Keyboard/master/js/jquery.keyboard.js"></script>#}
    <script>

        var wallet = [150,3,1,2];
        var offering = [0,0,0,0];
        var offered = [0,0,0,0];
        var own_messages = [];
        var other_messages = [];
        var timeLeft = 0;
        var timeInterval;
        var spinnerTimeout;

        // set up the path for the websocket
        // var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
        // var ws_path = ws_scheme + '://' + window.location.host + "/mk/decision,{{ player.group_id }},{{ player.id_in_group }},{{ player.session.code }}/";
        // console.log("ws_path=" + ws_path);

        // var socket = new ReconnectingWebSocket(ws_path);
        // define what to do when the socket receives messages, opens, closes
        // socket.onmessage = function (e) {
        //     console.log("socket.onmessage() called...");
        //     handleMessage(e)
        // };
        // socket.onopen = function () {
        //     console.log('WebSocket connected');
        // };
        // socket.onclose = function () {
        //     console.log('WebSocket disconnected');
        // };

        function liveRecv(data) {
            console.log('received a message!', data);
            handleMessage(data);
            // your code goes here
        }

        function checkEnter(e){
            e = e || event;
            var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
            return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
        }
        document.querySelector('form').onkeypress = checkEnter;


        window.onload = function() {
            console.log("onload");
            // {{ if not partner }}
            // disableInterface();
            // {{ endif }}
            //document.getElementsByClassName("otree-btn-next btn btn-primary")[0].style.visibility = "hidden";
            //var controls = document.getElementsByClassName("form-group");
            //console.log("controls=" + controls);
            timeLeft = {{ timeLeft }};
            timeInterval = setInterval(update_clock_panel,1000);
            var state = {{ state|json }};
            load_state(state);
            enableMessages();
            {{ if subsession.show_stop_button == False }}
                console.log("HIDING STOP BUTTON, value="+'{{ subsession.show_stop_button }}');
                document.getElementById("stopbutton").style.display="none";
            {{ else }}
                console.log("NOT HIDING STOP BUTTON, value="+'{{ subsession.show_stop_button }}');
            {{ endif }}
        }

        function update_clock_panel(){
            minutes = Math.floor(timeLeft/60)
            seconds = Math.round(timeLeft - (minutes*60));
            if (seconds < 10) {seconds = "0"+seconds;};
            if( timeLeft <= 20 ){
                document.getElementById("clockpanel").style.color="red";
                document.getElementById("clockpanel").style.fontSize="3em";
            }
            document.getElementById("clockpanel").innerHTML="TIME LEFT "+minutes+":"+seconds;
            if( timeLeft <= 0){
                form.submit();
            }
            timeLeft -= 1;
        }

        function exit_click(){
            console.log("exit_click() called.");
            var data = {
                    'type': 'marketkids_message',
                    'message_type': 'exit_sure',
                    'from': {{ player.id_in_group }},
                };
            liveSend(JSON.stringify(data));
        }

        var stopClicked = false;
        function stopButtonClick(){
            if( !stopClicked ) {
                document.getElementById("stopbutton").value = "SURE?";
                stopClicked = true;
            } else {
                var data = {
                    'type': 'marketkids_message',
                    'message_type': 'stop_sure',
                    'from': {{ player.id_in_group }},
                };
                liveSend(JSON.stringify(data));
                form.submit();
            }
        }

        function plus_1_click(){
            // prepare a message saying increase offer for color_1 (and decrease wallet)
            var data = {
                'type': 'marketkids_message',
                'message_type': 'offer_update',
                'from': {{ player.id_in_group }},
                'color': 1,
                'value': 1,
            };
            liveSend(JSON.stringify(data));
        }
        function plus_2_click(){
            // prepare a message saying increase offer for color_1 (and decrease wallet)
            var data = {
                'type': 'marketkids_message',
                'message_type': 'offer_update',
                'from': {{ player.id_in_group }},
                'color': 2,
                'value': 1,
            };
            liveSend(JSON.stringify(data));
        }
        function plus_3_click(){
            // prepare a message saying increase offer for color_1 (and decrease wallet)
            var data = {
                'type': 'marketkids_message',
                'message_type': 'offer_update',
                'from': {{ player.id_in_group }},
                'color': 3,
                'value': 1,
            };
            liveSend(JSON.stringify(data));
        }
        console.log("defining cashplus_1_click...");
        function cashplus_1_click(){
            // prepare a message saying increase offer for color_1 (and decrease wallet)
            var data = {
                'type': 'marketkids_message',
                'message_type': 'offer_update',
                'from': {{ player.id_in_group }},
                'color': 0,
                'value': 1,
            };
            liveSend(JSON.stringify(data));
        }
        function cashminus_1_click(){
            // prepare a message saying increase offer for color_1 (and decrease wallet)
            var data = {
                'type': 'marketkids_message',
                'message_type': 'offer_update',
                'from': {{ player.id_in_group }},
                'color': 0,
                'value': -1,
            };
            liveSend(JSON.stringify(data));
        }
        function cashplus_10_click(){
            // prepare a message saying increase offer for color_1 (and decrease wallet)
            var data = {
                'type': 'marketkids_message',
                'message_type': 'offer_update',
                'from': {{ player.id_in_group }},
                'color': 0,
                'value': 10,
            };
            liveSend(JSON.stringify(data));
        }
        function cashminus_10_click(){
            // prepare a message saying increase offer for color_1 (and decrease wallet)
            var data = {
                'type': 'marketkids_message',
                'message_type': 'offer_update',
                'from': {{ player.id_in_group }},
                'color': 0,
                'value': -10,
            };
            liveSend(JSON.stringify(data));
        }
        function minus_1_click(){
            // prepare a message saying increase offer for color_1 (and decrease wallet)
            var data = {
                'type': 'marketkids_message',
                'message_type': 'offer_update',
                'from': {{ player.id_in_group }},
                'color': 1,
                'value': -1,
            };
            liveSend(JSON.stringify(data));
        }
        function minus_2_click(){
            // prepare a message saying increase offer for color_1 (and decrease wallet)
            var data = {
                'type': 'marketkids_message',
                'message_type': 'offer_update',
                'from': {{ player.id_in_group }},
                'color': 2,
                'value': -1,
            };
            liveSend(JSON.stringify(data));
        }
        function minus_3_click(){
            // prepare a message saying increase offer for color_1 (and decrease wallet)
            var data = {
                'type': 'marketkids_message',
                'message_type': 'offer_update',
                'from': {{ player.id_in_group }},
                'color': 3,
                'value': -1,
            };
            liveSend(JSON.stringify(data));
        }

        function self_check_click(){
            // prepare a message saying increase offer for color_1 (and decrease wallet)
            console.log("self_check_button.disabled==",document.getElementById("self_check_button").disabled);
            if( !document.getElementById("self_check_button").disabled ){
                console.log("self_check_click called.");
                var data = {
                    'type': 'marketkids_message',
                    'message_type': 'check_button_click',
                    'from': {{ player.id_in_group }},
                };
                liveSend(JSON.stringify(data))
            }
        }

        function self_ok_click(){
            console.log("self_ok_click called");
            var data = {
                'type': 'marketkids_message',
                'message_type': 'ok_button_click',
                'from': {{ player.id_in_group }},
            };
            liveSend(JSON.stringify(data))
        }

        function self_x_click(){
            if( document.getElementById("self_x_button").disabled == false ){
                console.log("self_x_click called");
                var data = {
                    'type': 'marketkids_message',
                    'message_type': 'x_button_click',
                    'from': {{ player.id_in_group }},
                };
                liveSend(JSON.stringify(data))
            }
        }

        function update_wallet(){
            document.getElementById("wallet_cash").innerHTML = wallet[0];
            min_value = 9999;
            for( var w=1; w<wallet.length; w++ ) {
                document.getElementById("wallet_token_"+(w)).innerHTML = wallet[w];
                if( wallet[w] < min_value ){
                    min_value = wallet[w];
                }
            }
            document.getElementById("tokenvalue").innerHTML=""+({{ subsession.bundle_value }}*min_value);
        }

        function update_trading_interface(){
            document.getElementById("offering_token_0").innerHTML = offering[0];
            for( var w=1; w<offering.length; w++ ) {
                document.getElementById("offering_token_"+(w)).innerHTML = offering[w];
            }
            document.getElementById("offered_token_0").innerHTML = offered[0];
            for( var w=1; w<offered.length; w++ ) {
                document.getElementById("offered_token_"+(w)).innerHTML = offered[w];
            }
        }

        function load_state(state){
            if( !state['partnered'] ){
                disableInterface();
            }
            for( var x=0; x<wallet.length; x++ ){
                wallet[x] = state['wallet_'+x];
                offered[x] = state['offered_'+x];
                offering[x] = state['offering_'+x];
            }
            if( state['ok_enabled']){
                document.getElementById("self_ok_button").disabled=false;
            } else {
                document.getElementById("self_ok_button").disabled=true;
            }
            console.log("ok_clicked=", state['ok_clicked']);
            if( state['ok_clicked']){
                document.getElementById("self_ok_button").style.border="3px solid black";
            } else {
                document.getElementById("self_ok_button").style.border="3px solid white";
            }
            if( state['other_ok_clicked']){
                document.getElementById("other_ok_button").style.border="3px solid black";
            } else {
                document.getElementById("other_ok_button").style.border="3px solid white";
            }
            console.log("state[check_clicked]="+state['check_clicked']);
            if( state['check_clicked']){
                document.getElementById("self_check_button").style.border="3px solid black";
                disableInterface();
                document.getElementById("self_x_button").disabled=false;
            } else {
                document.getElementById("self_check_button").style.border="3px solid white";
                // enableInterface();
            }
            if( state['other_check_clicked']){
                document.getElementById("other_check_button").style.border="3px solid black";
            } else {
                document.getElementById("other_check_button").style.border="3px solid white";
            }
            if( state['clear_messages']){
                if( spinnerTimeout ) {
                    clearTimeout(spinnerTimeout);
                }
                own_messages = [];
                update_own_messages();
            }
            update_wallet();
            update_trading_interface();
        }

        // disable the trading interface
        function disableInterface(){
            document.getElementById("t0_minus10_button").disabled=true;
            document.getElementById("t0_minus1_button").disabled=true;
            document.getElementById("t0_plus1_button").disabled=true;
            document.getElementById("t0_plus10_button").disabled=true;
            document.getElementById("t1_minus_button").disabled=true;
            document.getElementById("t1_plus_button").disabled=true;
            document.getElementById("t2_minus_button").disabled=true;
            document.getElementById("t2_plus_button").disabled=true;
            document.getElementById("t3_minus_button").disabled=true;
            document.getElementById("t3_plus_button").disabled=true;
            document.getElementById("want_button_1").disabled=true;
            document.getElementById("want_button_2").disabled=true;
            document.getElementById("want_button_3").disabled=true;
            document.getElementById("want_button_4").disabled=true;
            document.getElementById("want_button_5").disabled=true;
            document.getElementById("final_offer_button").disabled=true;
            document.getElementById("dont_have_button_1").disabled=true;
            document.getElementById("dont_have_button_2").disabled=true;
            document.getElementById("dont_have_button_3").disabled=true;
            document.getElementById("dont_have_button_4").disabled=true;
            document.getElementById("self_check_button").disabled=true;
            document.getElementById("self_x_button").disabled=true;
            document.getElementById("exit_button").disabled=true;
            console.log("disableInterface called, self_check_button.disabled=",document.getElementById("self_check_button").disabled);
        }
        
        // enable the trading interface
        function enableInterface(){
            console.log("enableInterface called.");
            document.getElementById("t0_minus10_button").disabled=false;
            document.getElementById("t0_minus1_button").disabled=false;
            document.getElementById("t0_plus1_button").disabled=false;
            document.getElementById("t0_plus10_button").disabled=false;
            document.getElementById("t1_minus_button").disabled=false;
            document.getElementById("t1_plus_button").disabled=false;
            document.getElementById("t2_minus_button").disabled=false;
            document.getElementById("t2_plus_button").disabled=false;
            document.getElementById("t3_minus_button").disabled=false;
            document.getElementById("t3_plus_button").disabled=false;
            document.getElementById("want_button_1").disabled=false;
            document.getElementById("want_button_2").disabled=false;
            document.getElementById("want_button_3").disabled=false;
            document.getElementById("want_button_4").disabled=false;
            document.getElementById("want_button_5").disabled=false;
            document.getElementById("final_offer_button").disabled=false;
            document.getElementById("dont_have_button_1").disabled=false;
            document.getElementById("dont_have_button_2").disabled=false;
            document.getElementById("dont_have_button_3").disabled=false;
            document.getElementById("dont_have_button_4").disabled=false;
            document.getElementById("self_check_button").disabled=false;
            document.getElementById("self_x_button").disabled=false;
            document.getElementById("exit_button").disabled=false;
        }

        function disableMessages(){
            document.getElementById("want_button_1").disabled=true;
            document.getElementById("want_button_2").disabled=true;
            document.getElementById("want_button_3").disabled=true;
            document.getElementById("want_button_4").disabled=true;
            document.getElementById("want_button_5").disabled=true;
            document.getElementById("final_offer_button").disabled=true;
            document.getElementById("dont_have_button_1").disabled=true;
            document.getElementById("dont_have_button_2").disabled=true;
            document.getElementById("dont_have_button_3").disabled=true;
            document.getElementById("dont_have_button_4").disabled=true;
        }

        function enableMessages(){
            document.getElementById("want_button_1").disabled=false;
            document.getElementById("want_button_2").disabled=false;
            document.getElementById("want_button_3").disabled=false;
            document.getElementById("want_button_4").disabled=false;
            document.getElementById("want_button_5").disabled=false;
            document.getElementById("final_offer_button").disabled=false;
            document.getElementById("dont_have_button_1").disabled=false;
            document.getElementById("dont_have_button_2").disabled=false;
            document.getElementById("dont_have_button_3").disabled=false;
            document.getElementById("dont_have_button_4").disabled=false;
        }
        
        // handle incoming messages - we parse the data and if it's the server saying we're done, move on to the next
        // page by clicking the nextButtons
        function handleMessage(data) {
            console.log("handleMessage() called.");
            console.log("data=",data);
            // var data = e;
            console.log("data=");
            console.log(data);
            console.log("data.message_type==" + data.message_type);
            if( data.message_type == "market_start"){
                var state_key = 'state_'+'{{ player.id_in_group }}';
                //console.log("state_key is: "+state_key);
                var state = data[state_key];
                load_state(state);
            } else if ( data.message_type === "new_grouping") {
                var state_key = 'state_'+'{{ player.id_in_group }}';
                //console.log("state_key is: "+state_key);
                var state = data[state_key];
                document.getElementById("bigmessagediv").innerText="NEW PARTNER";
                setTimeout(function(){
                    document.getElementById("bigmessagediv").innerText="";
                },5000);
                enableInterface();
                load_state(state);
            } else if (data.message_type === "offer_update") {
                // if (data.from == {{ player.id_in_group }}) {
                //     // it's from me, update the wallet and offering
                //     wallet[data.color] -= data.value;
                //     offering[data.color] += data.value;
                // } else {
                //     offered[data.color] += data.value;
                // }
                // update_wallet();
                // update_trading_interface();
                var state_key = 'state_'+'{{ player.id_in_group }}';
                console.log("state_key is: "+state_key);
                var state = data[state_key];
                load_state(state);
            } else if (data.message_type == "check_button_click"){
                var state_key = 'state_'+'{{ player.id_in_group }}';
                console.log("state_key is: "+state_key);
                var state = data[state_key];
                load_state(state);
            } else if (data.message_type == "enable_ok_button") {
                document.getElementById("self_ok_button").disabled = false;
            } else if( data.message_type == "x_button_click") {
                var state_key = 'state_' + '{{ player.id_in_group }}';
                {#console.log("state_key is: "+state_key);#}
                var state = data[state_key];
                enableInterface();
                load_state(state);
            } else if (data.message_type == 'ok_button_click'){
                var state_key = 'state_'+'{{ player.id_in_group }}';
                {#console.log("state_key is: "+state_key);#}
                var state = data[state_key];
                load_state(state);
            } else if (data.message_type == 'trade_occurs'){
                //offered, offering, wallet
                var state_key = 'state_'+'{{ player.id_in_group }}';
                {#console.log("state_key is: "+state_key);#}
                var state = data[state_key];
                load_state(state);
                disableInterface();
                own_messages.push({'message': 'TRADE','color': 'black'});
                document.getElementById("bigmessagediv").innerText="TRADE!";
                update_own_messages()
                spinnerTimeout = setTimeout(function(){
                    own_messages.shift();
                    own_messages.push({'message': '','color': 'spinner'});
                    update_own_messages();
                }, 1000*{{ subsession.message_display_length }});
                var data = {
                    'type': 'marketkids_message',
                    'message_type': 'trade_acknowledge',
                    'from': {{ player.id_in_group }},
                };
                liveSend(JSON.stringify(data));
            } else if (data.message_type == 'exit'){
                var state_key = 'state_'+'{{ player.id_in_group }}';
                var state = data[state_key];
                disableInterface();
                load_state(state);
                own_messages.push({'message': 'EXITING PAIRING','color': 'black'});
                update_own_messages();
                document.getElementById("bigmessagediv").innerText="EXIT";
                setTimeout(function(){
                    document.getElementById("bigmessagediv").innerText="";
                },5000);
                spinnerTimeout = setTimeout(function(){
                    own_messages.shift();
                    own_messages.push({'message': '','color': 'spinner'});
                    update_own_messages();
                }, 1000*{{ subsession.message_display_length }});
                if( data.send_acknowledge ){
                    var data = {
                        'type': 'marketkids_message',
                        'message_type': 'exit_acknowledge',
                        'from': {{ player.id_in_group }},
                    };
                    liveSend(JSON.stringify(data));
                }
            } else if (data.message_type == 'other_stop'){
                var state_key = 'state_'+'{{ player.id_in_group }}';
                {#console.log("state_key is: "+state_key);#}
                var state = data[state_key];
                disableInterface();
                load_state(state);
                own_messages.push({'message': 'OTHER PLAYER STOPPED','color': 'black'});
                update_own_messages()
                document.getElementById("bigmessagediv").innerText="OTHER PLAYER STOPPED";
                spinnerTimeout = setTimeout(function(){
                    own_messages.shift();
                    own_messages.push({'message': '','color': 'spinner'});
                    update_own_messages();
                }, 1000*{{ subsession.message_display_length }});
                 var data = {
                    'type': 'marketkids_message',
                    'message_type': 'other_stop_acknowledge',
                    'from': {{ player.id_in_group }},
                };
                liveSend(JSON.stringify(data));
            } else if (data.message_type == 'communication'){
                if (data.from == {{ player.id_in_group }}){
                    topush = {
                        'message': data.message,
                        'color': data.color,
                    }
                    own_messages.push(topush);
                    update_own_messages()
                    setTimeout(function(){
                        own_messages.shift();
                        update_own_messages();
                    }, 1000*{{ subsession.message_display_length }});
                } else {
                    topush = {
                        'message': data.message,
                        'color': data.color,
                    }
                    other_messages.push(topush);
                    update_other_messages()
                    setTimeout(function(){
                        other_messages.shift();
                        update_other_messages();
                    }, 1000*{{ subsession.message_display_length }});
                }
            }
        }

        function update_own_messages(){
            panel = document.getElementById("ownreceived");
            newhtml = "";
            for(m=0; m<own_messages.length; m++ ){
                if( own_messages[m].color == 'spinner') {
                    newhtml += "<div class=\"hundred\">Looking for a new partner.</div><div class=\"lds-ring\"><div></div><div></div><div></div><div></div></div>";
                    document.getElementById("bigmessagediv").innerText="LOOKING FOR NEW PARTNER";
                    disableInterface();
                } else if( own_messages[m].message.includes("$") ){
                    if( own_messages[m].message.includes("want") ) {
                        newhtml += "<div class=\"hundred inline-block\">I want <img class=\"chatmoney\" src=\"{{ static 'marketkids/money.jpg' }}\"></div>";
                    } else {
                        newhtml += "<div class=\"hundred inline-block\">I cannot give <img class=\"chatmoney\" src=\"{{ static 'marketkids/money.jpg' }}\"></div>";
                    }
                } else {
                    newhtml += "<div class=\"hundred message\">" + own_messages[m].message;
                    if (own_messages[m].color > 0) {
                        newhtml += "<input type=\"button\" class=\"commcircle color" + own_messages[m].color + "\"></div>";
                    } else {
                        newhtml += "</div>";
                    }
                }
            }
            console.log("newhtml="+newhtml);
            panel.innerHTML=newhtml;
        }
        function update_other_messages(){
            panel = document.getElementById("otherreceived");
            newhtml = "";
            for(m=0; m<other_messages.length; m++ ){
                console.log("other_messages[m]=",other_messages[m]);
                // newhtml+="<div class=\"hundred message\">"+other_messages[m].message;

                if( other_messages[m].message.includes("$") ){
                    if( other_messages[m].message.includes("want") ) {
                        newhtml += "<div class=\"hundred inline-block\">I want <img class=\"chatmoney\" src=\"{{ static 'marketkids/money.jpg' }}\"></div>";
                    } else {
                        newhtml += "<div class=\"hundred inline-block\">I cannot give <img class=\"chatmoney\" src=\"{{ static 'marketkids/money.jpg' }}\"></div>";
                    }
                } else {
                    newhtml += "<div class=\"hundred message\">" + other_messages[m].message;
                    if( other_messages[m].color > 0 ) {
                        newhtml += "<input type=\"button\" class=\"commcircle color" + other_messages[m].color + "\"></div>";
                    } else {
                        newhtml += "</div>";
                    }
                }
            }
            console.log("newhtml="+newhtml);
            panel.innerHTML=newhtml;
        }

        // var messageTimeout;
        function send_msg(msg, num){
            disableMessages();
            console.log("msg_i_want("+num+") called");
            var data = {
                'type': 'marketkids_message',
                'message_type': 'communication',
                'from': {{ player.id_in_group }},
                'message': msg,
                'color': num,
            };
            // clearTimeout(messageInterval);
            setTimeout(function(){
                enableMessages();
            }, 5000);
            liveSend(JSON.stringify(data))
        }
    </script>
{{ endblock }}