var mainIframe = document.getElementById("mainIframe");
var introDoc = document.getElementById("introductoryScreen");
var siteHeading = document.getElementById("siteHeading");
var map = document.getElementById("map");

$(document).ready(function () {
    mainIframe = document.getElementById("mainIframe");
    introDoc = document.getElementById("introductoryScreen");
    siteHeading = document.getElementById("siteHeading");
    map = document.getElementById("map");
    document.getElementById("progress-barX").classList.add("full-barX");
    $("#mainScreenBtn").click(function () { beginExp(); });
    $("#crossMapBtn").click(function () { closeMap(); });
    $("#loginScreenBtn").click(function () { login(); });
    $("#enterSceneBtn").click(function () { enterScene(); });
});
// 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 = {
    warehouse: "warehouse",
    court: "courtyard",
    gallery: "gallery",
    livingRoom: "livingRoom",
    doctorsRoom: "doctorsRoom",
    gameRoom: "gameRoom",
    kitchen: "kitchen",
    futureRoom: "futureRoom",
}

var loremipsum = "Engage audience in a secure 3D environment and track customer data of products explored. All in 3D with interactive product showcases and many more!";//"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");
}

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

var currentSceneNo = 0;
function switchScene(sceneName) {
    transition.classList.add("active");
    setTimeout(function () {
        mainIframe.src = "./" + sceneName + "/index.html";
        intro(sceneName);
        setTimeout(() => {
            transition.classList.remove("active");
        }, 100);
    }, 500);
}

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

function loadingComplete() {
    setTimeout(function () {
        introDoc.children[4].style.display = "none";
        introDoc.children[6].seek(0);
        introDoc.children[5].style.display = "none";
        introDoc.children[6].style.display = "block";
        introDoc.children[6].play();
    }, 1500);
}

function intro(sceneName) {
    introDoc.children[5].style.display = "block";
    introDoc.children[6].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.warehouse:
            currentSceneNo = 0;
            introDoc.children[2].innerHTML = "Welcome to<br>XSET Warehouse";
            siteHeading.innerText = "Warehouse";
            break;
        case sceneNames.court:
            currentSceneNo = 1;
            introDoc.children[2].innerHTML = "The ILEX<br>Courtyard";
            siteHeading.innerText = "The Courtyard";
            break;
        case sceneNames.gallery:
            currentSceneNo = 2;
            introDoc.children[2].innerHTML = "The ILEX<br>Gallery";
            siteHeading.innerText = "The Gallery";
            break;
        case sceneNames.livingRoom:
            currentSceneNo = 3;
            introDoc.children[2].innerHTML = "The ILEX<br>VITA";
            siteHeading.innerText = "The VITA";
            break;
        case sceneNames.doctorsRoom:
            currentSceneNo = 4;
            introDoc.children[2].innerHTML = "The ILEX<br>Segmentation 360";
            siteHeading.innerText = "Segmentation 360";
            break;
        case sceneNames.gameRoom:
            currentSceneNo = 5;
            introDoc.children[2].innerHTML = "The ILEX<br>Orchestrator Room";
            siteHeading.innerText = "The Orchestrator";
            break;
        case sceneNames.kitchen:
            currentSceneNo = 6;
            introDoc.children[2].innerHTML = "The ILEX<br>Verso Field Suggestion";
            siteHeading.innerText = "The Verso Field Suggestion";
            break;
        case sceneNames.futureRoom:
            currentSceneNo = 7;
            introDoc.children[2].innerHTML = "The ILEX<br>Future Room";
            siteHeading.innerText = "The Future Room";
            break;

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

function enterScene() {
    introDoc.classList.add("exitScreen");
}

//   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("warehouse");
                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>" + "The Warehouse";
                break;
            case "1":
                enterMenuText.innerHTML = "Enter<br>" + "The Courtyard";
                break;
            case "2":
                enterMenuText.innerHTML = "Enter<br>" + "The Gallery Hall";
                break;
            case "3":
                enterMenuText.innerHTML = "Enter<br>" + "The Vita";
                break;
            case "4":
                enterMenuText.innerHTML = "Enter<br>" + "Segmentation 360";
                break;
            case "5":
                enterMenuText.innerHTML = "Enter<br>" + "Orchestrator Room";
                break;
            case "6":
                enterMenuText.innerHTML = "Enter<br>" + "Verso Field Suggestion";
                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')
switchScene("warehouse");
function login() {
    var loginS = document.getElementById("loginScreen");
    // loginS.classList.add("exitScreen400");
    // switchScene("warehouse");
    if (prompt('Enter Access Code') == 'DJISD') {
        loginS.classList.add("exitScreen400");
        switchScene("warehouse");
    }
    else
        alert('Incorrect Access Code');
}
function beginExp() {
    var main = document.getElementById("mainScreen");
    main.classList.add("exitScreen400");
}
function openIframe(iName, iUrl, iType) {
    switch (iType) {
        case 'pdf':
            modal.setContent(' <div id="adobe-dc-view" style="height: 60vh; width: 70vw;border-radius: 0.5rem;"></div>');
            var adobeDCView = new AdobeDC.View({ clientId: "5d920e0313e547d3956cf23541f8d132", divId: "adobe-dc-view" });
            adobeDCView.previewFile({
                content: { location: { url: iUrl } },
                metaData: { fileName: iName + ".pdf" }
            }, { embedMode: "SIZED_CONTAINER" });
            break;
        default:
        case 'ppt':
            modal.setContent('<iframe src="' + iUrl + '" style="width:70vw; height:60vh;border-radius: 0.5rem;" frameborder="0"></iframe>');
            break;
        case 'video':
            modal.setContent('<div style="width:70vw; height:60vh;"> <iframe style="border-radius: 0.5rem;" src="' + iUrl + '" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></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');
    },
    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();
  // });