{% extends "otree/WaitPage.html" %}
{% load staticfiles otree %}
{% load i18n %}

{% block title %}
{% endblock %}



{% block content %}
<div style="width:100%;height:870px;overflow:hidden;">



    <div  style="width:40%;float:left">
        <div  style="width:100%;float:left">
        <p style="line-height: 1.2"><font  size="4"> <strong>  Please wait for the other participants to submit their forecasts.</strong></font></p>
        </div>
    </div>







    <div id="invis" style="display:block">
        <div style="height: 500px;width:100%; float:left">
            <div id="chart_outp" style="display:block; height: 65%;width:100%;"></div>
            <div id="chart_tax" style="display:block; height: 35%;width:100%;"></div>
        </div>
    </div>


    <div  style="width:100%;float:left;height:290px;">

            <div style="display:block;float:right;margin-right:40px;width:200px" >
                  <div style="display:block;float:right;width:200px;margin-top:110px" >


</div>
                   <div style="display:none;float:right;margin-top:10px" >
        <button class="otree-btn-next btn btn-primary next-button otree-next-button">Submit</button></div>
    </div>








</div>



{% endblock %}

{% block app_styles %}
    <style type="text/css">
        .otree-wait-page { max-width:2000px;max-height:600px;font-size:120%}
        .container{width:100%}
    </style>

{% endblock %}

{% block scripts %}



   <script>

// Change the selector if needed
var $table = $('table.table'),
    $bodyCells = $table.find('tbody tr:eq(0)').children(),
    colWidth;

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();

    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });
}).resize(); // Trigger resize handler
{% include "LtF/plotTax.js" %}
{% include "LtF/plotOut.js" %}
{% include "LtF/plotTax_small.js" %}
{% include "LtF/highcharts.js" %}
{% include "LtF/highcharts-3d.js" %}


    function arrondi(a)
    {
    Math.round(a);
    }

    function change(el)
    {
     if (el.value === "Table")
        el.value = "Graph";
     else
        el.value = "Table";
    }

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

   </script>


    <script type="text/javascript">

    $(document).ready(function () {

    var socket;

    initWebSocket();

    function initWebSocket() {

        var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
        var ws_path = ws_scheme + '://' + window.location.host + "{{ view.socket_url|safe }}";
        socket = new ReconnectingWebSocket(ws_path);
        socket.onmessage = function(e) {

            var data = JSON.parse(e.data);

            // Handle errors
            if (data.error) {
                // maybe the div's default text doesn't get shown
                $("#error-notice").text(data.error);
                $("#error-notice").show();
                return;
            }

            console.log('Received redirect message', e.data);
            window.location.href = '{{ view.redirect_url|safe }}';

        };
        socket.onopen = function() {
            console.log('WebSocket connected');
        };
        socket.onclose = function() {
            console.log('WebSocket disconnected');
        };
    }

    });
     </script>
	<script type="text/javascript">

var eggs = document.getElementsByClassName('container');
for(var i = 0; i < eggs.length; i++) {
  eggs[i].style.width = '100%'
}


</script>
{% endblock %}