const open = document.querySelector(".mob-open");
const close = document.querySelector(".mob-close");
const wrapper = document.querySelector(".mob-wrapper").classList;

open.addEventListener("click", () => {
  wrapper.toggle("opened");
  wrapper.toggle("closed");
});

close.addEventListener("click", () => {
    wrapper.toggle("opened");
    wrapper.toggle("closed");
});

//Active Link Highlighting
const imageClassificationLink = document.getElementById('image-classification-link');
const aboutLink = document.getElementById('about-link');
const imageClassificationLinkMob = document.getElementById('image-classification-link-mob');
const aboutLinkMob = document.getElementById('about-link-mob');

function setActiveLink(link) {
    imageClassificationLink.classList.remove('active');
    aboutLink.classList.remove('active');
    imageClassificationLinkMob.classList.remove('active');
    aboutLinkMob.classList.remove('active');
    link.classList.add('active');
}

aboutLink.addEventListener('click', () => {
    setActiveLink(aboutLink);
});

aboutLinkMob.addEventListener('click', () => {
    setActiveLink(aboutLinkMob);
});

imageClassificationLink.addEventListener('click', () => {
    setActiveLink(imageClassificationLink);
});

imageClassificationLinkMob.addEventListener('click', () => {
  setActiveLink(imageClassificationLinkMob);
});


//Error Alert When Navigating to About while Image Classification is running
aboutLink.addEventListener('click', (e) => {
  if (progress.style.display === 'block' && progressBar.value !== 100) {
      e.preventDefault();
      setActiveLink(imageClassificationLink);
      alert('Please wait until the upload is complete before navigating away.');
  }
});

aboutLinkMob.addEventListener('click', (e) => {
  if (progress.style.display === 'block' && progressBar.value !== 100) {
      e.preventDefault();
      setActiveLink(imageClassificationLink);
      alert('Please wait until the upload is complete before navigating away.');
  }
});