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

{% block title %}
{% endblock %}

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

    <div  style="width:27%;float:left">
        <div  style="width:100%;float:left">
        <p style="line-height: 1.2"><font  size="4"> <strong>  We are now in period <font color="red">{{now}}</font>, and you have to make forecasts of output in period <font color="red">{{tomorrow}}</font> to <font color="red">{{end_hor}}</font>.</strong></font></p>
        </div>
    </div>



    <div  style="width:60%;float:left;text-align:center;">

        <div style="width:100%;padding-right:15px;padding-left:15px;float:left;text-align:left">
            <p style="line-height: 1.2"><font  size="2">
                {% if vintage != None %}
                Out of your forecasts of <font  size="3"> period <font color="red"><em>{{yesterday}}</em></font> output</font>, your forecast made in <font  size="3"> period <font color="red"><em>{{vintage}}</em></font></font> was randomly selected to be rewarded.
                Your <font  size="3">forecast error</font> was <font color="red"  size="3"><em>{{FE}}</em></font>.
                Your <font  size="3">score</font> in this round therefore is  <font color="red"  size="3"><em>{{score}}</em></font> points.
                {% endif %}
                Your <font  size="3">cumulative payoff</font> so far in the experiment is  <font color="red"  size="3"><em>{{cumulated_payoff_lag1}}</em></font> points.</font></p>
        </div>
    </div>

    <div  style="width:13%;float:left;text-align:center;">
        <div  style="display:block;height:51px;padding-right: 5px;float:right;border:2px solid red;width:90px" >
             <div class="counter" id="countdown" style="float:right;"></div>
        </div>

        <p style=" text-align:right;width:80px;padding-right:5px;padding-top:1px;height:50px;float:right;font-size:150%;text-color:black">
            <input type="button" value="Table" href="#" onclick="toggle_visibility('popupbox2');toggle_visibility('chart_outp');toggle_visibility('chart_tax');toggle_visibility('chart_outp_small');toggle_visibility('chart_tax_small');toggle_visibility('invis');return change(this)"  style="font-size:23px;width:75px;height:48px;">
            </input>
         </p>
    </div>

    <div id="popupbox2" class="otree-body container" style="display:none; width:100%; float:left" >
        <div   style="height: 500px;width:35%;float:left">
            <div id="chart_outp_small" style="display:none; height: 325px;"></div>
            <div id="chart_tax_small" style="display:none; height: 175px;"></div>
        </div>
        <div  style="width:65%;height:500px;float:right;padding-left:65px;">
                {% include "LtF/Tablepage.html" %}
        </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;width:250px;float:left;margin-left:30px" >
            <p style="line-height: 1.2"><font  size="3">Your output forecast for period:</font></p>

              <button id="reset" type="button">Reset</button>

        </div>
        <div style="display:block;width:80px;float:left;margin-left:30px" >
             <p style="line-height: 1.2"><font  size="3">t={{tomorrow}}  </font></p>
            <div id="slider-vertical"></div>
        </div>
        <div style="display:block;width:80px;float:left;" >
            <p style="line-height: 1.2"><font  size="3">t={{in2days}}  </font></p>
             <div id="slider-vertical2"></div>
        </div>
        <div style="display:block;width:80px;float:left;" >
            <p style="line-height: 1.2"><font  size="3">t={{in3days}} </font></p>
             <div id="slider-vertical3"></div>
        </div>
        <div style="display:block;width:80px;float:left;" >
            <p style="line-height: 1.2"><font  size="3">t={{in4days}} </font></p>
             <div id="slider-vertical4"></div>
        </div>
        {% if horizon > 4 %}
            <div style="display:block;width:80px;float:left;" >
                 <p style="line-height: 1.2"><font  size="3">t={{in5days}}  </font></p>
                <div id="slider-vertical5"></div>
            </div>
                    <div style="display:block;width:80px;float:left;" >
                 <p style="line-height: 1.2"><font  size="3">t={{in6days}}  </font></p>
                <div id="slider-vertical6"></div>
            </div>
                    <div style="display:block;width:80px;float:left;" >
                 <p style="line-height: 1.2"><font  size="3">t={{in7days}}  </font></p>
                <div id="slider-vertical7"></div>
            </div>
                    <div style="display:block;width:80px;float:left;" >
                 <p style="line-height: 1.2"><font  size="3">t={{in8days}}  </font></p>
                <div id="slider-vertical8"></div>
            </div>
        {% endif  %}

        <div style="display:block;float:right;margin-right:40px;width:200px" >
            <div style="display:block;float:right;width:200px;margin-top:110px" >
                <p style="line-height: 1.2"><font  size="4"> <strong> When you are satisfied with your forecasts, please click "submit".</strong></font></p>
            </div>
            <div style="display:block;float:right;margin-top:10px" >
                 <button class="otree-btn-next btn btn-primary next-button otree-next-button">Submit</button></div>

        </div>





<div id="dialog" title="Time is up!!" style="display:none">
  <p>Please submit your forecasts now!</p>
</div>

</div>
{{ form.guess_y1.as_hidden }}
{{ form.guess_y2.as_hidden }}
{{ form.guess_y3.as_hidden }}
{{ form.guess_y4.as_hidden }}

{% if horizon > 4 %}
    {{ form.guess_y5.as_hidden }}
    {{ form.guess_y6.as_hidden }}
    {{ form.guess_y7.as_hidden }}
    {{ form.guess_y8.as_hidden }}
{% endif  %}

{% endblock %}

{% block scripts %}
 


 <script>




// here are where problems are with the table, changes the width of the header depending on the size of each column, works only if body content > header.




{% include "LtF/plotTax.js" %}
{% include "LtF/plotOut.js" %}
{% include "LtF/plotTax_small.js" %}
{% include "LtF/highcharts.js" %}
{% include "LtF/highcharts-3d.js" %}
{% include "LtF/jquery-ui.js" %}


/// here is the function that creates the counter:
        function countdown( elementName, minutes, seconds )
{
    var element, endTime, hours, mins, msLeft, time;

    function twoDigits( n )
    {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer()
    {
        msLeft = endTime - (+new Date);
        if ( msLeft < 1000 ) {
           /// element.innerHTML = "Time is up!";
           ///alert("Time is up! Please submit your forecasts now.");

            $( function() {
            $( "#dialog" ).dialog();
            } );


        } else {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
    }

    element = document.getElementById( elementName );
    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
    updateTimer();
}
var a = "{{subsession.round_number }}"

// for the first 4 give them 1 minute 30, then 1:15, then 1.
if (a<4){
    countdown( "countdown", 1, 30);
    } else if (a<6) {
    countdown( "countdown", 1, 15 );
    } else     {
    countdown( "countdown", 1, 0 );
     }



</script>


<script type="text/javascript">
<!--
    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>

{% endblock %}