// Based on the work of Kevin Doughty
// https://github.com/kevindoughty/Hypermatic/tree/gh-pages
// https://github.com/KevinDoughty/Hypermatic
// http://kxdx.org
// https://twitter.com/KvnDy

// Custom Easing by Matt Gallagher, used with permission!
// http://www.cocoawithlove.com/2008/09/parametric-acceleration-curves-in-core.html 
// https://twitter.com/cocoawithlove

function demo() {

  var container = new Container($("#container"));  

  for (var i = 0; i < size; i++) {    
    var node  = createElement("li", container.node);
    var color = `hsla(${i / size * 360}, 100%, 50%, 0.8)`;
    var child = new Box(node, { background: color });
    container.addChild(child);
  }  
  
  var render = container.render.bind(container);
  var resize = container.resize.bind(container);
  var update = container.update.bind(container);
  
  Draggable.create(createElement("div"), {
    trigger: document,
    onPress: resize,
    onDrag:  resize
  }); 

  window.addEventListener("resize", update);
  
  TweenLite.ticker.addEventListener("tick", render);
  
  TweenLite.set(container.node, { autoAlpha: 1 });
}

//
// CUSTOM EASE
// ===========================================================================
class CustomEase extends Ease {  

  constructor(omega = 10, zeta = 0.75) {
    super();
    this.omega = omega;
    this.zeta  = zeta;
  }  
  
  getRatio(progress) {
    
    var omega = this.omega;
    var zeta  = this.zeta;
    var beta  = Math.sqrt(1.0 - zeta * zeta);
    
    progress = 1 - Math.cos(progress * Math.PI / 2);   
    progress = 1 / beta * 
      Math.exp(-zeta * omega * progress) * 
      Math.sin( beta * omega * progress + Math.atan(beta / zeta));
    
    return 1 - progress;
  }  
}

//                           
// CONTAINER
// ===========================================================================
class Container {

  constructor(node) {
    
    this.node  = node;
    this.ratio = 0.8553971486761711;
    this.width = body.offsetWidth * this.ratio;
    
    this.children = new LinkedList();   
  }
  
  set width(w) { this.node.style.width = w + "px"; }

  addChild(child) {
    this.children.add(child);
    return this;
  }

  layout() {
    
    var size  = this.children.size;
    var child = this.children.first;
    
    while (size--) {
      child.layout();
      child = child.next;
    }    
  }
  
  resize(event) {    
    
    var w = body.offsetWidth;
    var x = event.clientX;
    
    this.width = clamp(x, 1, w);    
    this.ratio = x / w;
    this.layout();
  }
  
  render() {
    var size  = this.children.size;
    var child = this.children.first;
    
    while (size--) {
      child.render();
      child = child.next;
    }    
  }
  
  update(event) { 
    this.width = body.offsetWidth * this.ratio;
    this.layout();
  }
}

//
// TWEEN
// ===========================================================================
class Tween {
  
  constructor(duration, config) {
        
    this.x = 0;
    this.y = 0;  
    
    this.tween = TweenLite.from(this, duration, config);
  }
}

//
// BOX
// ===========================================================================
class Box {

  constructor(node, config) {

    this.node = node;    
    
    TweenLite.set(node, config);

    this.x = this.node.offsetLeft;
    this.y = this.node.offsetTop;
    
    this.tweens = new LinkedList();
  }
  
  layout() {
    
    var x  = this.x;
    var y  = this.y;    
    
    this.x = this.node.offsetLeft;
    this.y = this.node.offsetTop;
        
    if (x === this.x && y === this.y) return this;   
        
    var dx = x - this.x;
    var dy = y - this.y;
        
    var tween = new Tween(duration, { 
      x: dx, 
      y: dy, 
      ease, 
      onComplete: () => this.removeTween(tween) 
    });
       
    if (!this.tweens.size) {
      TweenLite.set(this.node, { x: dx, y: dy });
    }
    
    this.tweens.add(tween);
    
    return this;
  }

  removeTween(tween) {
    this.tweens.remove(tween);    
    return this;
  }

  render() {

    var size = this.tweens.size;

    if (!size) return;
 
    var tween = this.tweens.first;   

    var x = 0;
    var y = 0;
        
    while (size--) {
      x += tween.x;
      y += tween.y;
      tween = tween.next;
    }

    TweenLite.set(this.node, { x, y });
    return this;
  }
}

//
// LINKED LIST
// ===========================================================================
// class LinkedList {

//   constructor() {

//     // Alias
//     this.add = this.append;
//     this.clear();
//   }

//   get isEmpty() { return !this.size && !this.first && !this.last; }

//   static fromArray(array) {

//     var list = new LinkedList();
//     var size = array.length;

//     while (size--) list.prepend(array[size]);
//     return list;
//   }

//   clear() {

//     this.size  = 0;
//     this.first = null;
//     this.last  = null;
//     this.next  = null;
//     this.prev  = null;

//     return this;
//   }

//   get(i) {

//     if (this.isEmpty) return null;

//     var node = this.first;
//     var size = i % this.size;

//     while (size--) node = node.next;
//     return node;
//   }

//   random() {

//     var n = Math.random() * this.size >> 0;
//     return this.get(n);
//   }

//   toArray() {

//     var array = [];
//     var node  = this.first;
//     var size  = this.size;

//     while (size--) {
//       array.push(node);
//       node = node.next;
//     }

//     return array;
//   }

//   forEach(callback, scope) {

//     var node = this.first;
//     var size = this.size;

//     for (var i = 0; i < size; i++) {
//       callback.call(scope, node, i);
//       node = node.next;
//     }
//   }

//   append(node) {

//     if (this.first === null) {

//       node.prev = node;
//       node.next = node;

//       this.first = node;
//       this.last  = node;
//       this.next  = node;

//     } else {

//       node.prev = this.last;
//       node.next = this.first;

//       this.last.next = node;
//       this.last      = node;
//     }

//     this.size++;
//     return node;
//   }

//   prepend(node) {

//     if (this.first === null) {

//       return this.append(node);

//     } else {

//       node.prev = this.last;
//       node.next = this.first;

//       this.first.prev = node;
//       this.last.next  = node;
//       this.first      = node;
//     }

//     this.size++;
//     return node;
//   }

//   remove(node) {

//     if (this.size > 1) {

//       node.prev.next = node.next;
//       node.next.prev = node.prev;

//       if (node === this.first) this.first = node.next;
//       if (node === this.last)  this.last = node.prev;

//     } else {

//       this.first = null;
//       this.last  = null;
//     }

//     node.prev = null;
//     node.next = null;

//     this.size--;    
//     return node;
//   }

//   insertBefore(node, newNode) {

//     newNode.prev = node.prev;
//     newNode.next = node;

//     node.prev.next = newNode;
//     node.prev      = newNode;

//     if (newNode.next === this.first) this.first = newNode;

//     this.size++;
//     return newNode;
//   }

//   insertAfter(node, newNode) {

//     newNode.prev = node;
//     newNode.next = node.next;

//     node.next.prev = newNode;
//     node.next      = newNode;

//     if (newNode.prev === this.last) this.last = newNode;

//     this.size++;
//     return newNode;
//   }
// }

function clamp(value, min, max) {
  return value < min ? min : (value > max ? max : value);
}

function createElement(type, parent) {
  var node = document.createElement(type);
  parent && parent.appendChild(node);
  return node;
}

// ===========================================================================
var $   = document.querySelector.bind(document);
var $$  = document.querySelectorAll.bind(document);
var log = console.log.bind(console);

var body = document.body;
var ease = new CustomEase(10, 0.9);
var size = 256;

var duration  = 1;

demo();