var mainIframe = document.getElementById("mainIframe");
var secondaryIframe = document.getElementById("secondaryIframe");
var introDoc = document.getElementById("introductoryScreen");
var siteHeading = document.getElementById("siteHeading");
var map = document.getElementById("map");
var introProgress = document.getElementById("introProgress");
var wifiSvg = document.getElementById("wifiSvg");
// var wifiLottie = document.getElementById("wifiLottie");
var mapLottie = document.getElementById("mapLottie");
var iconTutorialScreen = document.getElementById("iconTutorialScreen");
var audioPlayerOneShot = document.getElementById("audioPlayerOneShot");
var audioVoiceover = document.getElementById("audioVoiceover");
var lowerThirdDiv = document.getElementById("lowerThirdDiv");
var lowerThirdText = document.getElementById("lowerThirdText");
var posterGradient = document.getElementById("posterGradient");
var clickAndDrag = document.getElementById("clickAndDrag");
var clickAndMove = document.getElementById("clickAndMove");
var arrowKeys = document.getElementById("arrowKeys");
var sceneToLoad = "";
var currentScene = "";
var lastScene = "";
var userID = "djisd";

$(document).ready(function () {
    window.localStorage.setItem("networkSpeed", "Fast");
    mainIframe = document.getElementById("mainIframe");
    secondaryIframe = document.getElementById("secondaryIframe");
    introDoc = document.getElementById("introductoryScreen");
    siteHeading = document.getElementById("siteHeading");
    introProgress = document.getElementById("introProgress");
    audioVoiceover = document.getElementById("audioVoiceover");
    iconTutorialScreen = document.getElementById("iconTutorialScreen");
    wifiSvg = document.getElementById("wifiSvg");
    clickAndDrag = document.getElementById("clickAndDrag");
    clickAndMove = document.getElementById("clickAndMove");
    arrowKeys = document.getElementById("arrowKeys");
    // wifiLottie = document.getElementById("wifiLottie");
    mapLottie = document.getElementById("mapLottie");
    map = document.getElementById("map");
    lowerThirdDiv = document.getElementById("lowerThirdDiv");
    lowerThirdText = document.getElementById("lowerThirdText");
    posterGradient = document.getElementById("posterGradient");

    $("#mainScreenBtn").click(function () { beginExp(); });
    $("#crossMapBtn").click(function () { closeMap(); });
    $("#loginScreenBtn").click(function () { login(); });
    $("#enterSceneBtn").click(function () { enterScene(); });
    $("#iconTutorialScreenBtn").click(function () { iconTutorialScreen.classList.add("exitScreen"); playSoundOneShot("secondaryBtn.wav"); });
    // $("#wifiBtn").mouseover(function () { wifiLottie.play(); activateLowerThird("Network Speed: <b>" + window.localStorage.getItem("networkSpeed") + "</b>"); });
    // $("#wifiBtn").mouseout(function () { wifiLottie.stop(); disableLowerThird(); });
    $("#mapBtn").mouseover(function () {
        mapLottie.getLottie().playSegments([0, 31], true); mapLottie.loop = false;
        // activateLowerThird("Navigate using Map");
    });
    $("#mapBtn").mouseout(function () {
        mapLottie.getLottie().playSegments([31, 60], true);
        // disableLowerThird();
    });
    switchScene("reception");
});

function updateNetworkStatus() {
    wifiSvg.src = "/textures/icons/wifi-" + window.localStorage.getItem("networkSpeed") + ".svg";
}

function activateLowerThird(txt) {
    disableLowerThird();
    setTimeout(() => {
        lowerThirdText.innerHTML = txt;
        lowerThirdDiv.classList.add("activeLowerThird");
    }, 200);
}

function disableLowerThird() {
    if (lowerThirdDiv.classList.contains("activeLowerThird"))
        lowerThirdDiv.classList.remove("activeLowerThird");
}
// const player = document.getElementById("myBtn1");
// setInterval(function(){
//     player.getLottie().playSegments([0,20],true);
// }
// ,500);
// var anim=player.load("https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json");
// player.getLottie().loop=true;


// anim.playSegments([0,20],true);
// var loadingIntro = document.getElementById("loadingIntro");

// var anim = loadingIntro.loadAnimation({
// 	container: document.getElementById('loadingIntro'),
// 	path: 'https://assets8.lottiefiles.com/packages/lf20_kcTWGc.json',
// 	renderer: 'svg',
// 	loop: true,
// 	autoplay: true,
// });
// anim.play();

