let menu = 0
let show = 0
let instruction = 0
let info = 0
let colors = ['#b4bddf', '#e4cd8c', 'rgb(228, 205, 254)', "white"]




// STYLishING

document.getElementsByTagName("body")[0].addEventListener("dblclick", function () {
    // alert("cane")
    let r = Math.floor(Math.random() * 3)
    let r2 = r + 1
    console.log(r)
    document.getElementsByTagName("body")[0].style.background = colors[r]
    document.getElementById("navbar").style.setProperty('--navbar_back', colors[r2]);
    document.getElementById("customizer").style.setProperty('--navbar_back', colors[r2]);
    if (r2 == 4) {
        document.getElementById("navbar").style.setProperty('--navbar_text', 'black');
    }
})

let dark = 0


    document.getElementById("darkbck").addEventListener("click", function(){
        if (dark==0){
        document.body.style.background= "black"
        dark++}
    else if (dark ==1){
    document.body.style.background= "white"
    dark--
    }
})





document.getElementById("nav_button").innerHTML = "OPEN TREE"
document.getElementById("custom_button").innerHTML = "OPEN CUSTOMIZER"

document.getElementById("nav_button").addEventListener("click", function () {
    if (menu == 0) {
        document.getElementById("nav_button").innerHTML = "CLOSE TREE"
        document.getElementById("navbar").style.display = "block"
        menu++
    } else if (menu == 1) {
        document.getElementById("nav_button").innerHTML = "OPEN TREE"
        document.getElementById("navbar").style.display = "none"
        menu = 0
    }
})

document.getElementById("custom_button").addEventListener("click", function () {
    if (show == 0) {
        document.getElementById("custom_button").innerHTML = "CLOSE CUSTOMIZER"
        document.getElementById("customizer").style.display = "block"
        show++
    } else if (show == 1) {
        document.getElementById("custom_button").innerHTML = "OPEN CUSTOMIZER"
        document.getElementById("customizer").style.display = "none"
        show = 0
    }
})

function dark_back() { //and also close_all button
    if (info == 1 || instruction == 1) {
        // document.getElementById("layer_dark").style.display = "block"
        document.getElementById("close_all").style.display = "block";
    } else if (info == 0 && instruction == 0) {
        // document.getElementById("layer_dark").style.display = "none"
        document.getElementById("close_all").style.display = "none";
    }
}


function infos() {
    if (info == 0) {
        document.getElementById("info").style.display = "block"
        document.getElementById("instruction").style.display = "none"
        info++
        instruction = 0
    } else if (info == 1) {
        document.getElementById("info").style.display = "none"
        info = 0
    }
    dark_back()
}

function instructions() {
    if (instruction == 0) {
        document.getElementById("instruction").style.display = "block"
        document.getElementById("info").style.display = "none"
        instruction++
        info = 0
    } else if (instruction == 1) {
        document.getElementById("instruction").style.display = "none"
        instruction = 0
    }
    dark_back()

}


function closeclose() {
    document.getElementById("instruction").style.display = "none";
    document.getElementById("info").style.display = "none";
    info = 0
    instruction = 0
    dark_back()
    document.getElementById("close_all").style.display = "none";
}

document.getElementById("info_button").addEventListener("click", infos)
document.getElementById("instruction_button").addEventListener("click", instructions)
document.getElementById("close_all").addEventListener("click", closeclose)





var isInViewport = function(elem) {
  var distance = elem.getBoundingClientRect();
  return (
    distance.top >= 0 &&
    distance.left >= 0 &&
    distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    distance.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

var findMe = document.querySelectorAll('.box');
var bars = document.querySelectorAll(".showbar")

window.addEventListener('scroll', function(event) {

findMe.forEach(element => {
    if (isInViewport(element)) {
        let trig = element.classList[1]
        console.log(trig)
        if(document.querySelector(".showbar."+trig).style.display ="none"){
            bars.forEach(bar => {
                bar.style.display ="none"
            });
            document.querySelector(".showbar."+trig).style.display ="block"
        }else{
             console.log()
        }}
});
}, false);









var links = document.querySelectorAll('a');
links = Array.prototype.slice.call(links);

links.forEach(link => {
    var href = link.getAttribute('href');
    if(link.getAttribute('href').startsWith('#')){
        // console.log('addingClickHandler',link);
        link.addEventListener('click',function(e){
            e.preventDefault();
            var dest =  document.getElementById(href.substring(1)).parentNode;
            // console.log('click', href, dest)
            dest.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
        })
    }
    
});