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

{% block title %}
{% endblock %}



{% block content %}

<!-- Here is the message about the task -->
<div class="periodblock2" >
</div>
<div class="periodblock" >
<b> <strong>  Please wait for the other participants to submit their forecasts.</strong></b>
</div>
<div class="nextblock" >
You entered {{player.guess_y1}}.
</div>
 <div class="nextblock2" >
</div>
 <div class="blocPayoff" >
    <strong>  Your cumulative payoff so far in the experiment is  <em>{{player.cum_score_y}}</em> points.</strong>
</div>
<div class="periodblock2" >
</div>
<!-- Here is the button where they enter a decision-->
<!-- in base.html periodblock, nextblock, etc. are defined: their position, alignement, size, etc. -->
{% comment %}<div class= "nextblock">
{% formfield player.guess_y label="What is your output forecast?" %}
    {% next_button %}
</div>{% endcomment %}

<!-- cf base.html, where the class fullwidth is defined, this is to fill in the page -->
<div class="blocGraphique">

    <div id="chart_outp" style=" height: 50%;width:100%;"></div>
     <div id="chart_tax" style=" height: 50%;width:100%;"></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 src="//code.highcharts.com/5.0.6/highcharts.js"></script>
    <script src="//code.highcharts.com/highcharts-3d.js"></script>

   <script>
   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" %}
   </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 %}