const container = document.getElementById('slides');
const frame = document.getElementById('frame');

// touch and mouse are different events
const startDragEvents = ['mousedown', 'touchstart'];
const doDragEvents = ['mousemove', 'touchmove'];
const stopDragEvents = ['mouseup', 'mouseleave', 'touchstop', 'touchcancel', 'touchend'];

const width = 3; // slides per row
const height = 3; // slides per column

// cursor position during drag
const pos = { top: 0, left: 0, x: 0, y: 0 };
let curPaneX = 1, // start on center slide
    curPaneY = 1;
const dragThreshold = 80; // drag more pixels than that and we scroll to the next pane

// get first pointer, also in case of multi touch
const getPoint = e => e.changedTouches?.[0] || e;

const scrollToPane = (x, y) => {
  curPaneX = Math.min(Math.max(0, x), width-1);
  curPaneY = Math.min(Math.max(0, y), height-1);
  scrollIntoView(curPaneX, curPaneY);
}

let curTranslateX = 0, curTranslateY = 0;
const scrollIntoView = (x, y) => {
  const panelWidth = frame.offsetWidth;
  const panelHeight = frame.offsetHeight;
  curTranslateX = x*-panelWidth;
  curTranslateY = y*-panelHeight;
  container.style.transform = 
    `translate(${curTranslateX}px, ${curTranslateY}px)`;
}

const doDrag = e => {
  e.preventDefault();
  e = getPoint(e);
  // How far the mouse has been moved
  const dx = e.clientX - pos.x;
  const dy = e.clientY - pos.y;
  container.style.transform = 
    `translate(${curTranslateX + dx}px, ${curTranslateY + dy}px)`;
}

const scrollToBestPane = e => {
  const offsetX = e.clientX - pos.x;
  const offsetY = e.clientY - pos.y;
  if (curPaneX < (width - 1) && offsetX < -dragThreshold) curPaneX++;
  else if (curPaneX > 0 && offsetX > dragThreshold) curPaneX--;
  if (curPaneY < (height - 1) && offsetY < -dragThreshold) curPaneY++;
  else if (curPaneY > 0 && offsetY > dragThreshold) curPaneY--;
  scrollToPane(curPaneX, curPaneY);
}

    // start drag: save start point
  const startDrag = e => {
    e.preventDefault();
    e = getPoint(e);
    frame.style.cursor = 'grabbing';
    // The current scroll
    pos.left = container.scrollLeft;
    pos.top = container.scrollTop;
    // Get the current mouse position
    pos.x = e.clientX;
    pos.y = e.clientY;
    
    doDragEvents.forEach(n => frame.addEventListener(n, doDrag));
    stopDragEvents.forEach(n => frame.addEventListener(n, stopDrag));
  };


  
const stopDrag = e => {
  e.preventDefault();
  e = getPoint(e);
  frame.style.cursor = 'grab';
  doDragEvents.forEach(n => frame.removeEventListener(n, doDrag));
  stopDragEvents.forEach(n => frame.removeEventListener(n, stopDrag));
  scrollToBestPane(e);
}

startDragEvents.forEach(n => frame.addEventListener(n, startDrag));
scrollToPane(curPaneX, curPaneY); // init in the center