// Inspired by this great Dribbble by JT Grauke:
// https://dribbble.com/shots/5711542-kinetic-magnetic-dot

const boxes = [...document.querySelectorAll('.box')];
const dot = document.querySelector('.dot');
const container = document.querySelector('.container');
const rect = container.getBoundingClientRect();
const coords = {
  x: [0, Math.round(rect.width / 4), Math.round(3 * rect.width / 4), rect.width],
  y: [0, Math.round(rect.height / 2), rect.height]
};
const pos = {x: coords.x[0] + rect.left, y: coords.y[0] + rect.top};

// Move the dot to the given coordinates, rotating
// all the boxes so that they are facing the given coordinates
const moveDot = (x, y) => {
  // Position the dot
  dot.style.top = `${y}px`;
  dot.style.left = `${x}px`;
  pos.x = x;
  pos.y = y;
  
  // Rotate all the boxes
  boxes.forEach(box => {
    const {top, left, width, height} = box.getBoundingClientRect();
    const adjacent = x - left - width / 2;
    const opposite = y - top - height / 2;
    
    // arctan gives us the degree based on the opposite & adjacent edges
    // of the triangle created between the box' center and the given
    // coordinates
    const radians = Math.atan(opposite / adjacent); 
    box.style.transform = `rotate(${radians}rad)`;
  });
};

const generateArray = length => [...new Array(length)].map((_, i) => i);
const random = arr => arr[Math.floor(Math.random() * arr.length)];

let animation;
let coordinate = 'x';
const prev = {x: 0, y: 0};

// Recursively animate the dot the a random set of coordinates
const animate = () => {
  const pool = generateArray(coords[coordinate].length);
  pool.splice(prev[coordinate], 1);
  const next = random(pool);
  prev[coordinate] = next;
  
  animation = TweenMax.to(pos, 1, {
    [coordinate]: coords[coordinate][next] + rect[coordinate],
    ease: Power2.easeInOut, 
    onUpdate: function() {
      moveDot(pos.x, pos.y);
    },
    onComplete: animate,
  });
  // Toggle the animated coordinate (animate a differen axis every time)
  coordinate = coordinate === 'x' ? 'y' : 'x';
}
animate();
const dAnimate = _.debounce(animate, 500);

// Stop animation on mouse move and follow the cursor until 
// it rests for 500ms, at which point the animation should
// start again
window.addEventListener('mousemove', ({x, y}) => {
  animation.kill();
  dAnimate();
  window.requestAnimationFrame(() => {
    moveDot(x, y);
  });
});