website/assets/js/main.js

const backgrounds = ["ubg.png", "vbg.png", "limbg.png", "lbg.png", "cbg.png"];
const colors = ["#676667", 'rgb(227, 154, 228)', '#C9A333', 'rgb(236, 36, 36)', '#990066'];
var backgroundVideo;
var backgroundVideoToggle;
var randomBackgroundToggle
window.onload = function () {
    //Hide divs
    try {
        hideDropdowns();
    } catch (exception) {
        console.log("something was supposed to happen, but it didnt.");
    }

    //set theme
    //setTheme(localStorage.getItem("theme"));


    backgroundVideoToggle = document.getElementById("enableVideoBackground");
    randomBackgroundToggle = document.getElementById("backgroundVideoToggle");
    backgroundVideo = document.getElementById("bgvideo");



    if (!localStorage.getItem("enableRandomBackrounds") && !localStorage.getItem("enableVideoBackground")) {
        setDefaultBackground();
        enableVideoBackground();
        backgroundVideoToggle.checked = true;
    }
    if (localStorage.getItem("enableRandomBackrounds") == "true") {
        setRandomBackground();
    }else{
        setDefaultBackground();
    }

    if (localStorage.getItem("enableVideoBackground") == "true") {
      enableVideoBackground();
    }else{
        disableVideoBackground();
    }



    backgroundVideoToggle.addEventListener('change', function () {
        if (this.checked) {
            setDefaultBackground();
            enableVideoBackground();
            randomBackgroundToggle.checked = false;

        } else {
            disableVideoBackground();
        }
    });

    randomBackgroundToggle.addEventListener('change', function () {
        if (this.checked) {
            disableVideoBackground();
            setRandomBackground();
            backgroundVideoToggle.checked = false;

        } else {
            setDefaultBackground();
            localStorage.setItem("enableRandomBackrounds", false);
        }
    });

};

function disableVideoBackground() {
    backgroundVideo.style.display = "none";
    localStorage.setItem("enableVideoBackground", false);
}

function enableVideoBackground() {
    backgroundVideo.style.display = "block";
    setDefaultBackground();
    backgroundVideo.play();
    localStorage.setItem("enableVideoBackground", true);
}

function hideDropdowns() {
    document.getElementById("moreInfo").classList.add('div-hidden');
    document.getElementById("specs").classList.add('div-hidden');
}

function setRandomBackground() {
    console.log("ran");
    const randValue = getRandomInt(backgrounds.length);
    document.documentElement.style.setProperty('--accent-color', colors[randValue]);
    document.body.style.background = getBackground(randValue);
    document.body.style.backgroundSize = "cover";
    localStorage.setItem("enableRandomBackrounds", true);
}
function setDefaultBackground() {
    document.documentElement.style.setProperty('--accent-color', colors[1]);
    document.body.style.background = getBackground(1);
    document.body.style.backgroundSize = "cover";
}
function pauseVideo() {
    if (!backgroundVideo.videoPaused) {
        backgroundVideo.pause();
    } else {
        backgroundVideo.play();
    }
}
function showElement(element) {
    var gallery = document.getElementById(element);
    if (gallery.classList.contains("div-hidden")) {
        gallery.classList.remove('div-hidden');
    } else {
        gallery.classList.add('div-hidden');
    }
}

function rotate() {
    var x = document.getElementsByTagName("BODY")[0];
    x.className = "rotate";
    var button = document.getElementById("rotate_button");
    button.style.display = "none";
}

function getBackground(i) {
    return 'url("/assets/images/' + backgrounds[i] + '")';
}

function getRandomInt(max) {
    return Math.floor(Math.random() * max);
}

function showSettings() {
    var settings = document.getElementById("settings");
    if (settings.style.display == "none") {
        settings.style.display = "block";
        setTimeout(() => { settings.style.opacity = "1"; }, 200);

    } else {
        settings.style.opacity = "0";
        setTimeout(() => { settings.style.display = "none"; }, 200);

    }
}

function changeTheme() {
    var themesList = document.getElementById("themes");
    console.log(themesList.options[themesList.selectedIndex].text);
    setTheme(themesList.options[themesList.selectedIndex].text);
    location.reload();
}

function setTheme(themeToSet) {
    var themeLink = document.getElementById("theme");

    var r = document.querySelector(':root');
    switch (themeToSet) {
        case "MineWatch":
            console.log("glass");
            themeLink.removeAttribute("href");
            themeLink.setAttribute("href", "/assets/css/minewatch.css");
            localStorage.setItem("theme", "MineWatch");
            document.documentElement.style.setProperty('--accent-color', '#64c9fb');
            break;
        case "Glass":
            console.log("glass");
            themeLink.removeAttribute("href");
            themeLink.setAttribute("href", "/assets/css/style.css");
            localStorage.setItem("theme", "Glass");
            backgroundVideoToggle.removeAttribute("disabled");
            enableVideoBackground.removeAttribute("disabled");
            document.documentElement.style.setProperty('--accent-color', '#E39AE4');
            break;
        case "OSX":
            console.log("glass");
            themeLink.removeAttribute("href");
            themeLink.setAttribute("href", "/assets/css/osx.css");
            localStorage.setItem("theme", "OSX");

            backgroundVideoToggle.removeAttribute("disabled");
            enableVideoBackground.removeAttribute("disabled");
            document.documentElement.style.setProperty('--accent-color', '#E39AE4');
            break;
        case "~vern":
            console.log("glass");
            themeLink.removeAttribute("href");
            themeLink.setAttribute("href", "/assets/css/vern.css");
            localStorage.setItem("theme", "~vern");

            backgroundVideoToggle.removeAttribute("disabled");
            enableVideoBackground.removeAttribute("disabled");
            document.documentElement.style.setProperty('--accent-color', '#ff6c6b');
            break;

    }

}