{% load staticfiles otree_tags %}
<script type="text/javascript" src="{% static 'otree/js/jquery.countdown.js' %}"></script>

<script type="text/javascript">
    $(function() {
        $('div#otree-timeout').show();
        var currentDate = new Date();
        var milliseconds = Math.floor({{ view.remaining_timeout_seconds|json }}*1000);
        $('#otree-timeout').countdown(currentDate.valueOf() + milliseconds, function(event) {

            switch(event.type) {
                case "seconds":
                    $(this).find('span#seconds').html(event.value);
                    break;
                case "minutes":
                    $(this).find('span#minutes').html(event.lasting.hours * 60 + parseInt(event.value));
                    break;
                case "finished":
                    $('#otree-timeout').hide(duration=0);
                    $('<input>').attr({
                        type: 'hidden',
                        name: 'timeout_happened',
                        value: '1'
                    }).appendTo('form');
                    $('#form').submit();

                    break;
            }
        });
    });
</script>
