{% 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='key'>
        Um die Rechenaufgabe zu bearbeiten, halten Sie bitte Taste <b> {{player.key_code_to_press_char}}</b> gedrückt.
    </div>

    <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;">
                {% formfield player.Input with label=''%}
            </div>
        </div>

    </div>

</div>


<div id='hidden_elements'>

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

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

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

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

    <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" />
    <input type="hidden" name="time_stamp_entered" value="0" id="time_stamp_entered" />



    {# Input Fields for Decision times 6 fields 2 for each inpout row #}
    <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" />


    <input type="hidden" name="time_stamp_start_1" value="0" id="time_stamp_start_1" />
    <input type="hidden" name="time_stamp_start_2" value="0" id="time_stamp_start_2" />
    <input type="hidden" name="time_stamp_start_3" value="0" id="time_stamp_start_3" />
    <input type="hidden" name="time_stamp_start_4" value="0" id="time_stamp_start_4" />
    <input type="hidden" name="time_stamp_start_5" value="0" id="time_stamp_start_5" />
    <input type="hidden" name="time_stamp_start_6" value="0" id="time_stamp_start_6" />
    <input type="hidden" name="time_stamp_start_7" value="0" id="time_stamp_start_7" />
    <input type="hidden" name="time_stamp_start_8" value="0" id="time_stamp_start_8" />
    <input type="hidden" name="time_stamp_start_9" value="0" id="time_stamp_start_9" />
    <input type="hidden" name="time_stamp_start_10" value="0" id="time_stamp_start_10" />
    <input type="hidden" name="time_stamp_start_11" value="0" id="time_stamp_start_11" />
    <input type="hidden" name="time_stamp_start_12" value="0" id="time_stamp_start_12" />
    <input type="hidden" name="time_stamp_start_13" value="0" id="time_stamp_start_13" />
    <input type="hidden" name="time_stamp_start_14" value="0" id="time_stamp_start_14" />
    <input type="hidden" name="time_stamp_start_15" value="0" id="time_stamp_start_15" />
    <input type="hidden" name="time_stamp_start_16" value="0" id="time_stamp_start_16" />
    <input type="hidden" name="time_stamp_start_17" value="0" id="time_stamp_start_17" />
    <input type="hidden" name="time_stamp_start_18" value="0" id="time_stamp_start_18" />
    <input type="hidden" name="time_stamp_start_19" value="0" id="time_stamp_start_19" />
    <input type="hidden" name="time_stamp_start_20" value="0" id="time_stamp_start_20" />


    <input type="hidden" name="time_stamp_end_1" value="0" id="time_stamp_end_1" />
    <input type="hidden" name="time_stamp_end_2" value="0" id="time_stamp_end_2" />
    <input type="hidden" name="time_stamp_end_3" value="0" id="time_stamp_end_3" />
    <input type="hidden" name="time_stamp_end_4" value="0" id="time_stamp_end_4" />
    <input type="hidden" name="time_stamp_end_5" value="0" id="time_stamp_end_5" />
    <input type="hidden" name="time_stamp_end_6" value="0" id="time_stamp_end_6" />
    <input type="hidden" name="time_stamp_end_7" value="0" id="time_stamp_end_7" />
    <input type="hidden" name="time_stamp_end_8" value="0" id="time_stamp_end_8" />
    <input type="hidden" name="time_stamp_end_9" value="0" id="time_stamp_end_9" />
    <input type="hidden" name="time_stamp_end_10" value="0" id="time_stamp_end_10" />
    <input type="hidden" name="time_stamp_end_11" value="0" id="time_stamp_end_11" />
    <input type="hidden" name="time_stamp_end_12" value="0" id="time_stamp_end_12" />
    <input type="hidden" name="time_stamp_end_13" value="0" id="time_stamp_end_13" />
    <input type="hidden" name="time_stamp_end_14" value="0" id="time_stamp_end_14" />
    <input type="hidden" name="time_stamp_end_15" value="0" id="time_stamp_end_15" />
    <input type="hidden" name="time_stamp_end_16" value="0" id="time_stamp_end_16" />
    <input type="hidden" name="time_stamp_end_17" value="0" id="time_stamp_end_17" />
    <input type="hidden" name="time_stamp_end_18" value="0" id="time_stamp_end_18" />
    <input type="hidden" name="time_stamp_end_19" value="0" id="time_stamp_end_19" />
    <input type="hidden" name="time_stamp_end_20" value="0" id="time_stamp_end_20" />

</div>


<div id='hide'>
    <p>
        <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>



{% 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) {
                var d = new Date();
                $("#time_stamp_timeout").val(d.getTime());
                $('#task').hide();
                $("#weiter").click();
            });
    };

</script>



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

        // Set default value for radio buttons.
        // The radio button is 0-based, so the ‘Male’ = ‘0’, ‘Female’ = ‘1’ and ‘Unknown’ = ‘2’.
        $('input:radio[name=Input]')[$('#default_option_with_order').val()].checked = true;
        //http://www.mkyong.com/jquery/how-to-select-a-radio-button-with-jquery/


        // 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 k = 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.which || e.keyCode == key_code_to_press) {

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

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

                $("#id_my_hidden_input_2").val(k += 1);

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

                var name_var = "#time_stamp_start_" + k
                $(name_var).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 d = new Date();

                var name_var = "#time_stamp_end_" + i
                $(name_var).val(d.getTime());

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


    });
    // 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 %}