{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}

Timer

{% endblock %}

{% block content %}

<p align="center" style="height: 50px; border: 1px solid black; border-radius: 5px; line-height: 50px">
Time: <b> <label id="minutes">--</label>:<label id="seconds">--</label> </b>
</p>

<input type="hidden" name="new_time_choice" value="0"/>
<input type="hidden" name="new_time_choice_rounded" value="0"/>

<center> <button class="btn btn-primary btn-large" onclick="myFunction()"> Next </button> </center>

{% endblock %}

{% block scripts %}

<script>

startTime = new Date;

var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 1000);

function setTime() {
    ++totalSeconds;
    secondsLabel.innerHTML = pad(totalSeconds%60);
    minutesLabel.innerHTML = pad(parseInt(totalSeconds/60));
}

function pad(val) {
    var valString = val + "";
    if (valString.length < 2) {
        return "0" + valString;
    }
    else {
        return valString;
    }
}

function myFunction() {
    var local_time = new Date - startTime;
    document.getElementsByName("new_time_choice")[0].value = parseFloat(local_time/1000);
    document.getElementsByName("new_time_choice_rounded")[0].value = parseInt(Math.round(local_time/1000));
}

</script>

{% endblock %}