Assignment03.js

/* 
   COMP125 Assignment #3 - DOM Slideshow
   Student: Yushan Wang (301508247)
*/

let lightboxTitle = "My Western Vacation";
let imgFiles = [
  "photo01.jpg","photo02.jpg","photo03.jpg","photo04.jpg",
  "photo05.jpg","photo06.jpg","photo07.jpg","photo08.jpg",
  "photo09.jpg","photo10.jpg","photo11.jpg","photo12.jpg"
];

let imgCaptions = [
  "Sky Pond (Rocky Mountain National Park)",
  "Buffalo on the Plains (South Dakota)",
  "Garden of the Gods (Colorado Springs)",
  "Elephant Head Wild Flower (Rocky Mountain National Park)",
  "Double Rainbow (Colorado National Monument)",
  "Moose in the Wild (Grand Lake, Colorado)",
  "Camas Wild Flower (Rocky Mountain National Park)",
  "Chasm Lake (Rocky Mountain National Park)",
  "Teton Crest Trail (Grand Teton National Park)",
  "The Notch Trail (Badlands National Park)",
  "Sprague Lake (Rocky Mountain National Park)",
  "Longs Peak Trail (Rocky Mountain National Park)"
];

let imgCount = imgFiles.length;
let currentImage = 1;
let timeID = null;

window.addEventListener("load", createLightbox);

function createLightbox() {
  let lightBox = document.getElementById("lightBox");

  // title
  let lbTitle = document.createElement("h1");
  lbTitle.id = "lbTitle";
  lbTitle.textContent = lightboxTitle;
  lightBox.appendChild(lbTitle);

  // counter
  let lbCounter = document.createElement("div");
  lbCounter.id = "lbCounter";
  lbCounter.textContent = `${currentImage} / ${imgCount}`;
  lightBox.appendChild(lbCounter);

  // controls
  let lbPrev = document.createElement("button");
  lbPrev.id = "lbPrev";
  lbPrev.innerHTML = "◀";
  lbPrev.classList.add("navBtn");
  lbPrev.addEventListener("click", showPrev);

  let lbNext = document.createElement("button");
  lbNext.id = "lbNext";
  lbNext.innerHTML = "▶";
  lbNext.classList.add("navBtn");
  lbNext.addEventListener("click", showNext);

  let lbPlay = document.createElement("button");
  lbPlay.id = "playPauseBtn";
  lbPlay.textContent = "▶ Play";
  lbPlay.addEventListener("click", togglePlay);

  // image container
  let lbImages = document.createElement("div");
  lbImages.id = "lbImages";
  lightBox.append(lbPrev, lbNext, lbImages, lbPlay);

  // load images
  imgFiles.forEach((src, i) => {
    let image = document.createElement("img");
    image.src = src;
    image.alt = imgCaptions[i];
    image.addEventListener("click", openOverlay);
    lbImages.appendChild(image);
  });

  function showNext() {
    lbImages.appendChild(lbImages.firstElementChild);
    currentImage = currentImage < imgCount ? currentImage + 1 : 1;
    lbCounter.textContent = `${currentImage} / ${imgCount}`;
  }

  function showPrev() {
    lbImages.insertBefore(lbImages.lastElementChild, lbImages.firstElementChild);
    currentImage = currentImage > 1 ? currentImage - 1 : imgCount;
    lbCounter.textContent = `${currentImage} / ${imgCount}`;
  }

  function togglePlay() {
    if (timeID) {
      clearInterval(timeID);
      timeID = null;
      lbPlay.textContent = "▶ Play";
    } else {
      showNext();
      timeID = setInterval(showNext, 2000);
      lbPlay.textContent = "⏸ Pause";
    }
  }
}

// overlay (full-screen view)
function openOverlay() {
  let overlay = document.createElement("div");
  overlay.id = "overlay";
  overlay.style.display = "flex";

  let figure = document.createElement("figure");
  let bigImg = document.createElement("img");
  bigImg.src = this.src;
  bigImg.alt = this.alt;

  let caption = document.createElement("figcaption");
  caption.textContent = this.alt;

  let addBtn = document.createElement("button");
  addBtn.textContent = "Add to Favorites";
  addBtn.onclick = () => addFavorite(this.src);

  let closeBtn = document.createElement("button");
  closeBtn.id = "closeOverlay";
  closeBtn.textContent = "Close";
  closeBtn.onclick = () => document.body.removeChild(overlay);

  figure.append(bigImg, caption, addBtn, closeBtn);
  overlay.appendChild(figure);
  document.body.appendChild(overlay);
}

// favorites logic
function addFavorite(src) {
  let favList = document.getElementById("favList");
  let message = document.getElementById("message");

  if (favList.children.length >= 5) {
    message.textContent = "You can only have up to 5 favorites. Remove one first!";
    message.className = "error";
    message.style.display = "block";
    return;
  }

  let item = document.createElement("div");
  item.classList.add("favItem");

  let img = document.createElement("img");
  img.src = src;

  let removeBtn = document.createElement("button");
  removeBtn.textContent = "Remove";
  removeBtn.onclick = () => item.remove();

  item.append(img, removeBtn);
  favList.appendChild(item);

  message.textContent = "Added to favorites!";
  message.className = "success";
  message.style.display = "block";
}