const root = document.documentElement;
const dialogElement = document.getElementById('dialog');
const detailsElement = document.getElementById('details');
const dialogContentElement = document.getElementById('dialog-content');
const errorSoundElement = document.getElementById('error');
const clickSoundElement = document.getElementById('click');

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

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

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

function details_button() {
    clickSoundElement.play();
    dialogContentElement.style.opacity = '0';

    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
    })
}