$(function () {
    var buttonNext = $('.otree-btn-next');
    var buttonDice = $('#roll-button');
    var diceNum = $('input[name=dice_number]');

    buttonNext.prop('disabled', true);
    diceNum.prop('disabled', true);

    function rollDice() {
        buttonDice.prop('disabled', true);
        const dice = document.querySelectorAll(".die-list");
        for (var i = 0; i < dice.length; i++) {
            toggleClasses(dice[i]);
            dice[i].dataset.roll = getRandomNumber(1, 6);
        }

        buttonNext.prop('disabled', false);
        diceNum.prop('disabled', false);
    }

    function toggleClasses(dice) {
        dice.classList.toggle("odd-roll");
        dice.classList.toggle("even-roll");
    }

    function getRandomNumber(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    let diceIE = 1;
    let rolling = false;

    setDice(1);

    function throwDice() {
        if (rolling) return;
        rolling = true;

        let interval = setInterval(function () {
            if (rolling) setDice(getRandomNumber(1, 6));
        }, 100);

        setTimeout(function() {
            rolling = false;
            clearInterval(interval);
        }, 2000 + getRandomNumber(0, 10)*250);
    }

    function setDice(d) {
      diceIE = d;
      let s = d ? '&#' + (9855 + d) + ';' : '';
      $('#dice-ie').html(s);
    }

    buttonDice.on("click", function () {rollDice(); throwDice()});
});