//refresh when the ball is out of sight
var ease = 0.15;

var speelVeld = document.querySelector("#speelVeld");
var moveX = document.querySelector("#moveX");
var moveY = document.querySelector("#moveY");
var bg = document.querySelector("#speelveldClick");

var mouse = speelVeld.createSVGPoint();
var pos = { x: 0, y: 0 };

var fieldBox = speelVeld.getBBox();
var Xbox = moveX.getBBox();
var Ybox = moveY.getBBox();
var viewXhalf = fieldBox.width/2;
var viewYhalf = fieldBox.height/2;
var xboxHalf = Xbox.width/4;
var yboxHalf = Ybox.height/4;

var ball = document.querySelector("#ball");
var ballBox = ball.getBBox();
var setBall = ballBox.width/2;
var tlBall = new TimelineMax();

/*
var tlX = new TimelineMax();
var tlY = new TimelineMax();

window.onload = function(e){
    
  tlX.set(moveX, {
    x: viewXhalf-xboxHalf
  });

  tlY.set(moveY, {
    y: viewYhalf-yboxHalf
  });
}
*/

bg.onclick = function(e){
    mouse.x = e.clientX;
    mouse.y = e.clientY;
};


TweenMax.ticker.addEventListener("tick", update);
function update() {
 
var point = mouse.matrixTransform(speelVeld.getScreenCTM().inverse());
  
  pos.x += (point.x - pos.x) * ease; 
  pos.y += (point.y - pos.y) * ease;
  
  TweenLite.set(moveX, {
    x: pos.x
  });

  TweenLite.set(moveY, {
    y: pos.y
  });
}

TweenMax.ticker.addEventListener("tick", mBall);
function mBall() {
tlBall
  .set(ball, {x: setBall ++}); //is there a way to speed this up?
}


//below is a quick attempt to reset the ball if it's beyond the viewbox of the svg; I did not figure out yet how to do that 

/*
function resetBall(){
if ballBox.x => fieldBox.x{
  tlBall.kill();
  }
}
*/