{{ extends "global/Page.html" }}


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

    var sec = 0;

    var timer = setInterval(function () {
    document.getElementById("decision_time").value = ((sec+=100)/1000);}, 100);

    document.getElementById("A_points_self").addEventListener('input', totalcalc);
    document.getElementById("A_points_Emp2").addEventListener('input', totalcalc);
    document.getElementById("A_points_Emp3").addEventListener('input', totalcalc);
    document.getElementById("A_points_Emp4").addEventListener('input', totalcalc);
    document.getElementById("B_points_self").addEventListener('input', totalcalc2);
    document.getElementById("B_points_Emp2").addEventListener('input', totalcalc2);
    document.getElementById("B_points_Emp3").addEventListener('input', totalcalc2);
    document.getElementById("B_points_Emp4").addEventListener('input', totalcalc2);

    function totalcalc() {

        var self_A = Number(document.getElementById("form").elements["A_points_self"].value);
        var Emp2_A = Number(document.getElementById("form").elements["A_points_Emp2"].value);
        var Emp3_A = Number(document.getElementById("form").elements["A_points_Emp3"].value);
        var Emp4_A = Number(document.getElementById("form").elements["A_points_Emp4"].value);

        var total_A_points = self_A + Emp2_A + Emp3_A + Emp4_A;
        document.getElementById("form").elements["total_points_A"].value = total_A_points;
    }

    function totalcalc2() {
        var self_B = Number(document.getElementById("form").elements["B_points_self"].value);
        var Emp2_B = Number(document.getElementById("form").elements["B_points_Emp2"].value);
        var Emp3_B = Number(document.getElementById("form").elements["B_points_Emp3"].value);
        var Emp4_B = Number(document.getElementById("form").elements["B_points_Emp4"].value);
        var total_B_points = self_B + Emp2_B + Emp3_B + Emp4_B;
        document.getElementById("form").elements["total_points_B"].value = total_B_points;
    }

    function checkwork(autosubmit){

        if (document.getElementById("form").elements["A_points_self"].value == "") {
            document.getElementById("form").elements["A_points_self"].value = 0;
        }
        if (document.getElementById("form").elements["A_points_Emp2"].value == "") {
            document.getElementById("form").elements["A_points_Emp2"].value = 0;
        }
        if (document.getElementById("form").elements["A_points_Emp3"].value == "") {
            document.getElementById("form").elements["A_points_Emp3"].value = 0;
        }
        if (document.getElementById("form").elements["A_points_Emp4"].value == "") {
            document.getElementById("form").elements["A_points_Emp4"].value = 0;
        }
        if (document.getElementById("form").elements["B_points_self"].value == "") {
            document.getElementById("form").elements["B_points_self"].value = 0;
        }
        if (document.getElementById("form").elements["B_points_Emp2"].value == "") {
            document.getElementById("form").elements["B_points_Emp2"].value = 0;
        }
        if (document.getElementById("form").elements["B_points_Emp3"].value == "") {
            document.getElementById("form").elements["B_points_Emp3"].value = 0;
        }
        if (document.getElementById("form").elements["B_points_Emp4"].value == "") {
            document.getElementById("form").elements["B_points_Emp4"].value = 0;
        }

        var self_A_char = document.getElementById("form").elements["A_points_self"].value;
        var Emp2_A_char = document.getElementById("form").elements["A_points_Emp2"].value;
        var Emp3_A_char = document.getElementById("form").elements["A_points_Emp3"].value;
        var Emp4_A_char = document.getElementById("form").elements["A_points_Emp4"].value;
        var self_B_char = document.getElementById("form").elements["B_points_self"].value;
        var Emp2_B_char = document.getElementById("form").elements["B_points_Emp2"].value;
        var Emp3_B_char = document.getElementById("form").elements["B_points_Emp3"].value;
        var Emp4_B_char = document.getElementById("form").elements["B_points_Emp4"].value;


        if (self_A_char.indexOf("-") > -1 || Emp2_A_char.indexOf("-") > -1 || Emp3_A_char.indexOf("-") > -1 ||
                Emp4_A_char.indexOf("-") > -1 || self_B_char.indexOf("-") > -1 || Emp2_B_char.indexOf("-") > -1 || Emp3_B_char.indexOf("-") > -1 ||
                Emp4_B_char.indexOf("-") > -1 )   {
            alert("Please use positive numbers only.");
            return;
        }

        if (self_A_char.indexOf(".") > -1 || Emp2_A_char.indexOf(".") > -1 || Emp3_A_char.indexOf(".") > -1 ||
                Emp4_A_char.indexOf(".") > -1 || self_B_char.indexOf(".") > -1 || Emp2_B_char.indexOf(".") > -1 || Emp3_B_char.indexOf(".") > -1 ||
                Emp4_B_char.indexOf(".") > -1 )   {
            alert("Please use whole numbers only - no decimals.");
            return;
        }

        var self_A = Number(document.getElementById("form").elements["A_points_self"].value);
        var Emp2_A = Number(document.getElementById("form").elements["A_points_Emp2"].value);
        var Emp3_A = Number(document.getElementById("form").elements["A_points_Emp3"].value);
        var Emp4_A = Number(document.getElementById("form").elements["A_points_Emp4"].value);
        var self_B = Number(document.getElementById("form").elements["B_points_self"].value);
        var Emp2_B = Number(document.getElementById("form").elements["B_points_Emp2"].value);
        var Emp3_B = Number(document.getElementById("form").elements["B_points_Emp3"].value);
        var Emp4_B = Number(document.getElementById("form").elements["B_points_Emp4"].value);
        var total_A_points = self_A + Emp2_A + Emp3_A + Emp4_A;
        var total_B_points = self_B + Emp2_B + Emp3_B + Emp4_B;
        var checkflag = 0;
        var error_A = 0;
        var error_B = 0;
        var error_total = 0;

        if (self_A < 0 || Emp2_A < 0 || Emp3_A < 0 || Emp4_A < 0 || self_B < 0 || Emp2_B < 0 ||
                Emp3_B < 0 || Emp4_B < 0 ) {
            checkflag = 1;
            alert("Please use positive numbers only.");
        }
        if ((self_A > 0 && self_A < 1) || (Emp2_A > 0 && Emp2_A < 1) || (Emp3_A > 0 && Emp3_A < 1) ||
            (Emp4_A > 0 && Emp4_A < 1) || (self_B > 0 && self_B < 1) || (Emp2_B > 0 && Emp2_B < 1) ||
                (Emp3_B > 0 && Emp3_B < 1) || (Emp4_B > 0 && Emp4_B < 1) ) {
            checkflag = 1;
            alert("Please use whole numbers only - no decimals.");
        }

        if (total_A_points != 50) {
            error_A = 1;
            error_total += 1;
        }
        if (total_B_points != 50) {
            error_B = 1;
            error_total += 1;
        }

        if (error_total == 2) {
            checkflag = 1;
            error1();
        } else {
            if (error_A == 1) {
                checkflag = 1;
                error2();
            } else {
                if (error_B == 1) {
                    checkflag = 1;
                    error3();
                }
            }
        }


        if (checkflag == 0) {
            document.getElementById("form").submit();
        }

    }