var sceneNames = {
    recep: "reception",
    court: "courtyard",
    gallery: "gallery",
    livingRoom: "livingRoom",
    doctorsRoom: "doctorsRoom",
    gameRoom: "gameRoom",
    kitchen: "kitchen",
    futureRoom: "futureRoom",
}

var loremipsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nunc enim, sit morbi a eget. Feugiat massa, arcu vel vestibulum egestas donec nunc. Varius libero quis in sed fusce ac non. Dui id urna pharetra, ipsum sapien, eget gravida. Est, commodo, enim scelerisque at nunc ultrices condimentum. ";
// particlesJS.load('transition', 'particlesjs-config (3).json', function() {
//     console.log('particles.js loaded - callback');
// });

particlesJS.load('particles-js', 'particlesjs-config.json', function () {
    console.log('particles.js loaded - callback');
});

function openMap() {
    map.classList.add("active");
    playSoundOneShot("mainBtn.wav");
}

function closeMap() {
    map.classList.remove("active");
    playSoundOneShot("secondaryBtn.wav");
}

var activeFrame = mainIframe, inactiveFrame = secondaryIframe;
var currentSceneNo = 0;
function switchScene(sceneName) {
    lastScene = currentScene;
    currentScene = sceneName;
    window.localStorage.setItem(sceneName + userID + "visited", "true");

    transition.classList.add("active");
    playSoundOneShot("intro.wav");

    setTimeout(function () {
        if (activeFrame == mainIframe) {
            activeFrame = secondaryIframe;
            inactiveFrame = mainIframe;
        } else {
            activeFrame = mainIframe;
            inactiveFrame = secondaryIframe;
        }

        inactiveFrame.style.display = "none";
        activeFrame.style.display = "block";
        // if (inactiveFrame.classList.contains("activeFrame"))
        //     inactiveFrame.classList.remove("activeFrame");
        // activeFrame.classList.add("activeFrame");
        // var temp = inactiveFrame.src.toString();
        // console.log(temp);
        // if (sceneToLoad == currentScene && lastScene !== "reception")
        //     changeToPredictedScene(sceneToLoad == "gallery" && lastScene != "courtyard" ? false : true, currentScene)
        // else
        loadTheNextScene(true, currentScene);

        if (currentScene == "reception") {
            sceneToLoad = "courtyard";
        } else if (currentScene == "courtyard") {
            sceneToLoad = "gallery";
        } else if (currentScene == "gallery") {
            // if (window.localStorage.getItem("livingRoom" + userID + "visited") != "true")
            //     sceneToLoad = "livingRoom";
            // else if (window.localStorage.getItem("doctorsRoom" + userID + "visited") != "true")
            //     sceneToLoad = "doctorsRoom";
            // else if (window.localStorage.getItem("gameRoom" + userID + "visited") != "true")
            //     sceneToLoad = "gameRoom";
            // else if (window.localStorage.getItem("kitchen" + userID + "visited") != "true")
            //     sceneToLoad = "kitchen";
            // else
            sceneToLoad = "";
        } else if (currentScene == "livingRoom" || currentScene == "doctorsRoom" || currentScene == "gameRoom" || currentScene == "kitchen") {
            sceneToLoad = "gallery";
        } else
            sceneToLoad = "";

        console.log(sceneToLoad);
        // activeFrame.src = "./" + sceneName + "/index.html";
        // intro(sceneName);
        // setTimeout(() => {
        //     transition.classList.remove("active");
        // }, 100);
        // }

    }, 500);
}

function loadTheNextScene(introActive, sceneName) {
    if (activeFrame.src != "./" + sceneName + "/index.html")
        activeFrame.src = "./" + sceneName + "/index.html";

    // console.log(activeFrame.src);
    if (introActive)
        intro(sceneName);
    else {
        if (introDoc.classList.contains("animateIntro"))
            introDoc.classList.remove("animateIntro");
        introDoc.classList.add("exitScreen");
    }
    if (activeFrame.style.display == "block") {
        if (typeof inactiveFrame.contentWindow.volumeSetKrdo !== "undefined")
            inactiveFrame.contentWindow.volumeSetKrdo(0);

        if (typeof activeFrame.contentWindow.volumeSetKrdo !== "undefined")
            activeFrame.contentWindow.volumeSetKrdo(soundState ? 1 : 0);
    }
    else {
        if (typeof activeFrame.contentWindow.volumeSetKrdo !== "undefined")
            activeFrame.contentWindow.volumeSetKrdo(0);
        if (typeof inactiveFrame.contentWindow.volumeSetKrdo !== "undefined")
            inactiveFrame.contentWindow.volumeSetKrdo(soundState ? 1 : 0);
    }
    // console.log(inactiveFrame.src);

    // if(inactiveFrame.src!="./gallery/index.html")
    inactiveFrame.src = "";
    // loadingPredictiveScene=false;

    setTimeout(() => {
        transition.classList.remove("active");
        setTimeout(() => {
            if (introProgress)
                introProgress.dataset.progress = 10;
        }, 200);
    }, 100);
}

