window.addEventListener("load", function(){

    // menu button
    const menuButton = document.getElementById("menu-button");
    const navBar = document.getElementById("main-nav");
    menuButton.addEventListener("click", function(){
        if(navBar.classList.contains("open")){
            navBar.classList.remove("open");
        }else{
            navBar.classList.add("open");
        }
    });
    
    // header about button
    const headerBtn = document.getElementById("headerBtn");
    headerBtn.addEventListener("click", function(){
        location.href = "about.html";
    })

    // project explore buttons
    const projectBtn1 = document.getElementById("projectBtn1");
    projectBtn1.addEventListener("click", function(){
        location.href = "projects.html";
    })

    const projectBtn2 = document.getElementById("projectBtn2");
    projectBtn2.addEventListener("click", function(){
        location.href = "projects.html";
    })

    // transcript buttons
    const educationBtn2 = document.getElementById("eduBtn2");
    educationBtn2.addEventListener("click", function(){
        location.href = "transcripts/western_technical.png";
    })

    const educationBtn3 = document.getElementById("eduBtn3");
    educationBtn3.addEventListener("click", function(){
        location.href = "transcripts/uwl.png";
    })

    // about buttons
    const aboutBtn1 = document.getElementById("aboutBtn1");
    aboutBtn1.addEventListener("click", function(){
        location.href = "contact.html";
    })

    const aboutBtn2 = document.getElementById("aboutBtn2");
    aboutBtn2.addEventListener("click", function(){
        location.href = "about.html";
    })

    // Image gallery
    const prevBtn = document.getElementById("prevBtn");
    const nxtBtn = document.getElementById("nxtBtn");
    
    const webName1 = document.getElementById("webName1");
    const webDate1 = document.getElementById("webDate1");
    const webName2 = document.getElementById("webName2");
    const webDate2 = document.getElementById("webDate2");

    const img1 = document.getElementById("prevBtnContainer");
    const img2 = document.getElementById("nxtBtnContainer");

    let currentImg = 0;
    let currentImg2 = 1;

    const images = [
        {url: "images/nursingPic.jpg", webName: "Nursing Website", webDate: "La Crosse, 2024"},
        {url: "images/makeupWebsite.jpg", webName: "Makeup Website", webDate: "La Crosse, 2024"},
        {url: "images/toDoList.jpg", webName: "To Do List", webDate: "La Crosse, 2024"},
        {url: "images/imageSlider.jpg", webName: "Image Slider", webDate: "La Crosse, 2024"},
        {url: "images/calculatorPic.jpg", webName: "Calculator", webDate: "La Crosse, 2024"},
        {url: "images/quizApp.jpg", webName: "Quiz App", webDate: "La Crosse, 2024"},
        {url: "images/noteTaker.jpg", webName: "Note Taker", webDate: "La Crosse, 2024"},
        {url: "images/rockPaperScissors.jpg", webName: "Rock, Paper, Scissors Game", webDate: "La Crosse, 2024"},
        {url: "images/asteroidsGame.jpg", webName: "Asteroids Game", webDate: "La Crosse, 2024"},
        {url: "images/tetrisGame.jpg", webName: "Tetris Game", webDate: "La Crosse, 2024"}
    ]

// `url('${imagesObj.url}')`;      `url('${imagesObj.url}')`;           These two line can replace conatanating strings. 
// Theyre template literals

    function showImg(imagesObj){
        img1.style.background =  "url(" + imagesObj.url + ")";
        img1.style.backgroundSize =  "cover";
        img1.style.backgroundPosition =  "center";
        webName1.innerHTML = imagesObj.webName;
        webDate1.innerHTML = imagesObj.webDate;
    }
    function showImg2(imagesObj){
        img2.style.background = "url(" + imagesObj.url + ")";
        img2.style.backgroundSize =  "cover";
        img2.style.backgroundPosition =  "center";
        webName2.innerHTML = imagesObj.webName;
        webDate2.innerHTML = imagesObj.webDate;
    }

    prevBtn.addEventListener("click", function(){
        currentImg--;
        currentImg2--;

        if(currentImg < 0){
            currentImg = images.length - 1;
        }
        showImg(images[currentImg]);

        if(currentImg2 < 0){
            currentImg2 = images.length - 1;
        }
        showImg2(images[currentImg2]);
    })

    nxtBtn.addEventListener("click", function(){
        currentImg++;
        currentImg2++;

        if(currentImg == images.length){
            currentImg = 0;
        }
        showImg(images[currentImg]);

        if(currentImg2 == images.length){
            currentImg2 = 0;
        }
        showImg2(images[currentImg2]);
    })
})