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


{% block content %}

<div class="fullwidth">
     {% include "HSM_main/table_main.html" %}

 {% if subsession.round_number < scrollswitch %}

        <div id="resultgraphs">
    <div style="width:100%;height:100%;overflow-x:auto;overflow-y:hidden;direction:ltr">
    <div style="height:100%;width:150%;direction:ltr" >
    <div id="chart_exp" style=" height: 50%;width:100%;"></div>
    <div  id="chart_fund" style=" height: 50%;width:100%;"></div>
    </div>
        </div>
        </div>


   {% elif subsession.round_number >=  scrollswitch %}

<div id="resultgraphs">
    <div style="width:100%;height:100%;overflow-x:auto;overflow-y:hidden;direction:rtl">
    <div style="height:100%;width:150%;direction:ltr" >
    <div id="chart_exp" style=" height: 50%;width:100%;"></div>
    <div  id="chart_fund" style=" height: 50%;width:100%;"></div>
    </div>
</div>
    </div>

{% endif %}

</div>


<div style="display: block;width: 70%;float:left">

<div style="display: block; height: 133px; float:left;width:25%;margin-top:12px">
<div style="display: block; height: 100%; margin-left: 50px;width:175px;border:2px solid black;padding:10px;text-align:center;float:left;background-color:#EDEDE6">
<h3 style="font-size:150%;"> {% trans "CB Forecast" %}  </h3>
<b style="font-size:175%;">{{signal}} %</b>
</div>
</div>

    <div style="display: block; height: 133px; float:left;width:75%;">

        <div style="padding-top:12px;height:133px;padding-left:15px;text-align: right;">
<p> <strong> {% blocktrans %}Now we are in period {{now}}, and you have to make your forecast about inflation in period {{tomorrow}}.{% endblocktrans %} </strong></p>
</div>
</div>

    </div>




<div class="nextblock">
    <b>{% trans "Please pick a number (decimals allowed):" %}</b>
 {% formfield player.guess_pi label="" %}

{% next_button %}
</div>



{%if group.treat != 'fundamental' %}
{%if subsession.round_number >= Constants.shockperiod %}
{%if subsession.round_number <= Constants.shockperiodend %}
<div id="popupbox" class="popup" style="display:block;position: fixed;top:0; left: 0; height: 100%; width: 100%;background: rgba(225, 225, 225, .25)" >
	<div id="popup_wrapper" style="width: 500px; margin:70px auto; text-align: left;">
		<div id= "popup_container" style="background-color: #FFF; padding-right: 10px;padding-left: 10px;padding-bottom: 10px;border:2px solid black">
            <p style="text-align:right;font-size:280%;text-color:black"><a href="#" onclick="toggle_visibility('popupbox')";"><b style="color:black;">X</b></a>
		        			{% load staticfiles %}
			<img src="{% static "HSM_main/badnews2.png" %}" alt="image" style="width:100%"/>
		</div>
	</div>
</div>
{% endif %}
{% endif %}
{% endif %}



<div  style="display:block;position: fixed;top:0; left: 0;height:10px;text-align: left;" >
		<div style="padding-top: 17px;padding-left: 35px;height:10px">
 <div id="countdown" style=""></div>
		</div>
</div>



{% block scripts %}

    <script>
               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 = "Die Zeit ist abgelaufen!";
        } 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();
}

countdown( "countdown", 1, 0 );



        // Change the selector if needed
var $table = $('table.table'),
    $bodyCells = $table.find('tbody tr:first').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 "HSM_main/FinalResults.js" %}
{% include "HSM_main/Exp.js" %}
</script>
	<script type="text/javascript">
<!--
    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 %}
{% endblock %}