$(document).ready(function() {
    document.getElementById("form").elements["A_points_self"].focus();
});

function error1() {
    $( "#dialog-message-1" ).dialog({
        modal: true,
        position: { my: "center", at: "top", of: window },
        height: 200,
        width: 500,
        autoOpen: true,
        open: function(event, ui){
            setTimeout("myClose1()",20000);
        }
    });
}

function error2() {
    $( "#dialog-message-2" ).dialog({
        modal: true,
        position: { my: "center", at: "top", of: window },
        height: 250,
        width: 500,
        autoOpen: true,
        open: function(event, ui){
            setTimeout("myClose2()",20000);
        }
    });
}

function error3() {
    $( "#dialog-message-3" ).dialog({
        modal: true,
        position: { my: "center", at: "top", of: window },
        height: 250,
        width: 500,
        autoOpen: true,
        open: function(event, ui){
            setTimeout("myClose3()",20000);
        }
    });
}
function myClose1() {
    $("#dialog-message-1").dialog('destroy');
    document.getElementById("form").elements["A_points_self"].focus();
}
function myClose2() {
    $("#dialog-message-2").dialog('destroy');
    document.getElementById("form").elements["A_points_self"].focus();
}
function myClose3() {
    $("#dialog-message-3").dialog('destroy');
    document.getElementById("form").elements["B_points_self"].focus();
}
</script>

{% endblock %}

{% block styles %}

    <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-1 {
            display: none
        }
        #dialog-message-2 {
            display: none
        }
        #dialog-message-3 {
            display: none
        }
        table, tr, td {
            border: 1px solid;
            padding: 3px;
            border-spacing: 3px;
        }
        .noborder table, .noborder tbody, .noborder td, .noborder th, .noborder tr
        {
            border: none;
        }
    </STYLE>

{% endblock %}

{{ block title }}
    Task
{{ endblock }}

