// `photos` variable populated by script tag in place page html
viewState = null;
galleryContainer = document.getElementById("galleryContainer");
galleryImage = document.getElementById("galleryImage");
previewLinks = document.getElementsByClassName("previewLink");
headerImage = document.getElementById("headerImage");

touchDragThreshold = 50;
directionDetermined = false;

// null is used when no information is supposed to be available.
// functions set these to useful values during touch events.
touchDragStartX = null;
touchDirection = null;

// changes to style.rotate are necessary because transformed elements
// get stuck in front of the gallery images

function enlargeImage (filename) {
  viewState = photos.indexOf(filename);
  galleryImage.fullRes = filename;
  galleryImage.src = "/compressed/compressed_" + filename;
  galleryContainer.style.display = "block";
  headerImage.style.rotate = "none";
};

function delGallery () {
  galleryContainer.style.display = "none";
  galleryImage.src = "";
  headerImage.style.rotate = "-3deg";
};

function nextImage () {
  viewState++;
  if (viewState == previewLinks.length) {
    viewState = 0;  
  };
  galleryImage.fullRes = photos[viewState];
  galleryImage.src = "/compressed/compressed_" + photos[viewState];
};

function prevImage () {
  viewState--;
  if (viewState == -1) {
    viewState = previewLinks.length - 1;
  };
  galleryImage.fullRes = photos[viewState];
  galleryImage.src = "/compressed/compressed_" + photos[viewState];
};

function imageNewTab () {
  window.open(galleryImage.fullRes, "_blank")
};

function keyHandler (event) {
  if (event.key == "ArrowRight" | event.key == "Space") {
    nextImage();
  } else if (event.key == "ArrowLeft") {
    prevImage();
  } else if (event.key == "Escape" | event.key == "q") {
    delGallery();
  } 
};

function delGalleryHandler (event) {
  if (event.target.id == "galleryContainer") {
    delGallery();
  };
};

function mouseUpHandler (event) {
  console.log("mousedown");
  if (event.clientX > window.innerWidth / 2) {
      nextImage();
    } else {
      prevImage();
    };
};

function onTouchMove (event) {
  event.preventDefault();
  screenX = event.changedTouches[0].screenX;
  if (!directionDetermined && touchDragStartX == null) {
    touchDragStartX = screenX;
  };
  touchDelta = Math.abs(touchDragStartX - screenX);
  if (!directionDetermined && (touchDelta > touchDragThreshold)) {
    touchDirection = touchDragStartX > screenX;
    touchDragStartX = null;
    directionDetermined = true;
};
};

function onTouchEnd (event) {
  event.preventDefault();
  // poorly phrased, but this must reset state to default
  directionDetermined = false;
  touchDragStartX = null;
  if (touchDirection == null) {
    return;
  };
  if (touchDirection) {
    nextImage();
  } else {
    prevImage();
  };
  touchDirection = null;
};

document.onkeydown = keyHandler;
document.body.onclick = delGalleryHandler;
galleryImage.addEventListener("mouseup", mouseUpHandler);
galleryImage.addEventListener("touchmove", onTouchMove);
galleryImage.addEventListener("touchend", onTouchEnd);
galleryImage.addEventListener("touchstart", function (event) {
  event.preventDefault();
});