window.onload = function() {
    setTimeout(function () {
        play("error");
    }, 1000)
}

const getStyleProperty = (s, p) => getComputedStyle(s).getPropertyValue(p);

function play(audioId) {
    let audioElement = document.getElementById(audioId);
    audioElement.play();
}

function close_button(href) {
    play("click");
    window.location.href = href;
}

function details_button() {
    play("click");
    document.getElementById('dialog-content').style.opacity = '0';

    let root = document.documentElement;
    let dialogElement = document.getElementById('dialog');
    let detailsElement = document.getElementById('details');

    dialogElement.animate([
        {
            opacity: 0,
            width: getStyleProperty(root, '--keyframe-hide-dialog-width'),
            paddingBottom: getStyleProperty(root, '--keyframe-hide-dialog-padding-bottom'),
        }
    ], {
        fill: 'forwards',
        easing: 'ease-out',
        duration: 250
    });

    setTimeout(function(){
        dialogElement.style.display = 'none';
        detailsElement.style.display = 'inline-block';
    }, 250);

    detailsElement.animate([
        {
            opacity: 0, offset: 0.95
        },
        {
            opacity: 1
        }
    ], {
        fill: 'forwards',
        easing: 'ease-out',
        duration: 1000
    })
}