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

{% block content %}

<div id="time-limit" align='right' class="otree-timer alert alert-warning" style="display:none;width:100px;
            height:50px;float:right;">
    <p style="text-align:center;">
        <span style="font-weight: bold">
            <span class="glyphicon glyphicon-time"></span>
            <span class="otree-timer__time-left"></span>
        </span>
    </p>
</div>




<div id='task'>

    <p> <br>
    <p>
    <p> <br>
    <p>
    <p> <br>
    <p>

    <div id='toggle'>


        Bitte wählen Sie die Option mit der höchsten Summe. <br>

        <p> <br>
        <p>
        <div align="center">


            <div style="width:500px;
            height:200px;
            text-align:left;
          ">
                <div<br>

                    <div class="form-group required">



                        <div class="controls  field-Input_Active_Choice">
                            <ul>
                                <li><label for="id_Input_Active_Choice_1"><input type="radio"
                                            id="id_Input_Active_Choice_1" value="{{value_1}}" name="Input_Active_Choice"
                                            required> {{label_1}}</label></li>

                                <li><label for="id_Input_Active_Choice_2"><input type="radio"
                                            id="id_Input_Active_Choice_2" value="{{value_2}}" name="Input_Active_Choice"
                                            required> {{label_2}}</label></li>

                                <li><label for="id_Input_Active_Choice_3"><input type="radio"
                                            id="id_Input_Active_Choice_3" value="{{value_3}}" name="Input_Active_Choice"
                                            required> {{label_3}} </label></li>
                            </ul>





                        </div>
                        <!--- .controls -->



                    </div>
                    <!--- .form-group -->


            </div>
        </div>
        <p>
        <p>

    </div>


    <div id='hide'>
        <p>
            {% formfield player.Input_Active_Choice with label=''%}

            <input id='weiter' style="height:1px;width:1px;background-color: white;"
                class="btn btn-primary btn-large btn-primary next-button" type="submit" value="Weiter" />

        </p>
    </div>


    <div id='hidden_elements'>

        <input type="hidden" name="my_hidden_input" value="0" id="id_my_hidden_input" />

        <input type="hidden" name="duration" value="0" id="duration" />

        <input type="hidden" id="key_code_to_press" name="key_code_to_press" value="{{player.key_code_to_press}}">



        <input type="hidden" name="pressed_dummy" value="0" id="pressed_dummy" />
        <input type="hidden" name="time_stamp_pressed_first" value="0" id="time_stamp_pressed_first" />
        <input type="hidden" name="time_stamp_timeout" value="0" id="time_stamp_timeout" />

    </div>


    <input type="hidden" name="time_stamp_entered" value="0" id="time_stamp_entered" />

    <input type="hidden" name="time_stamp_click" value="0" id="time_stamp_click" />

    <input type="hidden" name="time_stamp_click_1" value="0" id="time_stamp_click_1" />
    <input type="hidden" name="time_stamp_click_2" value="0" id="time_stamp_click_2" />
    <input type="hidden" name="time_stamp_click_3" value="0" id="time_stamp_click_3" />
    <input type="hidden" name="no_times_click_1" value="0" id="no_times_click_1" />
    <input type="hidden" name="no_times_click_2" value="0" id="no_times_click_2" />
    <input type="hidden" name="no_times_click_3" value="0" id="no_times_click_3" />


    {% endblock %}


    {% block scripts %}

    <script src="/static/otree/js/jquery.countdown.min.js"></script>

    <script>
        $(document).ready(function () {

            $('#hide').hide();
            // $('#task').hide();


        });

        window.onload = function () {
            $('#task').show();
            $('div#time-limit').show();

            var currentDate = new Date();
            var milliseconds = 30.7 * 1000;
            $('.otree-timer__time-left').countdown(currentDate.valueOf() + milliseconds)
                .on('update.countdown', function (event) {
                    // %-N is "Total count of minutes till the end, non-padded"
                    // %S is seconds left
                    var format = '%-N:%S';
                    $(this).html(event.strftime(format));
                })
                .on('finish.countdown', function (event) {
                    $('#task').hide();
                    $("#weiter").click();
                    var d = new Date();
                    $("#time_stamp_timeout").val(d.getTime());
                });
        };

    </script>



    <script>
        $(document).ready(function () {
            // Hide toogle env at beginning
            $('#hidden_elements').hide();
            // $('#toggle').hide();

            // var key_code_to_press = $('#key_code_to_press').val();

            var pressed = 0;
            var i = 0;
            var j = 0;
            var time_start = 0;
            var durtaion_total = 0;


            /// Copied

            var output = document.getElementById('output'),
                pressed = {};


            //  window.onkeydown = function(e) {
            //      if (e.keyCode ==key_code_to_press) {

            //          $('#toggle').toggle(true);
            //          $('#key').toggle(false);

            //          if ( pressed[e.which] ) return;
            //          pressed[e.which] = e.timeStamp;


            //          $( "#pressed_dummy" ).val( 1 );
            //          var d = new Date();
            //          $( "#time_stamp_pressed_first").val(d.getTime());
            //      }
            //  };

            //  window.onkeyup = function(e) {
            //      if (e.keyCode ==key_code_to_press) {

            //          if ( !pressed[e.which] ) return;
            //          var duration = ( e.timeStamp - pressed[e.which] ) / 1000;
            //          //var duration_total += +duration;
            //          // output.innerHTML += '<p>Key ' + e.which  + ' was pressed for ' + duration + ' seconds</p>';    
            //          pressed[e.which] = 0;
            //          $( "#duration" ).val( j+= +duration );
            //          // var help= $('#duration').val();
            //       //     $("time").text( help);

            //          $('#toggle').toggle(false);
            //          $('#key').toggle(true);
            //          $( "#id_my_hidden_input" ).val( i+=1 );

            // //       var text= $('#id_my_hidden_input').val();
            // //           $("span").text(text);
            //      }
            //  };


        });
        // Getting time spamp clicked item.
        // Getting time spamp clicked item.
        $(document).ready(function (e) {

            var l = 0;
            var m = 0;
            var n = 0;

            var d = new Date();
            $("#time_stamp_entered").val(d.getTime());

            var Input1 = document.getElementById('id_Input_0');
            var Input2 = document.getElementById('id_Input_1');
            var Input3 = document.getElementById('id_Input_2');

            Input1.onclick = handler_1;
            Input2.onclick = handler_2;
            Input3.onclick = handler_3;

            function handler_1() {
                var d = new Date();
                $("#time_stamp_click_1").val(d.getTime());
                $("#no_times_click_1").val(l += 1);

            }
            function handler_2() {
                var d = new Date();
                $("#time_stamp_click_2").val(d.getTime());
                $("#no_times_click_2").val(n += 1);
            }
            function handler_3() {
                var d = new Date();
                $("#time_stamp_click_3").val(d.getTime());
                $("#no_times_click_3").val(m += 1);
            }
        });
    </script>





    {% endblock %}