let isZoomed = null;
let thresholdForButtons = 1080;


if (window.sessionStorage.getItem('isZoom') == 'true') {
    document.body.style.zoom = "150%"
    document.querySelector("#menu").style.zoom = `${66.666666667}%`;

    const img = document.querySelector('#zoom>a>img')
    img.src = "/src/img/deactivate_bigletter.svg"
    
    // Respond to Zoom Icon
    if (window.innerWidth < thresholdForButtons/2){
        const zoom = document.querySelector("#zoom")
        const sound = document.querySelector("#sound")
        zoom.style.right = `${5}px`;
        zoom.style.top = `${15}px`;
        sound.style.top = `${85}px`;
        zoom.style.right = `${5}px`;
    } else {
        const zoom = document.querySelector("#zoom")
        const sound = document.querySelector("#sound")
        zoom.style.right ="";
        zoom.style.top = "";
        sound.style.top = "";
        zoom.style.right ="";
    }

    isZoomed = true;

} else {
    console.log("false")
    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 ="";
    zoom.style.top = "";
    sound.style.top = "";
    zoom.style.right ="";

    // Respond to Zoom Icon
    document.querySelector("#zoom>a>img").style.height = "60px";
    document.querySelector("#sound>a>img").style.height = "60px";

    if (window.innerWidth < thresholdForButtons/2){
        const zoom = document.querySelector("#zoom")
        const sound = document.querySelector("#sound")
        zoom.style.right = `${5}px`;
        zoom.style.top = `${15}px`;
        sound.style.top = `${85}px`;
        zoom.style.right = `${5}px`;

    } else {
        const zoom = document.querySelector("#zoom")
        const sound = document.querySelector("#sound")
        zoom.style.right = "";
        sound.style.top = "";
    }

    isZoomed = false;
}



onresizeAccessibility = () => {


    if (window.innerWidth < thresholdForButtons/2) {
        const zoom = document.querySelector("#zoom")
        const sound = document.querySelector("#sound")
        zoom.style.right = `${5}px`;
        zoom.style.top = `${15}px`;
        sound.style.top = `${80}px`;
        zoom.style.right = `${5}px`;
    } else {
        const zoom = document.querySelector("#zoom")
        const sound = document.querySelector("#sound")
        zoom.style.right ="";
        zoom.style.top = "";
        sound.style.top = "";
        zoom.style.right ="";
    }
}


function toggleZoom(){

    // const isDefault = (document.body.style.zoom == "100%");

    if (isZoomed){
        window.sessionStorage.setItem('isZoom', false);
    }else {
        window.sessionStorage.setItem('isZoom', true);
    }

    location.reload()
}


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