// Variables
var mouseX = 0;
var mouseY = 0;
var mouseMoved = false;



// LERP || Linear Interpolation
function lerp(A, B, t) {
  // A = Starting position
  // B = Final position
  // t = time or percentage A and B i.e. 0.0 to 1.0
  return A + t * (B - A);
}



// Mouse Events
function handleMouseMove() {
  mouseMoved = true;
  mouseX = event.clientX;
  mouseY = event.clientY;
}
document.onmousemove = handleMouseMove;



// Construct Transform
function setTransform(element, dx, dy) {
  var transform = "translateX(" + (dx) + "px) translateY(" + (dy) + "px)";
  element.style.webkitTransform = transform;
  element.style.mozTransform = transform;
  element.style.msTransform = transform;
  element.style.oTransform = transform;
  element.style.transform = transform;  
}



// Tracking
function followMouse(element, t) {
  // Determine Start Position
  var startX = element.getBoundingClientRect().left;
  var startY = element.getBoundingClientRect().top;
  
  // Determine End Position
  var targetX = mouseX - element.offsetWidth / 2;
  var targetY = mouseY - element.offsetHeight / 2;
  
  // Determine LERP position
  var newX = lerp(startX, targetX, t);
  var newY = lerp(startY, targetY, t);
  
  // Set Position using Transforms
  setTransform(element, newX, newY);
}



// Set Position
function setPosition(element, target) {
  // Determine Position
  var targetX = target.offsetWidth / 2 - element.offsetWidth / 2;
  var targetY = target.offsetHeight / 2 - element.offsetHeight / 2;
  
  // Set Position using Transforms
  setTransform(element, targetX, targetY);  
}



// Animation
/* requestAnimationFram, or "RAF", ensures animations 
are NOT directly connected to frames. This means that 
animation draws happen smoothly, at the correct time,
and without dropping 'frames'. */
window.requestAnimationFrame(draw); // Initial 'draw' call  
function draw() {
  if (mouseMoved) {
    followMouse(el1, 0.1);
    followMouse(el2, 0.3);    
  }
  window.requestAnimationFrame(draw); // 'draw' calls itself so it can keep drawing without firing again.
}



// Handle Load
window.onload = function() {
  var el1 = document.getElementById("el1");
  var el2 = document.getElementById("el2");
  var viewport = document.body;

  // Set Initial Positions
  setPosition(el1, viewport);
  setPosition(el2, viewport);
};