let imgSrcs = [];
let currentImgSrcIndex = 0;

function closeImageOverlay(omitHistoryEntry){
  const el = document.querySelector('.image-viewer-overlay');
  if(document.fullscreenElement){
    document.exitFullscreen();
    document.querySelector('.image-viewer-fullscreen').innerText = 'Fullscreen';
  }
  if(el.style.display !== 'none'){
    el.style.display = 'none';
    // add history state so back button will take us back to open popup
    if(!omitHistoryEntry){
      history.pushState({imageViewerOpen: false}, '');
    }
  }
}

function imageOverlayNextButton(){
  currentImgSrcIndex = (currentImgSrcIndex + 1) % imgSrcs.length;
  openImageOverlayByIndex(currentImgSrcIndex);
}

function imageOverlayPreviousButton(){
  currentImgSrcIndex = (currentImgSrcIndex + imgSrcs.length - 1) % imgSrcs.length;
  openImageOverlayByIndex(currentImgSrcIndex);
}

function openImageOverlay(srcsetTarget) {
  let imageIndex = -1;
  for(let i = 0; i < imgSrcs.length; i++){
    if(xLargeSrcFromSrcset(srcsetTarget) === imgSrcs[i]){
      imageIndex = i;
      currentImgSrcIndex = i;
      break;
    }
  }
  openImageOverlayByIndex(imageIndex);
}

function requestImageFullScreen() {
  const el = document.querySelector('.image-viewer-overlay');
  if(document.fullscreenElement){
    // exit out of fullscreen
    document.exitFullscreen();
    document.querySelector('.image-viewer-fullscreen').innerText = 'Fullscreen';
  } else {
    el.requestFullscreen().then(() => {
      if(document.fullscreenElement){
        // change button text to "exit full screen"
        document.querySelector('.image-viewer-fullscreen').innerText = 'Exit Fullscreen';
      }
    });
  }
}

function openImageOverlayByIndex(imageIndex, omitHistoryEntry){
  if(imageIndex < 0 || imageIndex >= imgSrcs.length){
    return false;
  }
  const src = imgSrcs[imageIndex];
  const el = document.querySelector('.image-viewer-overlay');
  if(el.style.display === 'none'){
    el.style.display = 'flex';
    // add history state so back button will take us out of the popup
    if(!omitHistoryEntry){
      history.pushState({imageViewerOpen: true, imageViewerIndex: imageIndex}, '');
    }
  }
  document.querySelector('.image-viewer-img').src = src;
  document.querySelector('.image-viewer-counter').textContent = (1 + imageIndex) + ' / ' + imgSrcs.length; 

  return true;
}

function loadPannellumDivs(){
  const pannellums = document.getElementsByClassName('pannellum-div');
  for(const pan of pannellums){
    const folder = pan.dataset.imgfolder;
    const pitch = pan.dataset.pitch;
    const yaw = pan.dataset.yaw;

    if(folder === ''){
      // we have no photosphere folder, resort to backup image (this might not be an actual photosphere)
      const config = {
        autoLoad: true,
        pitch: pitch ? parseFloat(pitch) : 0,
        yaw: yaw ? parseFloat(yaw) : 0,
        mouseZoom: false,
        type: 'equirectangular',
        panorama: pan.dataset.imgbackupsrc
      }

      window.pannellum.viewer(pan, config)
      
    } else {
      // load config files for photosphere
      fetch(folder + '/config.json', {
        method: 'GET',
        headers: {
          "Content-Type": 'text/plain'
        }
      }).then(response => response.text())
      .then(data => {
        const config = JSON.parse(data);
        // specify some other options
        config.autoLoad = true;
        config.pitch = pitch ? parseFloat(pitch) : 0;
        config.yaw = yaw ? parseFloat(yaw) : 0;
        config.basePath = './' + folder;
        config.mouseZoom = false;

        window.pannellum.viewer(pan, config)
      })
    }
  }
}

function xLargeSrcFromSrcset(srcset) {
  const srcs = srcset.split(' ');
    if(srcset !== '' && srcs.length > 0){
      const src = srcs[0];
      // replace "_small", "_medium", "_large" with "_x-large"
      return src.replace(/(_small|_medium|_large)(\.[a-zA-Z0-9]+$)/, '_x-large$2');
    }
    return null;
}

window.onload = () => {
  loadPannellumDivs();

  // initialize click events for image overlay
  const overlay = document.querySelector('.image-viewer-overlay');
  const box = document.querySelector('.image-viewer-box');
  box.onclick = (e) => e.stopPropagation();
  const controls = document.querySelector('.image-viewer-controls');
  controls.onclick = (e) => e.stopPropagation();
  // overlay.onclick = () => closeImageOverlay(); 

  // populate imgSrcs with images in the blog
  const images = document.getElementsByTagName('img');
  for(let img of images){
    const src = xLargeSrcFromSrcset(img.srcset);
    if(!!src){
      imgSrcs.push(src);
      // add click event listener for image
      img.onclick = (e) => openImageOverlay(e.target.srcset)
    }
  }
}

window.addEventListener('popstate', e => {
  if(!e.state){
    closeImageOverlay(true);
  }
  else if('imageViewerOpen' in e.state){
    if(!e.state.imageViewerOpen){
      closeImageOverlay(true);
    } else {
      openImageOverlayByIndex(e.state.imageViewerIndex, true);
    }
  }
})