const CYCLE_SPEED = 1500;
const HELIX_WIDTH = 300;
const SEGMENT_BUFFER = 0.2;
let btnHelixStart;
let helixIsInitted;
let helixIsRunning;
let startTime;
let pausedAtTime;
let segmentContainer;
let segments;
let stepStateLists;
let updateHandle;
let isPlaying;
let shiftyDemo;

const now = () => +(new Date());

const getPosition = (loopPosition, startBuffer) => {
  let moddedLoopPosition;
  let interpolator;
  let interpolatedValue;

  if ((loopPosition - startBuffer) < 0) {
    return 0;
  }

  interpolator = moddedLoopPosition = ((loopPosition - startBuffer) % 2);

  if (moddedLoopPosition > 1) {
    interpolator = moddedLoopPosition - 1;
  }

  interpolatedValue = shifty.interpolate(
    { left: 0 }, { left: HELIX_WIDTH }, interpolator, 'easeInOutSine');

  return moddedLoopPosition > 1 ? 
    { left: HELIX_WIDTH - interpolatedValue.left } : 
  interpolatedValue;
}

const updateSegment = (index, loopPosition) => {
  let segment = segments[index];
  let calculated = getPosition(loopPosition, index * SEGMENT_BUFFER);
  const { style } = segment;

  style.MozTransform = style.webkitTransform =
    `translateX(${parseFloat(calculated.left)}px)`;
}

const updateSegments = (startTime, callback) => {
  let timeDelta = now() - startTime;
  let normalizedTime = timeDelta / CYCLE_SPEED;

  for (let i = 0; i < segments.length; i++) {
    updateSegment(i, normalizedTime);
  }

  callback();
}

const loop = () => {
  updateHandle = setTimeout(function () {
    updateSegments(startTime, loop);
  }, 1000 / 60);
}

const pause = () => {
  if (!isPlaying) {
    return;
  }

  isPlaying = false;
  pausedAtTime = now();
  clearTimeout(updateHandle);
}

const play = () => {
  if (isPlaying) {
    return;
  }

  isPlaying = true;
  startTime = now() - (pausedAtTime - startTime);
  loop();
}

const init = containerId => {
  pausedAtTime = startTime = now();
  segmentContainer = document.getElementById(containerId);
  segments = segmentContainer.children;
  stepStateLists = [];

  for (let i = 0; i < segments.length; i++) {
    stepStateLists.push([])
  }

  window.pause = pause;
  window.play = play;
}

const toggleHelix = () => {
  if (!helixIsInitted) {
    helixIsInitted = true;
    shiftyDemo.helixInit('helix-container');
  }

  if (helixIsRunning) {
    shiftyDemo.helixPause();
    btnHelixStart.innerHTML = 'Go go helix!';
  } else {
    shiftyDemo.helixPlay();
    btnHelixStart.innerHTML = 'Stop stop helix!';
  }

  helixIsRunning = !helixIsRunning;
}

shiftyDemo = {
  helixInit: init,
  helixPlay: play,
  helixPause: pause
};

btnHelixStart = document.getElementById('btnHelixStart');
btnHelixStart.addEventListener('click', toggleHelix, true);
helixIsRunning = false;
helixIsInitted = false;