const box = document.getElementById('project-container-gallery')
let x, y

function init(){
	x = 0
	y = 0
	AnimateSkybox()
}

function AnimateSkybox(){
	x += 1

	box.style.backgroundPosition = x + "px " + y + "px"
	requestAnimationFrame(AnimateSkybox) 
}

// Wait for the DOM to fully load
document.addEventListener("DOMContentLoaded", function() {
    // Get all gallery images
    const galleryImages = document.querySelectorAll("#image-gallery .gallery-image");
    // Get the focused image container and the focused image
    const focusedImageContainer = document.getElementById("focused-image-container");
    const focusedImage = document.querySelector(".focused-image");
    // Get the gallery container
    const galleryContainer = document.getElementById("image-gallery");
    // Get the close button
    const closeButton = document.getElementById("close-button");

    // Add click event listeners to each gallery image
    galleryImages.forEach(image => {
        image.addEventListener("click", function() {
            // Hide the gallery
            galleryContainer.style.display = "none";
            // Update the src of the focused image to the src of the clicked image
            focusedImage.src = this.src;
            // Show the focused image container
            focusedImageContainer.style.display = "flex";
        });
    });

    // Add click event listener to the close button
    closeButton.addEventListener("click", function() {
        // Hide the focused image container
        focusedImageContainer.style.display = "none";
        // Show the gallery
        galleryContainer.style.display = "flex";
    });
});


init()