// I'm using velocityjs because I want to make this into something more than a follow demo eventually and will fork this pen
jQuery(document).ready(function ($) {
  var mid = {
    x: $(window).outerWidth() / 2,
    y: $(window).outerHeight() / 2
  };
  var title = $('.title');
  var ogMouseCoords = $('.og .mouse-coords');
  var ogTitleCoords = $('.og .title-coords');
  var newMouseCoords = $('.new .mouse-coords');
  var newTitleCoords = $('.new .title-coords');
  
  $(document).on('mousemove', function (e) {
    title.velocity("stop");
    
    var mouse = {
      x: e.clientX,
      y: e.clientY,
    }
    
    var titleLeft = -mouse.x + mid.x*2 - title.outerWidth()/2;
    var titleTop  = -mouse.y + mid.y*2;
    
    ogMouseCoords.text("Mouse: (" + mouse.x  + ", " + -mouse.y + ")");
    ogTitleCoords.text("Title: (" + titleLeft + ", " +  titleTop + ")");
    newMouseCoords.text("Mouse: (" + (mouse.x - mid.x)  + ", " + (-mouse.y + mid.y) + ")")
    newTitleCoords.text("Title: (" + (mid.x - mouse.x) + ", " +  (mouse.y - mid.y) + ")")
   
    title.velocity({left: titleLeft, top: titleTop}, 1);

  });
  
  $(window).on('resize', function () {
    mid = {
      x: $(window).outerWidth() / 2,
      y: $(window).outerHeight() / 2
    };
  })
});