function changeToPredictedScene(introActive, sceneName) {
    if (loadingPredictiveScene)
        loadingPredictiveScene = false;
    else {
        if (introProgress)
            introProgress.dataset.progress = 100;
        setTimeout(function () {
            introDoc.children[5].seek(0);
            introDoc.children[4].style.display = "none";
            introDoc.children[5].style.display = "block";
            introDoc.children[5].play();
            if (introProgress)
                introProgress.dataset.progress = 0;
        }, 1000);
    }
    if (introActive)
        intro(sceneName);
    else {
        introUpdate(sceneName);
        siteHeading.innerText = "Gallery";
        if (introDoc.classList.contains("animateIntro"))
            introDoc.classList.remove("animateIntro");
        introDoc.classList.add("exitScreen");
    }
    setTimeout(() => {
        transition.classList.remove("active");
    }, 100);
}

var loadingPredictiveScene = false;
function predictiveLoadScene(sceneName) {
    if (inactiveFrame.src != "./" + sceneName + "/index.html") {
        inactiveFrame.src = "./" + sceneName + "/index.html";
        loadingPredictiveScene = true;
    }
}

// function bgImgLoaded(){
//     transition.classList.remove("active");
// }

function loadingProgress(i) {
    if (loadingPredictiveScene)
        return;
    if (introProgress)
        introProgress.dataset.progress = parseInt(i * 100);
}

function loadingComplete() {
    updateNetworkStatus();
    if (loadingPredictiveScene) {
        loadingPredictiveScene = false;
    } else {
        if (introProgress)
            introProgress.dataset.progress = 100;

        if (currentSceneNo == 2) {
            if (window.localStorage.getItem("galleryOnce") == "true") {
                setTimeout(function () {
                    introDoc.children[4].style.display = "none";
                    introDoc.children[5].seek(0);
                    introDoc.children[5].style.display = "block";
                    introDoc.children[5].play();
                    if (introProgress)
                        introProgress.dataset.progress = 0;
                }, 2000);
            }else{  
                setTimeout(function () {
                introDoc.children[4].style.display = "none";
                introDoc.children[5].seek(0);
                
                if (introProgress)
                    introProgress.dataset.progress = 0;
                    enterScene();
                }, 1000);
            }
        } else {
            setTimeout(function () {
                introDoc.children[4].style.display = "none";
                introDoc.children[5].seek(0);
                introDoc.children[5].style.display = "block";
                introDoc.children[5].play();
                if (introProgress)
                    introProgress.dataset.progress = 0;
            }, 2000);
        }

    }
}

