//adapted from Framer.js calculations, https://github.com/koenbok/Framer/ which match how some Adobe products expect inputs

  var Spring, SpringCurve, Springer, defaults;
  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

  defaults = {
    tension: 80,
    friction: 8,
    velocity: 0,
    speed: 1 / 60.0,
    tolerance: 0.1
  };

  function springAccelerationForState(state) {
    return (-state.tension * state.x) - (state.friction * state.v);
  }

  function springEvaluateState(initial) {
    var output = {
      dx: initial.v,
      dv: springAccelerationForState(initial)
    };
    return output;
  }

  function springEvaluateStateWithDerivative(initial, dt, derivative) {
    var state = {
      x: initial.x + derivative.dx * dt,
      v: initial.v + derivative.dv * dt,
      tension: initial.tension,
      friction: initial.friction
    };
    var output = {
      dx: state.v,
      dv: springAccelerationForState(state)
    };
    return output;
  }

  function springIntegrateState(state, speed) {
    var a, b, c, d, dvdt, dxdt;
    a = springEvaluateState(state);
    b = springEvaluateStateWithDerivative(state, speed * 0.5, a);
    c = springEvaluateStateWithDerivative(state, speed * 0.5, b);
    d = springEvaluateStateWithDerivative(state, speed, c);
    dxdt = 1.0 / 6.0 * (a.dx + 2.0 * (b.dx + c.dx) + d.dx);
    dvdt = 1.0 / 6.0 * (a.dv + 2.0 * (b.dv + c.dv) + d.dv);
    state.x = state.x + dxdt * speed;
    state.v = state.v + dvdt * speed;
    return state;
  }

  Spring = (function() {
    function Spring(args) {
      this.next = __bind(this.next, this);
      this.reset = __bind(this.reset, this);
      args = args || {};
      this.velocity = args.velocity || defaults.velocity;
      this.tension = args.tension || defaults.tension;
      this.friction = args.friction || defaults.friction;
      this.speed = args.speed || defaults.speed;
      this.tolerance = args.tolerance || defaults.tolerance;
      this.reset();
    }

    Spring.prototype.reset = function() {
      this.startValue = 0;
      this.currentValue = this.startValue;
      this.endValue = 100;
      this.moving = true;
      return this.moving;
    };

    Spring.prototype.next = function() {
      var targetValue = this.currentValue;
      var stateBefore = {
        x: targetValue - this.endValue,
        v: this.velocity,
        tension: this.tension,
        friction: this.friction
      };
      var stateAfter = springIntegrateState(stateBefore, this.speed);
      this.currentValue = this.endValue + stateAfter.x;
      var finalVelocity = stateAfter.v;
      var netFloat = stateAfter.x;
      var net1DVelocity = stateAfter.v;
      var netValueIsLow = Math.abs(netFloat) < this.tolerance;
      var netVelocityIsLow = Math.abs(net1DVelocity) < this.tolerance;
      var stopSpring = netValueIsLow && netVelocityIsLow;
      this.moving = !stopSpring;
      if (stopSpring) {
        finalVelocity = 0;
        this.currentValue = this.endValue;
      }
      this.velocity = finalVelocity;
      return this.currentValue;
    };

    Spring.prototype.all = function() {
      var count = 0,
          results = [];
      this.reset();
      while (this.moving) {
        if (count > 3000) {
          throw Error("Spring: too many values");
        }
        count++;
        results.push(this.next());
      }
      
      return results;
    };

    Spring.prototype.time = function() {
      return this.all().length * this.speed;
    };

    return Spring;

  })();

  SpringCurve = function(tension, friction, velocity, fps) {
    var spring;
    spring = new Spring({
      tension: tension,
      friction: friction,
      velocity: velocity,
      speed: 1 / fps
    });
    return spring.all();
  };

  Springer = (function() {
    function Keyframer(args) {
      args = args || {};
      args.initial = args.initial || {};
      args.result = args.result || {};
      this.tension = args.tension;
      this.friction = args.friction;
      this.animationName = args.animationName || ('animation' + Math.floor(Math.random() *100000));
      this.initial = {
        scale: args.initial.scale || 1,
        translateX: args.initial.translateX || 0,
        translateY: args.initial.translateY || 0,
        translateZ: args.initial.translateZ || 0,
      };
      this.result = {
        scale: args.result.scale || 1,
        translateX: args.result.translateX || 0,
        translateY: args.result.translateY || 0,
        translateZ: args.result.translateZ || 0,
      };
      this.staticTransform = args.staticTransform || '';
      //add distanceX and distanceY
      this.curve = SpringCurve(this.tension, this.friction);
      this.generate();
    }

    Keyframer.prototype.generate = function() {
      var length = this.curve.length;
      var animation = '';
      var animationw = '';
      var differences = {
        scale: this.result.scale - this.initial.scale,
        translateX: (this.result.translateX - this.initial.translateX),
        translateY: (this.result.translateY - this.initial.translateY),
        translateZ: (this.result.translateZ - this.initial.translateZ)
      };
      var frames = [{
        step: 0,
        scale: (this.initial.scale),
        translateX: this.initial.translateX + 'px',
        translateY: this.initial.translateY + 'px',
        translateZ: this.initial.translateZ + 'px'
      }];
      var isScale = (differences.scale !== 0);
      var isTranslate = (differences.translateX !== 0 ||
        differences.translateY !== 0 ||
        differences.translateZ !== 0);


      var originalDirection = true;

      for (var i = 1; i < length; ++i) {
        if ((originalDirection && this.curve[i] <= this.curve[i - 1])
          || (!originalDirection && this.curve[i] > this.curve[i - 1])) {
          frames.push({
            step: (i/length).toFixed(7),
            scale: this.initial.scale + (this.curve[i] / (100))*differences.scale,
            translateX: Math.round(this.initial.translateX + (parseFloat(differences.translateX) * this.curve[i]) / 100) + 'px',
            translateY: Math.round(this.initial.translateY + (parseFloat(differences.translateY) * this.curve[i]) / 100) + 'px',
            translateZ: Math.round(this.initial.translateZ + (parseFloat(differences.translateZ) * this.curve[i]) / 100) + 'px'
          });
          originalDirection = !originalDirection;
        }
      }
      
      frames.push( {
        step: 1,
        scale: this.result.scale,
        translateX: this.result.translateX+'px',
        translateY: this.result.translateY+'px',
        translateZ: this.result.translateZ+'px'
      });
      
      animation = [];

      for (var j = 0, l = frames.length; j < l; ++j) {
        var frame = frames[j];
        var animationStep = {
          offset: frame.step,
          transform: this.staticTransform +
          (isScale ? ' scale('+frame.scale+')' : '' )+
          (isTranslate ? ' translate3d('+frame.translateX+','+frame.translateY+','+frame.translateZ+')' : '' ),
          easing: 'ease-in-out'
        }
        animation.push(animationStep);
      }
      
      //replace this with Web animation api
      
      this.animationSteps = animation;
     /* if (frames && frames.length) {
        this.result = {
          x: frames[frames.length - 1].translateX,
          y: frames[frames.length - 1].translateY
        }
      }*/
    };

    return Keyframer;
  })();



