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");
        }
    });

    
    const contactButton = document.getElementById("contactButton");

    contactButton.addEventListener("click", function(){
        location.href = "contact.html";
    })

    const prevBtn = document.getElementById("prevBtn");
    const nxtBtn = document.getElementById("nxtBtn");
    
    const skill1 = document.getElementById("skill1");
    const skill2 = document.getElementById("skill2");
    const skill3 = document.getElementById("skill3");
    const skill4 = document.getElementById("skill4");
    const skill5 = document.getElementById("skill5");

    let currentSkill1 = 0;
    let currentSkill2 = 1;
    let currentSkill3 = 2;
    let currentSkill4 = 3;
    let currentSkill5 = 4;

    const skills = ["HTML", "CSS", "JavaScript", "SQL", "Networking", "Teamwork", "Problem Solving", "Communication", "Time Management"];

    function showSkill1(skillsArray){
        skill1.innerHTML = skillsArray;
    }
    function showSkill2(skillsArray){
        skill2.innerHTML = skillsArray;
    }
    function showSkill3(skillsArray){
        skill3.innerHTML = skillsArray;
    }
    function showSkill4(skillsArray){
        skill4.innerHTML = skillsArray;
    }
    function showSkill5(skillsArray){
        skill5.innerHTML = skillsArray;
    }

    prevBtn.addEventListener("click", function(){
        currentSkill1--;
        currentSkill2--;
        currentSkill3--;
        currentSkill4--;
        currentSkill5--;

        if(currentSkill1 < 0){
            currentSkill1 = skills.length - 1;
        }
        showSkill1(skills[currentSkill1]);

        if(currentSkill2 < 0){
            currentSkill2 = skills.length - 1;
        }
        showSkill2(skills[currentSkill2]);

        if(currentSkill3 < 0){
            currentSkill3 = skills.length - 1;
        }
        showSkill3(skills[currentSkill3]);

        if(currentSkill4 < 0){
            currentSkill4 = skills.length - 1;
        }
        showSkill4(skills[currentSkill4]);

        if(currentSkill5 < 0){
            currentSkill5 = skills.length - 1;
        }
        showSkill5(skills[currentSkill5]);
    })

    nxtBtn.addEventListener("click", function(){
        currentSkill1++;
        currentSkill2++;
        currentSkill3++;
        currentSkill4++;
        currentSkill5++;

        if(currentSkill1 == skills.length){
            currentSkill1 = 0;
        }
        showSkill1(skills[currentSkill1]);

        if(currentSkill2 == skills.length){
            currentSkill2 = 0;
        }
        showSkill2(skills[currentSkill2]);

        if(currentSkill3 == skills.length){
            currentSkill3 = 0;
        }
        showSkill3(skills[currentSkill3]);

        if(currentSkill4 == skills.length){
            currentSkill4 = 0;
        }
        showSkill4(skills[currentSkill4]);

        if(currentSkill5 == skills.length){
            currentSkill5 = 0;
        }
        showSkill5(skills[currentSkill5]);
    })
})