"function"!=typeof Math.sign&&(Math.sign=function(a){a=+a;return 0===a||isNaN(a)?a:0<a?1:-1});

// exists because Mobile Safari re-uses touch events.
function cloneTouchList(tl) {
	if (!tl) {
    return null;
  }
  var out = [];
  for (var i = 0; i < tl.length; ++i) {
    var t = tl[i];
	  out.push({
      clientX: t.clientX,
      clientY: t.clientY,
      offsetX: t.offsetX,
      offsetY: t.offsetY,
      screenX: t.screenX,
      screenY: t.screenY
    });
  }
  return out;
};

var CLOUD_COUNT = 80;

function startClouds() {
  var parent = document.getElementById('clouds');
  var width = window.innerWidth;
  var height = window.innerHeight;
  var players = [];

  function buildCloud(i) {
    var cloud = document.createElement('div');
    cloud.className = 'cloud';
    parent.appendChild(cloud);

    var start = -40;
    var end = width + 40;
    var y = Math.random() * height;
  
    var player = cloud.animate([
      {transform: 'translate(' + start + 'px, ' + y + 'px)'},
      {transform: 'translate(' + end + 'px, ' + y + 'px)'}
    ], {
      duration: 10000,
      delay: i * 200,
      endDelay: i * 200,
      easing: 'ease-in-out',
      fill: 'both',
      iterations: Infinity
    });
    players.push(player);
  };

  for (var i = 0; i < CLOUD_COUNT; ++i) {
		buildCloud(i);
  }

  var startEvent, startEventTime;

  /** start event handler */
  function onStart(event) {
    startEvent = event;
    startEvent._touches = cloneTouchList(startEvent.touches);
    startEventTime = players[0].currentTime;
    console.info(startEventTime, 'start');
    players.forEach(function(p) { p.pause(); });
  }
  document.addEventListener('touchstart', onStart);
  document.addEventListener('mousedown', onStart);

  /** move handler */
  function onMove(event) {
    if (!startEvent) return;
    if (event.type == 'touchmove') event.preventDefault();
    var delta = eventDelta(startEvent, event);
    var updateTime = startEventTime + delta;
    console.debug('currentTime', updateTime);
    players.forEach(function(p) { p.currentTime = updateTime; });
  }
  document.addEventListener('touchmove', onMove);
  document.addEventListener('mousemove', onMove);

  /** end handler */
  function onEnd(event) {
    if (!startEvent) return;
    var playbackRate = Math.sign(eventDelta(startEvent, event));
    console.info(startEventTime, 'up', playbackRate);
    players.forEach(function(p) {
      p.playbackRate = playbackRate;
      p.play();
    });
    startEvent = null;
  }
  document.addEventListener('touchend', onEnd);
  document.addEventListener('mouseup', onEnd);
}

function eventDelta(startEvent, event) {
  if (startEvent.type == 'touchstart') {
	  var distance = startEvent._touches[0].screenX - event.changedTouches[0].screenX;
    return distance * 4;  // make touch event feel longer
  } else {
    return startEvent.clientX - event.clientX;
  }
}

document.addEventListener('DOMContentLoaded', startClouds, false);