//The code that uses the Keyframer above
var _friction = 2;
var translationElement = document.querySelector('p');
var animateAway = true;

function start(currentX, currentY) {
//console.log(currentX, currentY);
var width = window.innerWidth;
var height = window.outerHeight;

var newX = Math.floor(width * Math.random() / 2);
var newY = Math.floor(height * Math.random() / 2);

  var x = currentX || 0;
  var y = currentY || 0;
  
  var tension = Math.max(Math.abs(newX - currentX), Math.abs(newY - currentY))/10;
  
  if (animateAway) {
    var keyframer = new Springer({
      tension: tension,
      friction: _friction,
      animationName: 'spring-translate',
      initial: {
        translateX: x,
        translateY: y,
        translateZ: 0
      },
      result: {
        translateX: newX,
        translateY: newY,
        translateZ: 0
      }
    });
   //console.log(keyframer.animationSteps);
    var animation = translationElement.animate(keyframer.animationSteps, {
      duration: 800,
      iterations: 1,
      delay: 400,
      fill: 'forwards'
    });
    animation.onfinish = function() {
      //translationElement.style.transform = keyframer.animationSteps[keyframer.animationSteps.length - 1].transform;
      
      start(keyframer.result.translateX, keyframer.result.translateY);
    }
  }
}

start();