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

{% block styles %}
<STYLE TYPE="text/css">
    .indented { padding-left: 50pt; padding-right: 50pt; } -->
    .timer {
        color: #1B232F; !important;
        font-family: Verdana, Arial, sans-serif;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
    }
    .stringresult {
        font-family: Calibri, Arial sans-serif;
        font-size: 20px;
        font-weight: bold;
        text-decoration: none;
        letter-spacing: 1px;
        padding-left:5px;
        padding-right:5px;
        padding-bottom:-30px;
        vertical-align: middle;
        line-height:30px;

    }
    td {
        vertical-align: top; !important;
        line-height:30px; !important;
        padding-left:5px;
        padding-right:5px;
        padding-bottom:-30px;
    }

#scwork
    {
        width:50%;
        position:relative;
        overflow:auto;

    }

#timework
    {
        position:fixed;
        margin-left:425px;

        display:block;
    }

</STYLE>

    <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>
    {% endblock %}

{% block scripts %}

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 <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 ) {
            //alert("The time in the period has expired and your work will automatically be submitted.");
            //checkwork(1);
            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();
}

 function checkwork(autosubmit){

            window.onbeforeunload = null;
            var num_correct = 0;
            var num_attempted = 0;

            for (var i = 1; i < 201; i++) {
                var solution = document.getElementById("form").elements["sol" + i].value;
                if (document.getElementById("form").elements["ent" + i].value != "") {
                    if (document.getElementById("form").elements["ent" + i].value == solution) {
                        num_correct++;
                        num_attempted++;
                    } else {
                        num_attempted++;
                    }
                }
            }

            document.getElementById("form").elements["num_attempted_2"].value = num_attempted;
            document.getElementById("form").elements["num_decoded_2"].value = num_correct;

            document.getElementById("form").submit();

 }


 window.onbeforeunload = function() {
    return 'Please do not use your browser -back- or -refresh- functions. You may lose your work!';
}


$(document).ready(function() {
    {% if condition == 3 or condition == 4 %}

            $( "#dialog-message" ).dialog({
                  modal: true,
                  position: { my: "center", at: "top", of: window },
                  height: 300,
                  width: 750,
                  autoOpen: true,
                  open: function(event, ui){
                       setTimeout("myClose()",15000);
                  }
                });

    {% else %}
        myPrep();
    {% endif %}
});


function myClose() {
    $("#dialog-message").dialog('destroy');
    document.getElementById("form").elements["ent1"].focus();
    countdown("countdown2", 2, 0);
}

function myPrep() {
    document.getElementById("form").elements["ent1"].focus();
    countdown("countdown2", 2, 0);
}

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');
    checkwork(1);
}

 </script>

{% endblock %}

{% block title %}
    Period # 2 of 2
{% endblock %}

{% block content %}


    <STYLE TYPE="text/css">
        .indented { padding-left: 50pt; padding-right: 50pt; }
        .tabmarg {margin-left: 80px}

    </STYLE>


    <hr>
    <p>
        Below you will find letters, which can be decoded to numbers using the key provided. In the box next to each letter, enter the number that equates to that letter in the
        key. For example, each time the letter "A" appears, you would enter the number 7 into the box next to the letter "A." When the time in the period expires, you will be advanced automatically.
        *Note: When typing, you may use your “Tab” key to advance to the next box.
    </p>

    <hr>

    <div id="scwork">
    <div id="timework">
    <table width="5%" border="1" cellspacing="2" cellpadding="2" bgcolor="FFDDD8">
    <tbody>
        <tr bgcolor="FFDDD8">
            <td align="center"><div class = "timer" id="countdown2"></div></td>
        </tr>
    </tbody>
    </table>
    <img src="{% static "bsw3_task/key.jpg" %}"/><br><br>

    </div>
    <table class="stringresult" width="50%" border="1">
    {% for DecodeStrings in decode_strings %}
         <tr>
             <td>{{ DecodeStrings.letters }}</td>
             <td><input type="text" id="ent{{ forloop.counter }}" name="ent{{ forloop.counter }}" value=""></td>
         </tr>
    {% endfor %}
    </table>
    </div>




    <input type="hidden" id="num_attempted_1" name="num_attempted_2" value="">
    <input type="hidden" id="num_decoded_1" name="num_decoded_2" value="">

    <br><br>

    <!-- <button type="button" class="btn btn-primary" onclick="checkwork(0)">Submit</button>  -->

    {% for DecodeStrings in decode_strings %}
         <input type="hidden" id="soltext{{ forloop.counter }}" name="sol{{ forloop.counter }}" value="{{ DecodeStrings.numbers }}">
    {% endfor %}



    <br>


  <div id="dialog-message">
  <br>
      <table border="0" width="725">
          <tr>
              <td>

              </td>
          </tr>
          <tr>
              <td align="center">
                  <button type="button" class="btn btn-primary" onclick="myClose()">Ok</button>
              </td>
          </tr>
      </table>
  </div>

  <div id="dialog-exp">
  <br>
      <table border="0" width="650">
          <tr>
              <td>
                  The time in the period has expired and your work will automatically be submitted.<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>
          <tr><td>&nbsp;</td></tr>
      </table>
  </div>
{% endblock %}