function openBg() {
            const element = document.getElementById("secbgs"); 
            if (element.classList.contains("vis")) {
                element.classList.remove("vis");
                element.classList.add("inv");
            } else {
                element.classList.remove("inv");
                element.classList.add("vis");
            }
}

//menu section:

function showM() {
            const element = document.getElementById("menusectionbuttons"); 
            if (element.classList.contains("vis")) {
                element.classList.remove("vis");
                element.classList.add("inv");
            } else {
                element.classList.remove("inv");
                element.classList.add("vis");
            }
}

function goToS(ids) {
    ids.forEach(id => {
        const element = document.getElementById(id);
        if (element) {
            element.classList.remove('inv');
        }
         element.scrollIntoView({ behavior: 'smooth' });
    });
}

function goTo(ids) {
    ids.forEach(id => {
        const element = document.getElementById(id);
         element.scrollIntoView({ behavior: 'smooth' });
    });
}

function toggleVisibility(ids) {
    ids.forEach(id => {
        const element = document.getElementById(id);
        if (element) {
            element.classList.toggle('inv');
        }
         element.scrollIntoView({ behavior: 'smooth' });
    });
}

function goT() {
	const top = document.querySelector(".titulo");
	top.scrollIntoView({ behavior: 'smooth' });
	}

//menu section end.

function openCDA() {
            const element = document.getElementById("bgCDA"); 
                element.scrollIntoView({ behavior: 'smooth' });
}

function openACEOC() {
            const element = document.getElementById("bgACEOC"); 
                element.scrollIntoView({ behavior: 'smooth' });
}

function openGDE() {
            const element = document.getElementById("bgGDE"); 
                element.scrollIntoView({ behavior: 'smooth' });
}

function openA() {
            const element = document.querySelector(".AnimationD"); 
            element.scrollIntoView({ behavior: 'smooth' });
		}
		
function openI() {
            const element = document.querySelector(".IllustrationD"); 
            element.scrollIntoView({ behavior: 'smooth' });
		}
		
function openABT() {
            const element = document.querySelector(".AboutD"); 
            element.scrollIntoView({ behavior: 'smooth' });
		}


let currentIndex = 0; // To keep track of the current image index
const images = document.querySelectorAll(".image-container img");
const popupImage = document.querySelector(".popup-image");
const popupImgElement = popupImage.querySelector("img");
const closeButton = popupImage.querySelector(".close");
const prevButton = popupImage.querySelector(".prev");
const nextButton = popupImage.querySelector(".next");

// Function to show the popup with the selected image
function showpp(imageElement) {
    currentIndex = Array.from(images).indexOf(imageElement); // Get the index of the clicked image
    popupImage.style.display = "block";
    popupImgElement.src = imageElement.getAttribute("src");
}

// Close button functionality
closeButton.onclick = () => {
    popupImage.style.display = "none";
};

// Function to show the next image
nextButton.onclick = () => {
    currentIndex = (currentIndex + 1) % images.length; // Loop back to the first image
    console.log("Next Image Index:", currentIndex); // Debugging line
    popupImgElement.src = images[currentIndex].getAttribute("src");
};

prevButton.onclick = () => {
    currentIndex = (currentIndex - 1 + images.length) % images.length; // Loop back to the last image
    console.log("Previous Image Index:", currentIndex); // Debugging line
    popupImgElement.src = images[currentIndex].getAttribute("src");
};

// Add click event to each image
document.querySelectorAll(".image-container img").forEach(image => {
    image.onclick = () => showpp(image);
});

//Seção abaixo é para os Bgs da Cabeça e o Corpo:

let currentIndex2 = 0; // To keep track of the current image index
const images2 = document.querySelectorAll("#bgACEOC .image-container2 img"); // Select images specifically from ACEOC
const popupImage2 = document.querySelector(".popup-image2");
const popupImgElement2 = popupImage2.querySelector("img"); // Correctly reference the popup image element
const closeButton2 = popupImage2.querySelector(".close2"); // Correctly reference the close button
const prevButton2 = popupImage2.querySelector(".prev2"); // Correctly reference the previous button
const nextButton2 = popupImage2.querySelector(".next2"); // Correctly reference the next button

// Function to show the popup with the selected image
function showpp2(imageElement2) {
    currentIndex2 = Array.from(images2).indexOf(imageElement2); // Get the index of the clicked image
    popupImage2.style.display = "block";
    popupImgElement2.src = imageElement2.getAttribute("src");
}

// Close button functionality
closeButton2.onclick = () => {
    popupImage2.style.display = "none";
};

// Function to show the next image
nextButton2.onclick = () => {
    currentIndex2 = (currentIndex2 + 1) % images2.length; // Loop back to the first image
    console.log("Next Image Index:", currentIndex2); // Debugging line
    popupImgElement2.src = images2[currentIndex2].getAttribute("src");
};

prevButton2.onclick = () => {
    currentIndex2 = (currentIndex2 - 1 + images2.length) % images2.length; // Loop back to the last image
    console.log("Previous Image Index:", currentIndex2); // Debugging line
    popupImgElement2.src = images2[currentIndex2].getAttribute("src");
};

// Add click event to each image in ACEOC
document.querySelectorAll("#bgACEOC .image-container2 img").forEach(image2 => {
    image2.onclick = () => showpp2(image2);
});

//The code bellow is for the "Gogó da Ema"

let currentIndex3 = 0; // To keep track of the current image index
const images3 = document.querySelectorAll("#bgGDE .image-container3 img"); // Select images specifically from ACEOC
const popupImage3 = document.querySelector(".popup-image3");
const popupImgElement3 = popupImage3.querySelector("img"); // Correctly reference the popup image element
const closeButton3 = popupImage3.querySelector(".close3"); // Correctly reference the close button
const prevButton3 = popupImage3.querySelector(".prev3"); // Correctly reference the previous button
const nextButton3 = popupImage3.querySelector(".next3"); // Correctly reference the next button

// Function to show the popup with the selected image
function showpp3(imageElement3) {
    currentIndex3 = Array.from(images3).indexOf(imageElement3); // Get the index of the clicked image
    popupImage3.style.display = "block";
    popupImgElement3.src = imageElement3.getAttribute("src");
}

// Close button functionality
closeButton3.onclick = () => {
    popupImage3.style.display = "none";
};

// Function to show the next image
nextButton3.onclick = () => {
    currentIndex3 = (currentIndex3 + 1) % images3.length; // Loop back to the first image
    console.log("Next Image Index:", currentIndex3); // Debugging line
    popupImgElement3.src = images3[currentIndex3].getAttribute("src");
};

prevButton3.onclick = () => {
    currentIndex3 = (currentIndex3 - 1 + images3.length) % images3.length; // Loop back to the last image
    console.log("Previous Image Index:", currentIndex3); // Debugging line
    popupImgElement3.src = images3[currentIndex3].getAttribute("src");
};

// Add click event to each image in ACEOC
document.querySelectorAll("#bgGDE .image-container3 img").forEach(image3 => {
    image3.onclick = () => showpp3(image3);
});