//cue : highlight mouse click position
(function(){
  var cue = document.createElement('div'),
  pressed = false;
  cue.id = 'cue';
  document.body.appendChild(cue);
  var offset = cue.offsetWidth / 2;
  document.addEventListener( 'mousedown', function(ev) {
  document.body.classList.add('down');
  pressed = true;
  movecue( ev.pageX, ev.pageY );
}, false );
document.addEventListener( 'mouseup', function(ev) {
 document.body.classList.remove('down');
 pressed = false;
},  false );
function movecue( x, y ) {
  cue.style.left = x - offset + 'px';
  cue.style.top = y - offset + 'px';
}
document.addEventListener( 'mousemove', function(ev) {
  if (pressed) { movecue( ev.pageX, ev.pageY ); }
}, false );
})();
//********************
//app directive
angular
  .module("app", ["ngAnimate"])
  .directive("block", blockDirective)
  .animation(".block", blockAnimation);


//  Move The Block
function blockDirective($animate) {

  return {
    restrict: "EA",
    link: function(scope, element, attrs) {
      
      var radius = element[0].offsetWidth / 2;

      TweenMax.set(element, {
        x: window.innerWidth  / 2 - radius,
        y: window.innerHeight / 2 - radius
      });

      scope.moveblock = function($event) {

        $animate.animate(element, {}, {
          x: $event.pageX - radius,
          y: $event.pageY - radius
        });
      };
    }
  };
}
function blockAnimation() {

  return {
    animate: function(element, className, from, to, done) {

      TweenMax.to(element, 0.5, {
        x       : to.x,
        y       : to.y,
        ease    : Back.easeOut,
        force3D : true,
        onStart : done
      });
    }
  };
}