console.clear();

var line = document.querySelector("#line");
var circle1 = document.querySelector("#circle1");
var circle2 = document.querySelector("#circle2");
var circle3 = document.querySelector("#circle3");

var count = 0;

var p1 = { x: 300, y: 200 };
var p2 = { x: 300, y: 200 };
var radius = { x: 100, y: 100 };

TweenLite.set(circle1, { attr: { cx: p1.x, cy: p1.y }});
TweenLite.set(circle2, { attr: { cx: p2.x, cy: p2.y }});
TweenLite.set(circle3, { attr: { cx: p2.x, cy: p2.y, rx: radius.x, ry: radius.y }});
TweenLite.set(line, { attr: { x1: p1.x, y1: p1.y, x2: p2.x, y2: p2.y }});

var tl = new TimelineMax({ repeat: -1, repeatDelay: 1.5, yoyo: true })
  .to(circle3, 5, { attr: { cx: 550, rx: 125, ry: 50 }, ease: Power1.easeInOut }, 0)
  .to(radius, 5, { x: 125, y: 50, ease: Power1.easeInOut }, 0)
  .to(p2, 5, { x: 550, ease: Power1.easeInOut  }, 0)

TweenLite.ticker.addEventListener("tick", update);

function update() {
  
  count += 0.1;
  
  // Calculate x/y based on some distance and angle
  // sin and cos will always return a value in the range [-1,1]
  // so its just a ratio, a percent as a decimal
  // Notice how I'm increasing count on every tick, and it works out the same on every cycle
  // This is how I remember that sine is for y axis: wh(y) sin? Because it looks like the
  // religious word sin. Stupid? Yeah. But it helps me remember it  
  var cx = p2.x + Math.cos(count * 0.5) * radius.x;
  var cy = p2.y + Math.sin(count * 0.5) * radius.y;
    
  // Huh? Alternate way of doing circle2.setAttribute("cx", cx);
  // Setting values directly is faster
  circle2.cx.baseVal.value = cx;
  circle2.cy.baseVal.value = cy;
  
  // We already know the x/y values from above so the following
  // calculations are redundant. Just showing how it's done
  
  // Delta values, change in x/y
  var dx = cx - p1.x;
  var dy = cy - p1.y;
  
  // Angle formula. Notice dy is the first parameter
  var angle = Math.atan2(dy, dx);
  
  // Distance formula
  var dist = Math.sqrt(dx * dx + dy * dy);
    
  // Again, calculate x/y based on some distance and angle
  var x2 = p1.x + Math.cos(angle) * dist;
  var y2 = p1.y + Math.sin(angle) * dist;
  
  line.x2.baseVal.value = x2;
  line.y2.baseVal.value = y2;  
}