var reachoutTimer = null;
function intro(sceneName) {
    introDoc.children[4].style.display = "block";
    introDoc.children[5].style.display = "none";
    introDoc.children[3].innerHTML = loremipsum;

    for (var i = 0; i < 8; i++)
        introDoc.children[0].children[i].style.display = "none";

    if (sceneName != sceneNames.recep)
        tutorialThreeComplete();
    switch (sceneName) {
        default:
        case sceneNames.recep:
            currentSceneNo = 0;
            introDoc.children[2].innerHTML = "Welcome"//"Reception";
            introDoc.children[3].innerHTML = "You have entered our Immersive Experience Gallery!<br>Take a few minutes to explore the environment and our many offerings.";
            siteHeading.innerText = "Reception";
            loadAudioVoiceover("recep_avatar.mp3");

            // playAudioVoiceover("");
            break;
        case sceneNames.court:
            currentSceneNo = 1;
            introDoc.children[2].innerHTML = "Courtyard";
            introDoc.children[3].innerHTML = "Learn about immersive experiences and how they affect our senses to create memorable moments.";
            siteHeading.innerText = "Courtyard";
            loadAudioVoiceover("vog/Courtyard.mp3");
            // playAudioVoiceover("");
            break;
        case sceneNames.gallery:
            currentSceneNo = 2;
            if (window.localStorage.getItem("galleryOnce") == "true") {
                introDoc.children[2].innerHTML = "Gallery";
                introDoc.children[3].innerHTML = "Explore our immersive offering. Go through each product’s dedicated display rooms to learn more about it.";
            } else {
                introDoc.children[2].innerHTML = "";
                introDoc.children[3].innerHTML = "";
            }
            siteHeading.innerText = "Gallery";
            loadAudioVoiceover("vog/Gallery_End.mp3");
            // playAudioVoiceover("");
            break;
        case sceneNames.livingRoom:
            currentSceneNo = 3;
            introDoc.children[2].innerHTML = "VR Patient<br>Experience";
            introDoc.children[3].innerHTML = "Explore how we bring virtual reality into the lives of customers and patients to enhance their treatment and clinical experiences.";
            siteHeading.innerText = "VR Patient Experience";
            playAudioVoiceover("");
            break;
        case sceneNames.doctorsRoom:
            currentSceneNo = 4;
            introDoc.children[2].innerHTML = "Segmentation<br>Roll-out Workshop";
            introDoc.children[3].innerHTML = "Discover an immersive way to socialize segmentation results and see how your teams could explore customers in a new light. ";
            siteHeading.innerText = "Segmentation Roll-out Workshop";
            playAudioVoiceover("");
            break;
        case sceneNames.gameRoom:
            currentSceneNo = 5;
            introDoc.children[2].innerHTML = "Multichannel<br>Strategy Game";
            introDoc.children[3].innerHTML = "Walk into a game room, and explore a team game designed to bring customer centric thinking to life and build confidence in multichannel strategy. (Can be played virtually or as a physical boardgame)";
            siteHeading.innerText = "Multichannel Strategy Game";
            playAudioVoiceover("");
            break;
        case sceneNames.kitchen:
            currentSceneNo = 6;
            introDoc.children[2].innerHTML = "Sales Force<br>Game Experience";
            introDoc.children[3].innerHTML = "Explore how this virtual simulation game supports the adoption of a new sales tool and builds habits through practice around the new ways of working.";
            siteHeading.innerText = "Sales Force Game Experience";
            playAudioVoiceover("");
            break;
        case sceneNames.futureRoom:
            currentSceneNo = 7;
            introDoc.children[2].innerHTML = "What's next?";
            introDoc.children[3].innerHTML = "Get a glimpse of what we are currently exploring. And do get in touch if you’re interested to discuss opportunities.";
            siteHeading.innerText = "What's next?";
            playAudioVoiceover("");
            break;

    }
    introDoc.children[0].children[currentSceneNo].style.display = "block";
    mapSegmentSelected(currentSceneNo);

    introDoc.classList.add("animateIntro");

    introDoc.classList.remove("exitScreen");

}

function introUpdate(sceneName) {
    // introDoc.children[4].style.display = "block";
    // introDoc.children[5].style.display = "none";
    // introDoc.children[3].innerHTML = loremipsum;

    // for (var i = 0; i < 8; i++)
    //     introDoc.children[0].children[i].style.display = "none";
    switch (sceneName) {
        default:
        case sceneNames.recep:
            currentSceneNo = 0;
            introDoc.children[2].innerHTML = "Reception";
            introDoc.children[3].innerHTML = "Welcome to our immersive experience gallery! Take a few minutes to explore the environment and our many offerings.";
            siteHeading.innerText = "Reception";
            playAudioVoiceover("");
            // playAudioVoiceover("");
            break;
        case sceneNames.court:
            currentSceneNo = 1;
            introDoc.children[2].innerHTML = "Courtyard";
            introDoc.children[3].innerHTML = "Learn about immersive experiences and how they affect our senses to create memorable moments.";
            siteHeading.innerText = "Courtyard";
            playAudioVoiceover("");
            // playAudioVoiceover("");
            break;
        case sceneNames.gallery:
            currentSceneNo = 2;
            introDoc.children[2].innerHTML = "Gallery";
            introDoc.children[3].innerHTML = "Explore our immersive offering. Go through each product’s dedicated display rooms to learn more about it.";
            siteHeading.innerText = "Gallery";
            playAudioVoiceover("");
            // playAudioVoiceover("");
            break;
        case sceneNames.livingRoom:
            currentSceneNo = 3;
            introDoc.children[2].innerHTML = "VR Patient<br>Experience";
            introDoc.children[3].innerHTML = "Explore how we bring virtual reality into the lives of customers and patients to enhance their treatment and clinical experiences.";
            siteHeading.innerText = "VR Patient Experience";
            playAudioVoiceover("");
            break;
        case sceneNames.doctorsRoom:
            currentSceneNo = 4;
            introDoc.children[2].innerHTML = "Segmentation<br>Roll-out Workshop";
            introDoc.children[3].innerHTML = "Socialize segmentation results effectively across teams and get to know your customers in a new light.";
            siteHeading.innerText = "Segmentation Roll-out Workshop";
            playAudioVoiceover("");
            break;
        case sceneNames.gameRoom:
            currentSceneNo = 5;
            introDoc.children[2].innerHTML = "Multichannel<br>Strategy Game";
            introDoc.children[3].innerHTML = "Generate curiosity, resilience and confidence in multichannel stratetgy through a strategic mind-shift game played strategy game played virtually or as a boardgame.";
            siteHeading.innerText = "Multichannel Strategy Game";
            playAudioVoiceover("");
            break;
        case sceneNames.kitchen:
            currentSceneNo = 6;
            introDoc.children[2].innerHTML = "Sales Force<br>Game Experience";
            introDoc.children[3].innerHTML = "Simulate real world usage of new sales tools through a virtual game to build the required ways of working needed for successful adoption.";
            siteHeading.innerText = "Sales Force Game Experience";
            playAudioVoiceover("");
            break;
        case sceneNames.futureRoom:
            currentSceneNo = 7;
            introDoc.children[2].innerHTML = "What's next?";
            introDoc.children[3].innerHTML = "Get a glimpse of what we are currently exploring and see if you’re interested in getting in touch with our team to discuss future opportunities.";
            siteHeading.innerText = "What's next?";
            playAudioVoiceover("");
            break;
    }
    mapSegmentSelected(currentSceneNo);
    // introDoc.children[0].children[currentSceneNo].style.display = "block";
    // introDoc.classList.add("animateIntro");
    // introDoc.classList.remove("exitScreen");
}

