{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}


{% block scripts %}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script language="JavaScript">


    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 ) {
            timeExp();
        } 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();
    }


 window.onload = function() {
    countdown("countdown2", 0, 30);
 }

function timeExp() {
    $( "#dialog-exp" ).dialog({
        modal: true,
        position: { my: "center", at: "top", of: window },
        height: 200,
        width: 660,
        autoOpen: true,
        open: function(event, ui){
            setTimeout("myCloseExp()",10000);
        }
    });
}

function myCloseExp() {
    $("#dialog-exp").dialog('destroy');
    document.getElementById("form").submit();
}


</script>
{% endblock %}


{% block title %}

{% endblock %}

{% block content %}


    <STYLE TYPE="text/css">
        .indented { padding-left: 50pt; padding-right: 50pt; font-weight: normal !important;}
        .tabmarg {margin-left: 80px}
        .res{
            font-size: large;}
        .resultlabel{
            color: #1B232F;
            font-size: large;
            font-weight: bold;
            background-color: #FFDDD8;
        }
        .resultlabelsm{
            color: #1B232F;
            font-weight: bold;
            background-color: #FFDDD8;
        }
        .norm{
            font-size: medium;
        }
        .ui-dialog-titlebar-close {display: none;}
        .ui-dialog-content {
            background-color: #f6f6f6;
            padding: 15px;
            border: #ebebeb;
            border-style: groove;
            border-width: 2px;
            line-height: normal;
        }
        .ui-dialog-buttonpane {
            text-align: right;
        }
        #dialog-exp {
            display: none
        }
        #dialog-message {
            display: none
        }

    </STYLE>

    <hr>
    <p>
        You have been matched with another manager and are about to begin period #1 of 4. As described previously, your compensation for this task will be based on the profitability of your division in a randomly-selected
        period. Please proceed to begin.
    </p>
    <hr>

    <input type="hidden" id="countdown2" name="countdown2">
    {% next_button %}


  <div id="dialog-exp">
  <br>
      <table border="0" width="650">
          <tr>
              <td>
                  You will be advanced to the first work period in ten seconds.<br>
              </td>
          </tr>
          <tr><td>&nbsp;</td></tr>
          <tr>
              <td align="center">
                  <button type="button" class="btn btn-primary" onclick="myCloseExp()">Ok</button>
              </td>
          </tr>
      </table>
  </div>
{% endblock %}