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

{% block scripts %}

<!--# src = source, script introduces java script-->
    <script src="{% static 'stag_hunt/flipclock/flipclock.min.js' %}"></script>
    <script>
        var delayarray={{Constants.delayarray}};
        var timetothink=[]
        for (i = 0; i < delayarray.length; i++) {
            console.log(delayarray[i]+1);

        }
        var $Hare = $('.toshowlater');
        var nclick = 0;
        var IsStoppedOnShow=false;
        var startthinking=0;
        var stopthinking=0;
        $(document).ready(function(){
            var clock = new FlipClock($('.your-clock'), {
                clockFace: 'MinuteCounter',
                autoStart: false,
                // The onStart callback
                callbacks: {
                    stop: function () {
                        if (IsStoppedOnShow == false) {
                            $('input#over_ontimeout_field').val(1);
                            $("form#form").submit();
                        }
                    },
                    start:function(){
                        console.log('starting clock...');
                        console.log('total time ' +{{time_left}});
                    },
                    interval: function () {
                        var time = clock.getTime().time;
                        console.log(time);
                        if (time> {{time_left}}){
                            IsStoppedOnShow = false;
                            clock.stop();
                        }
                    }

                }
            });
            clock.start();


            console.log('next show up:'+delayarray[0]);
               if (delayarray[0]!= null) {
                setTimeout(function () {
                    $Hare.show();
                    IsStoppedOnShow=true;
                    clock.stop();
                    startthinking=new Date().getTime();
                }, delayarray[0]*1000);
            }
            $( "#Stag, #Hare" ).click(function() {

                    stopthinking=new Date().getTime();
                timetothink.push((stopthinking-startthinking)/1000);
                $('input#hunting_thinkingtime_field').val(timetothink.toString());
                $('input#decision_field').val(this.id);
                nclick++;
                clock.start();
                IsStoppedOnShow=false;
                $Hare.hide('slow');
                if (delayarray[nclick]!= null){
                setTimeout(function(){
                    $Hare.show();
                    IsStoppedOnShow=true;

                    clock.stop();
                    startthinking=new Date().getTime();
                    console.log('we stopped the clock');
                }, delayarray[nclick]*1000);
                    }
                console.log(this.id)
                if(this.id=="Hare"){$("form#form").submit();}
            });



        });
    </script>




{% endblock %}

{% block styles %}

<link href="{% static 'stag_hunt/flipclock/flipclock.css' %}" rel="stylesheet">
<style>
    span.flip-clock-label{
        display: none;
    }
</style>

<style>
    .toshowlater{
        /*background-color:blue;*/
        display:none;
    }
</style>

{% endblock %}
{% block title %}
    Hunting: waiting for animals to appear...
{% endblock %}

{% block content %}
<div class="your-clock"></div>
<div class="row">
    <div class="pull-right">
        <div id="timer"></div>
    </div>
</div>

<form action="Submit">
    <input type="hidden" name="decision" value="Stag" id="decision_field"/>
    <input type="hidden" name="hunting_thinkingtime" value="0" id="hunting_thinkingtime_field"/>
    <input type="hidden" name="over_ontimeout" value="0" id="over_ontimeout_field"/>

<div class="toshowlater">
    <strong>
       A small animal is coming your way. Do you want to wait for the large animal
        to appear (worth {{Constants.stag_stag_amount}} for each you and your partner),
        or catch the small animal (worth {{Constants.hare_stag_amount}})?

    </strong><br>
       <input id="Stag" class="btn btn-primary btn-large next-button" type="button"
              value="Wait for the large animal">
              <!--//  html button, on which is wirtten "Wait for the large animal"-->
              <!--// returns 'Stag' submit_fun (function defined above)-->
              <!--// btn = if 'type=button' - nothing happens, if 'type=submit' - form is submitted, go to next page (internal html function)-->


       <input id ="Hare" class="btn btn-primary btn-large next-button" type="submit"
              value="Catch the small animal">


</div>


    </form>
        {% include 'stag_hunt/table.html' %}

{% endblock %}