function enterScene() {
    if (introDoc.classList.contains("animateIntro"))
        introDoc.classList.remove("animateIntro");
    introDoc.classList.add("exitScreen");
    playSoundOneShot("mainBtn.wav");

    if (currentScene == "reception" && window.localStorage.getItem("tutorialOnce") == "true") {
        window.localStorage.setItem("tutorialOnce", "false");
        setTimeout(function () {
            iconTutorialScreen.classList.add("animateTutorial");
            iconTutorialScreen.classList.remove("exitScreen");
        }, 500);
    }

    if (reachoutTimer !== null)
        clearTimeout(reachoutTimer);

    sideDeactivateNotification();
    reachoutTimer = setTimeout(function () {
        if (currentScene == sceneNames.court)
            sideNotificationPop("To find out more about multisensory experiences, reach out at <a href='mailto:immersivedesign@zs.com?subject=Hey..'>immersivedesign@zs.com</a>");
        else if (currentScene == sceneNames.livingRoom)
            sideNotificationPop("Reach out at <a href='mailto:immersivedesign@zs.com?subject=Hey..'>immersivedesign@zs.com</a> if you want to hear more about virtual reality applications in our industry.");
        else if (currentScene == sceneNames.doctorsRoom)
            sideNotificationPop("For more about how we are innovating segmentations, reach out at <a href='mailto:immersivedesign@zs.com?subject=Hey..'>immersivedesign@zs.com</a>.​");
        else if (currentScene == sceneNames.doctorsRoom)
            sideNotificationPop("To hear more about immersive games, reach out at <a href='mailto:immersivedesign@zs.com?subject=Hey..'>immersivedesign@zs.com</a>.​​");
        else if (currentScene == sceneNames.kitchen)
            sideNotificationPop("Reach out at <a href='mailto:immersivedesign@zs.com?subject=Hey..'>immersivedesign@zs.com</a> to hear more about how immersive gamified trainings can help your teams and organization.");
        // else if (currentScene)
        //     sideNotificationPop("If you’d like to know more about other interesting topics relevant to your work which our team could help with, please reach out to <br><br>✉ Irina Groysman <a href='mailto:Irina.Groysman@zs.com?subject=Hey..'>Irina.Groysman@zs.com</a> <br>✉ Simon Stirrup <a href='mailto:Simon.Stirrup@zs.com?subject=Hey..'>Simon.Stirrup@zs.com</a> <br>✉ Dani Spuhler <a href='mailto:Dani.Spuhler@zs.com?subject=Hey..'>Dani.Spuhler@zs.com</a>")
    }, 120000);

    if (activeFrame.style.display == "block") {
        if (typeof inactiveFrame.contentWindow.volumeSetKrdo !== "undefined")
            inactiveFrame.contentWindow.volumeSetKrdo(0);

        if (typeof activeFrame.contentWindow.volumeSetKrdo !== "undefined")
            activeFrame.contentWindow.volumeSetKrdo(soundState ? 1 : 0);
    }
    else {
        if (typeof activeFrame.contentWindow.volumeSetKrdo !== "undefined")
            activeFrame.contentWindow.volumeSetKrdo(0);
        if (typeof inactiveFrame.contentWindow.volumeSetKrdo !== "undefined")
            inactiveFrame.contentWindow.volumeSetKrdo(soundState ? 1 : 0);
    }
    if (currentScene == "courtyard") {//&&window.localStorage.getItem("courtyardOnce")=="true"){
        //window.localStorage.setItem("courtyardOnce","false");
        playAudioVoiceover("vog/Courtyard.mp3");
    }
    else if (currentScene == "gallery") {
        // if(window.localStorage.getItem("galleryOnce")=="true"){
        // window.localStorage.setItem("galleryOnce","false");
        playAudioVoiceover("vog/Gallery_Beginning.mp3");
        // }
    }

    activeFrame.focus();
    // if (sceneToLoad != "" && lastScene != sceneToLoad)
    //     predictiveLoadScene(sceneToLoad);
}

