function openTab(evt, tabName) {
    var i, tabContent, navItem;
    
    tabContent = document.getElementsByClassName("tabContent");
    for (i = 0; i < tabContent.length; i++) {
        tabContent[i].style.opacity = "0";
        tabContent[i].style.display = "none";
    }
    
    navItem = document.getElementsByClassName("nav-item");
    for (i = 0; i < navItem.length; i++) {
        navItem[i].className = navItem[i].className.replace(" nav-item_selected", "");
    }
    
    document.getElementById(tabName).style.display = "block";
    setTimeout(function() {
        document.getElementById(tabName).style.opacity = "1";
    }, 100);
    
    evt.currentTarget.className += " nav-item_selected";
    
    document.getElementById("nav-item_underline").style.left = evt.currentTarget.offsetLeft + "px";
    document.getElementById("nav-item_underline").style.width = evt.currentTarget.offsetWidth + "px";
}


function scrollFunction(id, section) {
    const scrollActivate = 220;
    const selector = document.querySelector(id);
    
    selector.addEventListener("scroll", (event) => {
        if (selector.scrollTop > scrollActivate) {
            if (!$(selector).hasClass("hero_scrolled")) {
                $(".hero")[section].className += " hero_scrolled";
                $(".hero")[section].style.height = "";
            }
        } else {
            $(".hero")[section].className = "hero";
            $(".hero")[section].style.height = `calc(20rem - ${selector.scrollTop}px)`;
            $(".hero img")[section].style.filter = `blur(${2 + (selector.scrollTop / 20)}px) brightness(0.7)`;
        }
    });
}

document.querySelector("#refsheet").onclick = function() {
    $('.nav-item')[3].click();
}

document.querySelector("#twitter_btn").onclick = function() {
    window.open("https://twitter.com/fluffybeanUwU", "_blank");
}
document.querySelector("#telegram_btn").onclick = function() {
    window.open("http://t.me/Fluffy_Bean", "_blank");
}
document.querySelector("#github_btn").onclick = function() {
    window.open("https://github.com/Fluffy-Bean", "_blank");
}
document.querySelector("#discord_btn").onclick = function() {
    navigator.clipboard.writeText("Fluffy Bean#5212");
    //console.log("Fluffy Bean#5212");

    this.innerHTML = "<p>Copied!</p>";
    this.style.backgroundColor = "#8c977d";
    this.style.color = "#151515";

    setTimeout(() => {
        this.innerHTML = "<p>Discord</p><i class='ph-discord-logo c_green'></i>";
        this.style.backgroundColor = "";
        this.style.color = "";
    }, 2000);
}

$(document).ready(function() {
    // Assign scroll to all sections
    scrollFunction("#Home", 0);
    scrollFunction("#Hobbies", 1);
    scrollFunction("#Experiance", 2);
    scrollFunction("#Gallery", 3);

    // get GET parameters
    const urlParams = new URLSearchParams(window.location.search);
    const tab = urlParams.get('t');

    // Switch to tab on load
    if (tab === "home") {
        $('.nav-item')[0].click();
    } else if (tab === "hobbies") {
        $('.nav-item')[1].click();
    } else if (tab === "experiance") {
        $('.nav-item')[2].click();
    } else if (tab === "gallery") {
        $('.nav-item')[3].click();
    } else {
        $('.nav-item')[0].click();
    }
});