// preparation

var keyFramesRed = [
  {x:100,y:100,t:2}, // t equals time (not duration)
  {x:400,y:200,t:3},
  {x:300,y:300,t:4},
  {x:200,y:200,t:5},
  {x:500,y:100,t:6}
];
  
var keyFramesBlue = [
  {x:400,y:300,t:3},
  {x:200,y:200,t:5},
  {x: 50,y:300,t:7}
];

var curviness = 0.5; // 0 -> none, 1 -> max
var pointsPerSec = 10;
var pointLength = 1 / pointsPerSec; // should be globalStepSize (see function 'getCurvePoints' below)
var curvePointsRed = getCurvePoints(keyFramesRed, pointsPerSec, curviness);
var curvePointsBlue = getCurvePoints(keyFramesBlue, pointsPerSec, curviness);

console.log(curvePointsBlue);

// setting up the timeline(s)

TweenLite.defaultEase = Linear.easeNone;

var tlRed = new TimelineLite();
for (var i = 0; i < curvePointsRed.length; i++) {
  tlRed.add(TweenLite.to("#redBox", pointLength, curvePointsRed[i]));
}

var tlBlue = new TimelineLite();
for (var i = 0; i < curvePointsBlue.length; i++) {
  tlBlue.add(TweenLite.to("#blueBox", pointLength, curvePointsBlue[i]));
}

var tlMain = new TimelineLite({onUpdate:updateSlider});
tlMain.add(tlRed, keyFramesRed[0].t);
tlMain.add(TweenLite.to("#redBox", 0.0001, curvePointsRed[0]), keyFramesRed[0].t - 0.001);
tlMain.add(TweenLite.to("#redBox", 0.0001, {visibility:"visible"}), keyFramesRed[0].t);
tlMain.add(TweenLite.to("#redBox", 0.0001, {visibility:"hidden"}), keyFramesRed[keyFramesRed.length-1].t);

tlMain.add(tlBlue, keyFramesBlue[0].t);
tlMain.add(TweenLite.to("#blueBox", 0.0001, curvePointsBlue[0]), keyFramesRed[0].t - 0.001);
tlMain.add(TweenLite.to("#blueBox", 0.0001, {visibility:"visible"}), keyFramesBlue[0].t);
tlMain.add(TweenLite.to("#blueBox", 0.0001, {visibility:"hidden"}), keyFramesBlue[keyFramesBlue.length-1].t);

var tlMainDuration = 8;
tlMain.set({},{}, "+=" + (tlMainDuration - Math.max(keyFramesRed[keyFramesRed.length-1].t, keyFramesBlue[keyFramesBlue.length-1].t)))

// user interface

function updateSlider() {
  $("#slider").slider("value", tlMain.progress() *100);
}

$( "#slider" ).slider({
  range: false,
  min: 0,
  max: 100,
  step:.1,
  slide: function ( event, ui ) {
    tlMain.progress( ui.value/100 ).pause();
  }
}); 

$("#restart").on("click", function() {
  tlMain.restart();
})

// calculation

function getCurvePoints(keyframes, pointsPerSec, curviness) {
  var points = [];
  var lastIdx = Math.max(keyframes.length-1, 0);
  var totalDuration = keyframes[lastIdx].t - keyframes[0].t;
  var totalDivisions = Math.floor(totalDuration * pointsPerSec); // equals number of points
  var globalStepSize = totalDuration / totalDivisions; // almost '1 / pointsPerSec' but not quite,
                                                       // this makes sure that the last step ends
                                                       // exaclty on the last keyframe
  var offsetGlobal = 0; // stepsize minus remainder from previous curve segment
  
  for(var i = 0; i < lastIdx; i++) {
    var current   = keyframes[i];
    var next      = keyframes[i+1];
    var previous  = i > 0 ? keyframes[i-1] : current;
    var afterNext = i < lastIdx-1 ? keyframes[i+2] : next;
    
    var cpStart = {
      x:current.x + (next.x - previous.x) * 0.5 * curviness, // make sure that path passes through keyframes
      y:current.y + (next.y - previous.y) * 0.5 * curviness  // by creating additional control points for qubic bezier segment
    };
    var cpEnd = {
      x:next.x - (afterNext.x - current.x) * 0.5 * curviness, // control points are some kind of 'tangent' made up from 
      y:next.y - (afterNext.y - current.y) * 0.5 * curviness  // direction vector of neighboring keyframes
    };
    
    var segmentDuration = next.t - current.t;
    var segmentDivisions = Math.ceil(segmentDuration / globalStepSize);
    var localStepSize = globalStepSize / segmentDuration;
    var offsetLocal = offsetGlobal / segmentDuration;
    console.log(localStepSize + " " + segmentDivisions + " " + offsetLocal);
    for (var t = 0; t < segmentDivisions; t++) {
      points.push({
        x:bezier(current.x, cpStart.x, cpEnd.x, next.x, offsetLocal + t * localStepSize),
        y:bezier(current.y, cpStart.y, cpEnd.y, next.y, offsetLocal + t * localStepSize)
      });
    }

    offsetGlobal = (offsetGlobal + (segmentDivisions * globalStepSize - segmentDuration)) % globalStepSize;
  }
  return points;
}

function bezier(a, b, c, d, t) {
  return  (1 - t) * (1 - t) * (1 - t)              * a
    + 3 * (1 - t) * (1 - t)           * t          * b
    + 3 * (1 - t) *                    (t * t)     * c
    +                                  (t * t * t) * d;
}