//   function enterCourt() {
//     var Court = document.getElementById("introCourtyard");
//     Court.classList.add("exitScreen");
//   }
//   function enterRecep() {
//     var recep = document.getElementById("introReception");
//     recep.classList.add("exitScreen");
//   }
//   function introCourt() {
//     var Court = document.getElementById("introCourtyard");
//     Court.classList.remove("exitScreen");
//   }
//   function introRecep() {
//     var recep = document.getElementById("introReception");
//     recep.classList.remove("exitScreen");
//   }
var lastSegmentSelected = 0;
function mapEnterScene() {
    if (lastSegmentSelected != currentSceneNo) {
        switch (lastSegmentSelected) {
            case "0":
                switchScene("reception");
                break;
            case "1":
                switchScene("courtyard");
                break;
            case "2":
                switchScene("gallery");
                break;
            case "3":
                switchScene("livingRoom");
                break;
            case "4":
                switchScene("doctorsRoom");
                break;
            case "5":
                switchScene("gameRoom");
                break;
            case "6":
                switchScene("kitchen");
                break;
            case "7":
                switchScene("futureRoom");
                break;
        }
        closeMap();
    }
}

function mapSegmentSelected(z) {
    var mapMenu = document.getElementById("mapMenu");
    var mapSegments = document.getElementById("mapSegments");
    // var enterMenuText = document.getElementById("enterMenuText");
    var enterSubMapMenu = document.getElementById("enterSubMapMenu");

    if (lastSegmentSelected != null) {
        mapMenu.children[lastSegmentSelected].classList.remove("activeSubMenu");
        mapSegments.children[lastSegmentSelected].classList.remove("activateOpacity");
    }
    // console.log(currentSceneNo, z, currentSceneNo == z);
    if (currentSceneNo == z) {
        // enterMenuText.innerHTML = "You are here";
        enterSubMapMenu.classList.add("inactive");
    }
    else {
        enterSubMapMenu.classList.remove("inactive");
        // switch (z) {
        //     case "0":
        //         enterMenuText.innerHTML = "Enter<br>" + "Reception";
        //         break;
        //     case "1":
        //         enterMenuText.innerHTML = "Enter<br>" + "Courtyard";
        //         break;
        //     case "2":
        //         enterMenuText.innerHTML = "Enter<br>" + "Gallery";
        //         break;
        //     case "3":
        //         enterMenuText.innerHTML = "Enter<br>" + "The Vita";
        //         break;
        //     case "4":
        //         enterMenuText.innerHTML = "Enter<br>" + "Segmentation Roll-out Workshop";
        //         break;
        //     case "5":
        //         enterMenuText.innerHTML = "Enter<br>" + "Multichannel Strategy Gamified Training";
        //         break;
        //     case "6":
        //         enterMenuText.innerHTML = "Enter<br>" + "Gamified Sales Force Upskilling Experience";
        //         break;
        //     case "7":
        //         enterMenuText.innerHTML = "Enter<br>" + "The Future Room";
        //         break;
        // }
    }
    mapSegments.children[z].classList.add("activateOpacity");
    mapMenu.children[z].classList.add("activeSubMenu");
    lastSegmentSelected = z;
}

// Wrap the original window.alert function...
const windowAlert = window.alert;

