let currentImage = 1, prevImage = 0;
let bgObj;

// Certified MDN Classic
function getRandomInt(max) 
{
    return Math.floor(Math.random() * max);
}

async function GameDetails( servername, serverurl, mapname, maxplayers, steamid, gamemode, volume, language ) 
{
    const config = await (await fetch("/config.json")).json(); 
    const audioplayer = document.getElementById("audioplayer");

    let imgArray = [];

    for (let i = 0; i < config.map[mapname].images.length; i++)
    {
        imgArray[i] = new Image();
        imgArray[i].src = config.map[mapname].images[i];

        let obj = document.createElement("img");
        obj.classList.add("bgImage");
        obj.src = imgArray[i].src;
        document.getElementsByClassName("backgroundImages")[0].appendChild(obj);
    }

    bgObj = document.getElementsByClassName("bgImage");

    document.getElementsByClassName("mapName")[0].innerHTML = "<h1>" + mapname.toUpperCase() + "</h1>";
    document.getElementsByClassName("gamemodeName")[0].textContent = gamemode;

    let autoCycleImages = setInterval(() => {

        if (bgObj[prevImage].classList.contains("blendInAnimation"))
        {
            bgObj[prevImage].classList.remove("blendInAnimation");
        }

        bgObj[prevImage].classList.add("blendOutAnimation");

        if (bgObj[currentImage].classList.contains("blendOutAnimation"))
        {
            bgObj[currentImage].classList.remove("blendOutAnimation");
        }

        bgObj[currentImage].classList.add("blendInAnimation"); 

        prevImage = currentImage;
        currentImage++;

        if (currentImage >= imgArray.length)
            currentImage = 0;
    }, 5000)

    audioplayer.volume = 0;
    let autoAdjustVolume = setInterval(() => { if (audioplayer.volume > 0.9) { clearInterval(autoAdjustVolume); return; } audioplayer.volume += 0.01}, 40);
    audioplayer.src = config.map[mapname].music[getRandomInt(config.map[mapname].music.length)];
    audioplayer.play();

    document.getElementsByClassName("loadingEntry")[0].classList.add("blendInAnimation");
}