//Animation variables
var duration = 3000; //MS
var framesPerSec = 60;
var totalSec = duration/1000;
var steps = Math.floor(totalSec*framesPerSec);


//Vanilla JS easings 
//Copied from https://gist.github.com/gre/1650294
EasingFunctions = {
  // no easing, no acceleration
  linear: function (t) { return t },
  // accelerating from zero velocity
  easeInQuad: function (t) { return t*t },
  // decelerating to zero velocity
  easeOutQuad: function (t) { return t*(2-t) },
  // acceleration until halfway, then deceleration
  easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t },
  // accelerating from zero velocity 
  easeInCubic: function (t) { return t*t*t },
  // decelerating to zero velocity 
  easeOutCubic: function (t) { return (--t)*t*t+1 },
  // acceleration until halfway, then deceleration 
  easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 },
  // accelerating from zero velocity 
  easeInQuart: function (t) { return t*t*t*t },
  // decelerating to zero velocity 
  easeOutQuart: function (t) { return 1-(--t)*t*t*t },
  // acceleration until halfway, then deceleration
  easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t },
  // accelerating from zero velocity
  easeInQuint: function (t) { return t*t*t*t*t },
  // decelerating to zero velocity
  easeOutQuint: function (t) { return 1+(--t)*t*t*t*t },
  // acceleration until halfway, then deceleration 
  easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t }
}


//Function to get a easing
function getEasing(i) {
	i = i || 0;
	
	var easingArray = Object.keys(EasingFunctions);

	return easingArray[i%easingArray.length];
}


//Function to get a color
function getColor(i) {
	i = i || 0;
	
	var colorArray = [
		'#F68657',
		'#8CD790',
		'#A593E0',
		'#FFBC42',
		'#4FB0C6',
		'#F16B6F'
	];
	
	return colorArray[i%colorArray.length];
}


//Box object	
function Box(color, easing) {
	
	this.easing = easing || 'linear';
	this.color = color || 'blue';
	
	//Create box
	this.add = function () {
		
		var container = document.getElementById('container');
		
		var boxContainer = document.createElement('div');
		
		var title = document.createElement('div');
		title.classList.add(['title']);
		title.innerHTML = this.easing;
		
		var box = document.createElement('div');
		box.classList.add(['box']);
		box.style.background = this.color;
		box.title = this.easing;
		box.addEventListener('mouseover', animate);
		
		boxContainer.append(title);
		boxContainer.append(box);
		container.append(boxContainer);
	}
}


//Create boxes
var boxQuantity = Object.keys(EasingFunctions).length;
for (var i = 0; i < boxQuantity; i++) {
	var color = getColor(i);
	var easing = getEasing(i);
	var box = new Box(color, easing);
	box.add();
}


//Animate
function animate(event) {
	
	var easing = event.target.title;
	
	var boxObject = {
		target: event.target,
		easing: EasingFunctions[easing],
		itterations: steps,
		progress: 0,
		deg: 0,
	}
	
	animationLoop(boxObject);
}

function animationLoop(boxObject) {
	
	boxObject.itterations--;
	boxObject.progress = 1 - (boxObject.itterations/steps);
	
	/**This is where the easing is applied**/
	boxObject.deg = 360*boxObject.easing( boxObject.progress );
	
	boxObject.target.style.transform = "rotate("+boxObject.deg+"deg)";
		
   setTimeout(function() {	
      if (boxObject.itterations) {
			animationLoop(boxObject);
		}
   }, (duration/steps));
}