window.alert = function (message) {
    console.log(`window.alert called with message: ${message}`);
    return windowAlert(message);
};
// Console Output:
// window.alert called with message: FOO
// ========================================================


// Wrap the original window.prompt function...
const windowPrompt = window.prompt;

window.prompt = function (message) {
    console.log(`window.prompt called with message: ${message}`);

    const input = windowPrompt(message);
    console.log(`user entered: ${input}`);

    return input;
};
// Console Output:
// window.prompt called with message: BAR
// user entered: xxx
// ========================================================


// Wrap the original window.confirm function...
const windowConfirm = window.confirm;

window.confirm = function (message) {
    console.log(`window.confirm called with message: ${message}`);

    const choice = windowConfirm(message) ? 'ok' : 'cancel';
    console.log(`user clicked: ${choice}`);

    return choice;
};
// Console Output:
// window.confirm called with message: BAZ
// user clicked: ok (or 'cancel' if you click 'cancel')

// window.localStorage.setItem("tutorialOnce","true");
window.localStorage.setItem("posterTutorialOnce", "true");
window.localStorage.setItem("courtyardOnce", "true");
window.localStorage.setItem("galleryOnce", "true");
window.localStorage.setItem("galleryEndOnce", "true");
function login() {
    var loginS = document.getElementById("loginScreen");
    loginS.classList.add("exitScreen400");
    window.localStorage.setItem("tutorialOnce", "true");
    window.localStorage.setItem("posterTutorialOnce", "true");
    window.localStorage.setItem("courtyardOnce", "true");
    window.localStorage.setItem("galleryOnce", "true");
    window.localStorage.setItem("galleryEndOnce", "true");
    switchScene("reception");
    // if(prompt('Enter Access Code')=='DJIS'){
    //     loginS.classList.add("exitScreen400");
    //     switchScene("reception");
    // }
    // else
    //     alert('Incorrect Access Code');
}

function tutorialStart() {
    if (clickAndDrag.classList.contains("exitScreen"));
    clickAndDrag.classList.remove("exitScreen");
}

function tutorialOneComplete() {
    if (!clickAndDrag.classList.contains("exitScreen"));
    clickAndDrag.classList.add("exitScreen");
    setTimeout(() => {
        if (clickAndMove.classList.contains("exitScreen"));
        clickAndMove.classList.remove("exitScreen");
    }, 1000);
}

function tutorialTwoComplete() {
    if (!clickAndDrag.classList.contains("exitScreen"));
    clickAndDrag.classList.add("exitScreen");
    if (!clickAndMove.classList.contains("exitScreen"));
    clickAndMove.classList.add("exitScreen");
    setTimeout(() => {
        if (arrowKeys.classList.contains("exitScreen"));
        arrowKeys.classList.remove("exitScreen");
    }, 1000);
}

function tutorialThreeComplete() {
    if (!clickAndDrag.classList.contains("exitScreen"));
    clickAndDrag.classList.add("exitScreen");
    if (!clickAndMove.classList.contains("exitScreen"));
    clickAndMove.classList.add("exitScreen");
    if (!arrowKeys.classList.contains("exitScreen"));
    arrowKeys.classList.add("exitScreen");
}

function beginExp() {
    var main = document.getElementById("mainScreen");
    main.classList.add("exitScreen400");
}

function openIframe(iName, iUrl, iType) {
    if (soundState)
        mutePage();
    switch (iType) {
        case 'pdf':
            modal.setContent(' <span class="font" onclick="modal.close()" style="font-size: 1.2rem;cursor:pointer;width: 100%;text-align: end;padding: 0.5rem;"><b style="font-weight: bold">X</b> Close</span><div id="adobe-dc-view" style="height: 85vh; width: 70vw;border-radius: 0.5rem;"></div>');
            var adobeDCView = new AdobeDC.View({ clientId: "532e36a4f32c489885a8e27f117befda", divId: "adobe-dc-view" });
            adobeDCView.previewFile({
                content: { location: { url: iUrl } },
                metaData: { fileName: iName + ".pdf" }
            }, { embedMode: "SIZED_CONTAINER" });
            break;
        default:
        case 'ppt':
            modal.setContent('<span class="font" onclick="modal.close()" style="font-size: 1.2rem;cursor:pointer;width: 100%;text-align: end;padding: 0.5rem;"><b style="font-weight: bold">X</b> Close</span><iframe src="' + iUrl + '" style="width:70vw; height:85vh;border-radius: 0.5rem;" frameborder="0"></iframe>');
            break;
        case 'video':
            modal.setContent('<span class="font" onclick="modal.close()" style="font-size: 1.2rem;cursor:pointer;width: 100%;text-align: end;padding: 0.5rem;"><b style="font-weight: bold">X</b> Close</span><div style="width:70vw; height:80vh;box-shadow: 0rem 0rem 2rem #000000a6;"> <iframe style="border-radius: 0.5rem;background-color:black;" src="' + iUrl + '" title="Video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>');
            break;
        case 'url':
            modal.setContent('<span class="font" onclick="modal.close()" style="font-size: 1.2rem;cursor:pointer;width: 100%;text-align: end;padding: 0.5rem;"><b style="font-weight: bold">X</b> Close</span><div style="width:70vw; height:80vh;box-shadow: 0rem 0rem 2rem #000000a6;"> <iframe style="border-radius: 0.5rem;" src="' + iUrl + '" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;"></iframe></div>');
            break;
    }
    modal.open();
};