{{ block content }}


    <hr>

    <p>
        As described previously, you have 50 points from each of two pools of resources – “A” and “B.” Points can be
        used in any proportion you choose to either:
    </p>
    <p class="indented">
        1.	Increase your own total output or  <br>
        2.	Increase the total output of another member (or other members) of your team of your choosing.
    </p>
    <p>
        The output generated by the use of each A and B point is summarized below:
    </p>

    <table width="80%" cellspacing="2" cellpadding="2">
        <tr>
            <td width="25%" align="center">Resource (point) type:</td>
            <td width="35%" align="center">Output generated per point if used to increase your own total output:</td>
            <td width="40%" align="center">Randomly determined output generated per point if used to increase the
                total output of another member of your team:</td>
        </tr>
        <tr>
            <td width="25%" align="center">A</td>
            <td width="35%" align="center">2.0 points</td>
            <td width="40%" align="center">Between 1.5 and 2.5 points</td>
        </tr>
        <tr>
            <td width="25%" align="center">B</td>
            <td width="35%" align="center">1.0 points</td>
            <td width="40%" align="center">Between 0.5 and 1.5 points</td>
        </tr>
    </table>



    <hr>
    <p>
        Please indicate how you would like to use your points. Please use whole numbers.
    </p>

    <table width="80%">
        <tr>
            <td width="15%">Resource (point) type:</td>
            <td width="25%">Points to increase your own total output:</td>
            <td width="45%">Points to increase the total output of another member of your team:</td>
            <td width="15%">Total points (Must add up to 50):</td>
        </tr>
        <tr>
            <td align="center">A</td>
            <td align="center"><input type="text"  id="A_points_self" name="A_points_self" maxlength="2" size="2"></td>
            <td align="center">
                <table>
                    <tr>
                        <td><input type="text"  id="A_points_Emp2" name="A_points_Emp2" maxlength="2" size="2"></td>
                        <td>Employee 2</td>
                    </tr>
                    <tr>
                        <td><input type="text"  id="A_points_Emp3" name="A_points_Emp3" maxlength="2" size="2"></td>
                        <td>Employee 3</td>
                    </tr>
                    <tr>
                        <td><input type="text"  id="A_points_Emp4" name="A_points_Emp4" maxlength="2" size="2"></td>
                        <td>Employee 4</td>
                    </tr>
                </table>
            </td>
            <td align="center"><input type="text"  disabled id="total_points_A" name="total_points_A" maxlength="2" size="2" value="0"></td>
        </tr>
        <tr bgcolor="#d3d3d3">
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td align="center">B</td>
            <td align="center"><input type="text"  id="B_points_self" name="B_points_self" maxlength="2" size="2"></td>
            <td align="center">
                <table>
                    <tr>
                        <td><input type="text"  id="B_points_Emp2" name="B_points_Emp2" maxlength="2" size="2"></td>
                        <td>Employee 2</td>
                    </tr>
                    <tr>
                        <td><input type="text"  id="B_points_Emp3" name="B_points_Emp3" maxlength="2" size="2"></td>
                        <td>Employee 3</td>
                    </tr>
                    <tr>
                        <td><input type="text"  id="B_points_Emp4" name="B_points_Emp4" maxlength="2" size="2"></td>
                        <td>Employee 4</td>
                    </tr>
                </table>
            </td>
            <td align="center"><input type="text"  disabled id="total_points_B" name="total_points_B" maxlength="2" size="2" value="0"></td>
        </tr>
    </table>




    <hr>
    <button type="button" class="btn btn-primary" onclick="checkwork(0)">Next</button>
    <input type="hidden" id="decision_time" name="decision_time">

  <div id="dialog-message-1">
  <br>
      <table class="noborder" border="0" width="425">
          <tr>
              <td>
                    Please make sure total A points used and total B points used both add up to 50 each.
              </td>
          </tr>
          <tr><td>&nbsp;</td></tr>
          <tr>
              <td align="center">
                  <button type="button" class="btn btn-primary" onclick="myClose1()">Ok</button>
              </td>
          </tr>
      </table>
  </div>
  <div id="dialog-message-2">
  <br>
      <table class="noborder" border="0" width="425">
          <tr>
              <td>
                    Please make sure total A points used add up to 50.
              </td>
          </tr>
          <tr><td>&nbsp;</td></tr>
          <tr>
              <td align="center">
                  <button type="button" class="btn btn-primary" onclick="myClose2()">Ok</button>
              </td>
          </tr>
      </table>
  </div>
  <div id="dialog-message-3">
  <br>
      <table class="noborder" border="0" width="425">
          <tr>
              <td>
                    Please make sure total B points used add up to 50.
              </td>
          </tr>
          <tr><td>&nbsp;</td></tr>
          <tr>
              <td align="center">
                  <button type="button" class="btn btn-primary" onclick="myClose3()">Ok</button>
              </td>
          </tr>
      </table>
  </div>
{{ endblock }}