(function () {
  var es = new EventSource(String(window.location) + '/events');
  var speed = 0;
  var lastTick = Date.now();
  var lastPosition = 0;

  document.addEventListener('DOMContentLoaded', function () {
    es.addEventListener('content', function (event) {
      window.location.reload();
    });

    es.addEventListener('position', function (event) {
      var data = JSON.parse(event.data);

      lastPosition = data.y;
    });

    es.addEventListener('speed', function (event) {
      var data = JSON.parse(event.data);

      speed = data.speed;
      //
      // console.log('SPEED:', data.speed);
      //
      // var content = document.getElementById('content');
      //
      // if (data.speed === 0) {
      //   console.log('STOP:', content.getBoundingClientRect().top);
      //   content.style.transform = 'translate3d(0, -' + content.getBoundingClientRect().top + 'px, 0)';
      //   content.style.transition = 'none';
      //   return;
      // }
      //
      // var rect = content.getBoundingClientRect();
      // var direction = data.speed / Math.abs(data.speed);
      // var duration = 1 / Math.abs(data.speed) * (rect.height / 1000);
      //
      // console.log('DURATION:', duration);
      // // console.log('TOP:', -1 * (direction * 0.5 + 0.5) * rect.height + 'px');
      //
      // content.style.transition = 'all linear ' + duration + 's';
      // content.style.transform = 'translate3d(0, -100%, 0)';
      // // content.style.top = '1px';
      // // content.style.top = -1 * (direction * 0.5 + 0.5) * rect.height + 'px';
    });

    document.querySelector('.flip-button').addEventListener('click', function () {
      var contentContainer = document.querySelector('.content-container');

      if (contentContainer.classList.contains('flip-y')) {
        contentContainer.classList.remove('flip-y');
      } else {
        contentContainer.classList.add('flip-y');
      }
    });

    // setTimeout(function () {
    //   var content = document.getElementById('content');
    //
    //   // var diff = Date.now() - lastTick;
    //   // var top = lastPosition + speed * 300 * (diff / 1000);
    //   //
    //   // lastTick = Date.now();
    //   // lastPosition = top;
    //   //
    //   content.style.transition = 'all linear ' + 10000 + 'ms';
    //   setTimeout(function () {
    //     content.style.transform = 'translateY(-100%) translateZ(0)';
    //     // content.style.bottom = '100%';
    //     // content.style.top = -1 * content.getBoundingClientRect().height + 'px';
    //     // content.classList.add('done');
    //   },1000);
    //
    //   setTimeout(function () {
    //     // content.style.transition = 'all linear ' + 100000 + 'ms';
    //     // content.style.bottom = '99%';
    //     // content.style.bottom = '101%';
    //     // content.style.top = -1 * content.getBoundingClientRect().height + 'px';
    //     // content.classList.add('done');
    //   },2000);
    // }, 1000);
    //
    // var content = document.getElementById('content');
    // speed = 0.5;

    setInterval(function () {
      var diff = Date.now() - lastTick;
      var top = lastPosition + speed * 300 * (diff / 1000);

      lastTick = Date.now();
      lastPosition = top;

      if (top > content.getBoundingClientRect().height) {
        top = content.getBoundingClientRect().height;
      }

      content.style.transition = 'all linear ' + diff + 'ms';
      content.style.transform = 'translate3d(0, -' + top + 'px, 0)';
      content.style.WebkitTransform = 'translate3d(0, -' + top + 'px, 0)';
    }, 100);
  });
}());
