{% extends "otree/Page.html" %}
{% load i18n staticfiles otree %}

{% block internal_scripts %}
    {{ block.super }}

    {% if view.has_timeout_warning %}
        <script src="{% static 'otree/js/jquery.countdown.min.js' %}"></script>
    {% endif %}

    <script type="text/javascript">
        function randomInt(min, maxExclusive) {
            return min + Math.floor(Math.random() * maxExclusive);
        }

        function randomChoice(arr) {
            var idx = randomInt(0, arr.length);
            return arr[idx];
        }

        function randomString(length) {  // taken from https://stackoverflow.com/a/1349426
           var result           = '';
           var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
           var charactersLength = characters.length;
           for ( var i = 0; i < length; i++ ) {
              result += characters.charAt(Math.floor(Math.random() * charactersLength));
           }
           return result;
        }

        $(function() {
            {% if view.has_timeout_warning %}
                var html_tpl = $(
                    '<div class="otree-timer alert alert-warning" id="otree-warning-timeout">' +
                        '<p>{{ timer_warning_text }} ' +
                            '<span style="font-weight: bold">' +
                                '<span class="glyphicon glyphicon-time"></span>' +
                                '<span class="otree-warning-timer__time-left"></span>' +
                            '</span>' +
                        '</p>' +
                    '</div>'
                );

                $('#form').prepend(html_tpl);

                var currentDate = new Date();
                var remainingTimeoutSeconds = {{ timeout_warning_seconds|escapejs }};
                var milliseconds = Math.floor(remainingTimeoutSeconds * 1000);
                $('.otree-warning-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) {
                        $('<input>').attr({
                            type: 'hidden',
                            name: 'timeout_warning_happened',
                            value: '1'
                        }).appendTo('form');

                        // DOES NOT SUBMIT FORM

                        // show final warning message
                        var warning_html = '<p>' + "{{ timeout_warning_message }}" + '</p>';
                        $('#otree-warning-timeout').html(warning_html);
                        $('#otree-warning-timeout').removeClass('alert-warning').addClass('alert-danger');
                    });
            {% endif %}

            {% if debug_fill_forms_randomly %}
                function fill_forms_randomly() {
                    console.log('filling forms randomly');

                    // select boxes
                    $('select').each(function() {
                        var sel = $(this);
                        var opt = sel.find('option');
                        var valid_opt = [];
                        $(opt).each(function (i) {
                            if ($(this).attr('value') !== '') {
                                valid_opt.push(i);
                            }
                        });

                        var r = randomChoice(valid_opt);

                        $(opt).prop('selected', false);
                        $(opt[r]).prop('selected', true);
                    });

                    // textarea boxes
                    $('textarea').each(function() {
                        var inp = $(this);
                        var minlength = inp.attr('minlength');
                        minlength = typeof minlength === 'undefined' || minlength === '' ? 0 : parseInt(minlength);
                        var maxlength = inp.attr('maxlength');
                        maxlength = typeof maxlength === 'undefined' || maxlength === '' ? 100 : parseInt(maxlength);

                        var r = randomString(randomInt(minlength, maxlength));

                        inp.val(r);
                    });


                    // text inputs
                    $('input[type=text]').each(function() {
                        var inp = $(this);
                        var minlength = inp.attr('minlength');
                        minlength = typeof minlength === 'undefined' || minlength === '' ? 0 : parseInt(minlength);
                        var maxlength = inp.attr('maxlength');
                        maxlength = typeof maxlength === 'undefined' || maxlength === '' ? 10 : parseInt(maxlength);

                        var r = randomString(randomInt(minlength, maxlength));

                        inp.val(r);
                    });

                    // numeric inputs
                    $('input[type=number]').each(function() {
                        var inp = $(this);
                        var min = inp.attr('min');
                        min = typeof min === 'undefined' || min === '' ? 0 : parseFloat(min);
                        var step = inp.attr('step');
                        step = typeof step === 'undefined' || step === '' ? 1 : parseFloat(step);
                        var max = inp.attr('max');
                        max = typeof max === 'undefined' || max === '' ? min + step : parseFloat(max);

                        var m = randomInt(0, (max - min) / step + 1);  // multiple of step
                        var r = min + m * step;

                        inp.val(r);
                    });

                    // radio inputs
                    var radios_per_name = {};
                    $('input[type=radio]').each(function() {
                        var inp = $(this);
                        var name = inp.attr('name');
                        if (Object.keys(radios_per_name).indexOf(name) < 0) {
                            radios_per_name[name] = [];
                        }

                        radios_per_name[name].push(inp);
                    });

                    Object.keys(radios_per_name).forEach(function (name) {
                        var radios = radios_per_name[name];
                        radios.forEach(function (inp) {
                            inp.prop('checked', false);
                        });

                        var r = randomChoice(radios);
                        r.prop('checked', true);
                    });

                    // range inputs (sliders)
                    $('input[type=range]').each(function() {
                        var inp = $(this);
                        var min = inp.attr('min');
                        min = typeof min === 'undefined' || min === '' ? 0 : parseFloat(min);
                        var step = inp.attr('step');
                        step = typeof step === 'undefined' || step === '' ? 1 : parseFloat(step);
                        var max = inp.attr('max');
                        max = typeof max === 'undefined' || max === '' ? min + step : parseFloat(max);

                        var m = randomInt(0, (max - min) / step + 1);  // multiple of step
                        var r = min + m * step;

                        inp.val(r).trigger('change');
                    });
                }

                window.setTimeout(fill_forms_randomly, 100);    // execute after small delay
            {% endif %}
        });
    </script>
{% endblock %}

{% block title %}
    {{ page_title }}
{% endblock %}