(function(){
  var DUR_SLIDE = 280, DUR_FADE = 480, THRESHOLD_RATIO = 0.18;

  function init(){
    var hero = document.querySelector('.gallery_main-image');
    if(!hero) return;
    var items = Array.prototype.slice.call(document.querySelectorAll('.thumbnail_item'));
    if(!items.length) return;
    var outer = hero.parentElement;
    if(!outer) return;

    var wrap = document.createElement('div');
    wrap.className = 'gallery_wrapper is-gallery-active';
    outer.insertBefore(wrap, hero);
    wrap.appendChild(hero);

    function applyWrapDims(){
      wrap.style.width = '100%';
      wrap.style.height = window.matchMedia('(max-width: 478px)').matches ? '60vh' : '80vh';
    }
    applyWrapDims();
    window.addEventListener('resize', applyWrapDims);

    items.forEach(function(item){
      var img = item.querySelector('.thumbnail_image');
      if(!img) return;
      var pre = new Image();
      var srcset = img.getAttribute('srcset');
      var sizes = img.getAttribute('sizes');
      if(srcset) pre.srcset = srcset;
      if(sizes) pre.sizes = sizes;
      pre.src = img.getAttribute('src');
    });

    function thumbSrc(idx){ var img = items[idx].querySelector('.thumbnail_image'); return img ? {src:img.getAttribute('src'),srcset:img.getAttribute('srcset'),sizes:img.getAttribute('sizes')} : null; }
    function applySrc(el, s){ if(!s) return; if(s.src) el.setAttribute('src', s.src); if(s.srcset) el.setAttribute('srcset', s.srcset); else el.removeAttribute('srcset'); if(s.sizes) el.setAttribute('sizes', s.sizes); }
    function setActive(idx){ items.forEach(function(i){ i.classList.remove('is-active'); }); items[idx].classList.add('is-active'); }
    function activeIndex(){ for(var i=0;i<items.length;i++){ if(items[i].classList.contains('is-active')) return i; } return 0; }
    function setHeroX(px){ hero.style.setProperty('--gallery-x', px + 'px'); }
    function setPreviewX(el, px){ if(el) el.style.setProperty('--preview-x', px + 'px'); }
    function setWrapH(px){ wrap.style.setProperty('--wrap-h', px + 'px'); }

    function heroMaxHeight(){
      var cs = window.getComputedStyle(hero);
      var v = parseFloat(cs.maxHeight);
      return (isFinite(v) && v > 0) ? v : window.innerHeight;
    }
    function targetHeight(){
      return heroMaxHeight();
    }
    function pinCurrent(){ setWrapH(wrap.offsetHeight); }

    applySrc(hero, thumbSrc(0));
    setActive(0);
    setHeroX(0);
    if(hero.complete) pinCurrent(); else hero.addEventListener('load', pinCurrent, {once: true});

    function fadeSwap(idx){
      var s = thumbSrc(idx);
      setActive(idx);
      applySrc(hero, s);
    }

    items.forEach(function(item, idx){ item.addEventListener('click', function(){ if(idx === activeIndex()) return; fadeSwap(idx); }); });

    var startX=null,startY=null,dragging=false,locked=null,dx=0;
    var prevImg=null,nextImg=null,width=0;

    function pt(e){ return e.touches ? e.touches[0] : (e.changedTouches ? e.changedTouches[0] : e); }
    function makePreview(s){ if(!s) return null; var el = document.createElement('img'); el.className = 'gallery-preview'; applySrc(el, s); return el; }
    function teardown(){ if(prevImg && prevImg.parentNode) prevImg.parentNode.removeChild(prevImg); if(nextImg && nextImg.parentNode) nextImg.parentNode.removeChild(nextImg); prevImg = nextImg = null; hero.classList.remove('is-sliding'); }
    function setTrack(x, sliding){
      if(sliding){ hero.classList.add('is-sliding'); if(prevImg) prevImg.classList.add('is-sliding'); if(nextImg) nextImg.classList.add('is-sliding'); }
      else { hero.classList.remove('is-sliding'); if(prevImg) prevImg.classList.remove('is-sliding'); if(nextImg) nextImg.classList.remove('is-sliding'); }
      setHeroX(x); setPreviewX(prevImg, x - width); setPreviewX(nextImg, x + width);
    }

    function onStart(e){
      if(items.length < 2) return;
      var p = pt(e); startX = p.clientX; startY = p.clientY; dragging = true; locked = null; dx = 0;
      width = hero.offsetWidth || wrap.offsetWidth || 600;
      pinCurrent();
      var idx = activeIndex(); teardown();
      if(idx > 0){ prevImg = makePreview(thumbSrc(idx - 1)); if(prevImg){ wrap.appendChild(prevImg); setPreviewX(prevImg, -width); } }
      if(idx < items.length - 1){ nextImg = makePreview(thumbSrc(idx + 1)); if(nextImg){ wrap.appendChild(nextImg); setPreviewX(nextImg, width); } }
    }
    function onMove(e){
      if(!dragging) return;
      var p = pt(e); var ax = p.clientX - startX; var ay = p.clientY - startY;
      if(locked === null){ if(Math.abs(ax) > 6 || Math.abs(ay) > 6){ locked = Math.abs(ax) > Math.abs(ay) ? 'x' : 'y'; } else return; }
      if(locked !== 'x') return;
      if(e.cancelable) e.preventDefault();
      dx = ax;
      var idx = activeIndex();
      if((idx === 0 && dx > 0 && !prevImg) || (idx === items.length - 1 && dx < 0 && !nextImg)) dx = dx * 0.3;
      setTrack(dx, false);
    }
    function onEnd(){
      if(!dragging) return;
      dragging = false;
      var idx = activeIndex();
      if(locked === 'x' && Math.abs(dx) > width * THRESHOLD_RATIO){
        var dir = dx < 0 ? 1 : -1; var nextIdx = idx + dir;
        if(nextIdx < 0 || nextIdx >= items.length){ setTrack(0, true); setTimeout(teardown, DUR_SLIDE); }
        else {
          var targetImg = dir > 0 ? nextImg : prevImg;
          setWrapH(targetHeight(targetImg));
          setTrack(-dir * width, true);
          setTimeout(function(){ applySrc(hero, thumbSrc(nextIdx)); setActive(nextIdx); hero.classList.remove('is-sliding'); setHeroX(0); teardown(); }, DUR_SLIDE);
        }
      } else { setTrack(0, true); setTimeout(teardown, DUR_SLIDE); }
      dx = 0; locked = null; startX = null;
    }

    hero.addEventListener('touchstart', onStart, {passive: true});
    hero.addEventListener('touchmove', onMove, {passive: false});
    hero.addEventListener('touchend', onEnd, {passive: true});
    hero.addEventListener('touchcancel', onEnd, {passive: true});
    hero.addEventListener('mousedown', function(e){ e.preventDefault(); onStart(e); });
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onEnd);

    hero.setAttribute('tabindex', '0');
    hero.addEventListener('keydown', function(e){
      var idx = activeIndex();
      if(e.key === 'ArrowLeft' && idx > 0){ e.preventDefault(); fadeSwap(idx - 1); }
      else if(e.key === 'ArrowRight' && idx < items.length - 1){ e.preventDefault(); fadeSwap(idx + 1); }
    });
  }
  if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', init); }
  else { init(); }
})();