// nav bar scroll effect
const scrollLimit = 150;

window.onscroll = () =>
{
    // check if scrolled past limit if so add scrolled class to change background of nav
    if (document.body.scrollTop >= scrollLimit || document.documentElement.scrollTop >= scrollLimit)
    {
        document.querySelector("nav").classList.add("scrolled");
    }
    else
    {
        document.querySelector("nav").classList.remove("scrolled");
    }
};

document.querySelector("#goBackToTop").addEventListener("click", () =>
{
    window.scrollTo(0, 0);
});

/**
 * getProjectData function
 * Gets the project data from the backend route and appends the data on to the timeline.
 */
function getProjectData()
{
    fetch("/api/projectData").then(res =>
    {
        res.json().then(json =>
        {
            if (res.ok)
            {
                json.forEach(item =>
                {
                    if (item["isMainProject"] === 1)
                    {
                        document.querySelector("#mainProj").innerHTML = `
						<h1>${item["title"]}</h1>
						<div>
							<img src="${(item["imgLocation"] === "") ?  "../imgs/placeholder.png" : item["imgLocation"]}" alt="">
							<div class="flexRow">
								<p>${item["information"]}</p>
								<div class="flexCol">
									<a href="${(item["projectLink"] === "N/A") ? "#" : item["projectLink"]}" class="btn btnPrimary boxShadowIn boxShadowOut" ${(item["projectLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
									<a href="${(item["gitLink"] === "N/A") ? "#" : item["gitLink"]}" class="btn btnOutline boxShadowIn boxShadowOut" ${(item["gitLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>Git</a>
								</div>
							</div>
						</div>
						`;
                        return null;
                    }

                    document.querySelector("#otherProj").innerHTML += `
                    <div class="oProjItem">
                        <img src="${(item["imgLocation"] === "") ?  "../imgs/placeholder.png" : item["imgLocation"]}" alt="">
                        <div class="flexCol">
                            <div>
                            	<h3>${item["title"]}</h3>
                                <p>${item["information"]}</p>
                            </div>
                            <div>
                                <a href="${(item["projectLink"] === "N/A") ? "#" : item["projectLink"]}" class="btn btnPrimary boxShadowIn boxShadowOut"${(item["projectLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
                                <a href="${(item["githubLink"] === "N/A") ? "#" : item["gitLink"]}" class="btn btnOutline boxShadowIn boxShadowOut">${(item["githubLink"] === "N/A") ? "disabled=\"disabled\"" : ""}Git</a>
                            </div>
                        </div>
                    </div>
                    `;
                })
            }
        })
    })
}

document.addEventListener('DOMContentLoaded', () =>
{
    // get projectData
    getProjectData();

    // update the year in the footer
    document.getElementById("year").innerHTML = new Date().getFullYear().toString();
});