var curSetStatus = 'Beast order';

function initLightGallery(imgSet) {
  inlineGallery = lightGallery(lgContainer, {
    plugins: [lgZoom, lgThumbnail, lgFullscreen],
    container: lgContainer,
    dynamic: true,
    showMaximizeIcon: true,
    closable: false,
    hash: false,
    speed: 500,
    showZoomInOutIcons: true,
    scale: 0.3,
    actualSize: true,
    actualSizeIcons: {
      zoomIn: 'lg-actual-size',
      zoomOut: 'lg-actual-size', 
    },
    allowMediaOverlap: false,
    toggleThumb: true,
    dynamicEl: imgSet
  });
  
  inlineGallery.openGallery();
  
  inlineGallery.outer.find('#b-lg-sort').on('click', () => {
    const curSort = document.getElementById("sort-status").innerText.substr(0, 5);
    if (curSort == 'Beast') {
      imgSet = imgList2;
      curSetStatus = 'Manuscript order';
    }
    else {
      imgSet = imgList1;
      curSetStatus = 'Beast order';
    }
    inlineGallery.destroy();
    initLightGallery(imgSet);
  });
};

lgContainer = document.getElementById('inline-gallery-container');
lgContainer.addEventListener("lgInit", (event) => {
  if (imgList2.length != 0) {
    let lgInstance = event.detail.instance;
    const sortBtn =
      '<button type="button" aria-label="Sort" id="b-lg-sort" class="b-lg-sort lg-icon" alt="Sort" title="Toggle image order"></button>';
    const sortStatus = 
      '<span id="sort-status" class="sort-status">' + curSetStatus + '</span>';
    
    lgInstance.outer.find(".lg-toolbar").append(sortBtn);
    lgInstance.outer.find(".lg-counter").append(sortStatus);

    const $toolbar = lgInstance.$toolbar;
    $toolbar.find(".lg-maximize").attr("title", "Toggle maximize gallery");
    $toolbar.find(".lg-download").attr("title", "Download image");
    $toolbar.find(".lg-zoom-in").attr("title", "Zoom in");
    $toolbar.find(".lg-zoom-out").attr("title", "Zoom out");
    $toolbar.find(".lg-actual-size").attr("title", "Toggle actual size");
    $toolbar.find(".lg-fullscreen").attr("title", "Toggle full screen");
  }
});  

initLightGallery(imgList1);