var modal = new tingle.modal({
    // footer: true,
    stickyFooter: false,
    closeMethods: ['overlay', 'button', 'escape'],
    closeLabel: "Close",
    cssClass: ['custom-class-1', 'custom-class-2'],
    onOpen: function () {
        console.log('modal open');
    },
    onClose: function () {
        console.log('modal closed');
        modal.setContent('');
        if (soundState)
            unmutePage();
        playSoundOneShot("secondaryBtn.wav");
    },
    beforeClose: function () {
        // here's goes some logic
        // e.g. save content before closing the modal
        return true; // close the modal
        return false; // nothing happens
    }
});

// set content
// modal.setContent(' <h1>asdasdasd</h1>');

// add a button
// modal.addFooterBtn('Button label', 'tingle-btn tingle-btn--primary', function () {
//   // here goes some logic
//   modal.close();
// });

// // add another button
// modal.addFooterBtn('Dangerous action !', 'tingle-btn tingle-btn--danger', function () {
//   // here goes some logic
//   modal.close();
// });

function playSoundOneShot(name) {
    if (isPlaying(audioPlayerOneShot) || audioPlayerOneShot.src == "undefined") {
        audioPlayerOneShotOverlap.src = "/sound/" + name;
        audioPlayerOneShotOverlap.play();
    } else {
        audioPlayerOneShot.src = "/sound/" + name;
        audioPlayerOneShot.play();
    }
}

function loadAudioVoiceover(name) {
    audioVoiceover.src = "/sound/" + name;
}
function playAudioVoiceover(name) {
    if (name == "vog/Courtyard.mp3") {
        if (window.localStorage.getItem("courtyardOnce") == "true")
            window.localStorage.setItem("courtyardOnce", "false");
        else return;
    }
    else if (name == "vog/Gallery_Beginning.mp3") {
        if (window.localStorage.getItem("galleryOnce") == "true")
            window.localStorage.setItem("galleryOnce", "false");
        else return;
    }
    else if (name == "vog/Gallery_End.mp3") {
        if (window.localStorage.getItem("galleryEndOnce") == "true")
            window.localStorage.setItem("galleryEndOnce", "false");
        else return;
    }

    audioVoiceover.src = "/sound/" + name;
    audioVoiceover.play();
}

function stopAudioVoiceover() {
    audioVoiceover.pause();
    audioVoiceover.currentTime = 0;
}

function enablePosterGradient() {
    if (window.localStorage.getItem("posterTutorialOnce") == "false")
        return;
    tutorialThreeComplete();
    disablePosterGradient();
    setTimeout(function () {

        window.localStorage.setItem("posterTutorialOnce", "false");
        posterGradient.classList.add("activePosterGradient");
        setTimeout(function () {
            disablePosterGradient();
        }, 3000);
        setTimeout(function () {
            window.localStorage.setItem("posterTutorialOnce", "true");
        }, 30000);
    }, 1000);

}

function disablePosterGradient() {
    if (posterGradient.classList.contains("activePosterGradient"))
        posterGradient.classList.remove("activePosterGradient");
}
function isPlaying(audelem) { return !audelem.paused; }



// document.addEventListener("keydown", function(e) {

//     console.log(e);
//     e = e || window.event;
//     if (e.keyCode == '38'||e.keyCode == '40'||e.keyCode == '37'||e.keyCode == '39'||e.keyCode == '87'||e.keyCode == '83'||e.keyCode == '65'||e.keyCode == '68') {
//         console.log(e.keyCode);
//         disablePosterGradient();
//     }
//   });