let isZoomed = false;
let thresholdForButtons = 1080;

window.onresize = () => {
    if (window.innerWidth < thresholdForButtons && isZoomed) {
        const zoom = document.querySelector("#zoom")
        const sound = document.querySelector("#sound")
        zoom.style.right = "5px";
        sound.style.top = "85px";
    } else {
        const zoom = document.querySelector("#zoom")
        const sound = document.querySelector("#sound")
        zoom.style.right = "";
        sound.style.top = "";
    }
}

function toggleZoom(){
    const isDefault = (document.body.style.zoom == "100%");

    if (isDefault){
        document.body.style.zoom = "150%"

        // Toggle image
        const img = document.querySelector('#zoom>a>img')
        img.src = "/src/img/deactivate_bigletter.svg"


        // Respond to Zoom Icon
        if (window.innerWidth < thresholdForButtons){
            const zoom = document.querySelector("#zoom")
            const sound = document.querySelector("#sound")
            zoom.style.right = "5px";
            sound.style.top = "85px";
        }

        isZoomed = true;

    }else {
        document.body.style.zoom = "100%"

        // Toggle image
        const img = document.querySelector('#zoom>a>img')
        img.src = "/src/img/activate_bigletter.svg"

        // Respond to Zoom Icon
        const zoom = document.querySelector("#zoom")
        const sound = document.querySelector("#sound")
        zoom.style.right = "";
        sound.style.top = "";

        isZoomed = true;
    }
}


const sound_src = (() => {
    const pathname = window.location.pathname;
    if (pathname.indexOf('about') != -1){
        return new Audio('/src/sound/test_sound.mp3');
    } else if (pathname.indexOf('particiapnts') != -1){
        return new Audio('/src/sound/test_sound.mp3');
    }
    return new Audio('/src/sound/test_sound.mp3');
})();


function toggleSound(){
    // This function should be executed by a user interaction to work properly

    if (sound_src.paused == true) {
        // Play sound
        sound_src.play()
        console.log("good");

        // Toggle Image
        const img = document.querySelector('#sound>a>img')
        img.src = "/src/img/sound_off.svg"
        img.style.height = "64px"

    } else {
        // Stop sound
        sound_src.pause();
        sound_src.currentTime = 0;
        console.log("sound", sound_src);

        // Toggle Image
        const img = document.querySelector('#sound>a>img')
        img.src = "/src/img/sound_on.svg"
        img.style.height = "60px"
    }
}