NodeList.prototype.forEach = Array.prototype.forEach;

var container = document.getElementById("container");
var endZone   = document.getElementById("end-zone");
var letters   = document.querySelectorAll(".letter > div");
var width     = document.querySelector(".letter").offsetWidth;
var bounds    = container.getBoundingClientRect();
var threshold = "50%";

// Create clones of each letter
letters.forEach(function(element, index) {
  
  var clone = element.cloneNode(true);
  var scope = { 
    wrapper : element.parentNode, 
    element : element, 
    clone   : clone,     
    placed  : false, 
    moved   : false 
  };
    
  clone.className = "cloned-letter";
  element.onmousedown = startDraggable;  
  
  TweenLite.set(clone, { autoAlpha: 0 });  
  container.insertBefore(clone, container.firstChild);    
    
  // Move the clone to the proper position and start draggable
  function startDraggable(event) {
    var position  = element.getBoundingClientRect();
    var draggable = scope.draggable || createDraggable(scope);  
        
    scope.x = position.left - bounds.left - 1;
    scope.y = position.top  - bounds.top  - 1;
    
    TweenLite.set(element, { scale: 0, autoAlpha: 0 });
    TweenLite.set(clone, { x: scope.x, y: scope.y, zIndex: 1000, autoAlpha: 1 });
    
  	draggable.startDrag(event);
  }
});

function createDraggable(scope) {
    
  var clone   = scope.clone;
  var wrapper = scope.wrapper;  
  
  scope.draggable = new Draggable(clone, {
    onPress   : changeStyle,
    onDrag    : checkPosition,
    onRelease : snapPosition
  });
  
  return scope.draggable;
  
  function changeStyle() {
    TweenLite.to(clone, 0.15, { scale: 1.2, autoAlpha: 0.75 });
  }
  
  function checkPosition() {
    if (!scope.moved) {
      if (!this.hitTest(wrapper)) {
        scope.moved = true;
        TweenLite.to(wrapper, 0.3, { width: 0 });
      }
    }
  }
  
  function snapPosition() {
    this.hitTest(endZone, threshold) && !scope.placed ? addToZone(scope) : moveBack(scope);
  }
}

function addToZone(scope) {  
  scope.placed = true;
  
  var clone   = scope.clone;
  var wrapper = scope.wrapper;
  var element = scope.element;
    
  endZone.appendChild(wrapper);
  TweenLite.set(wrapper, { width: width });
        
  var clonePosition   = clone.getBoundingClientRect();
  var wrapperPosition = wrapper.getBoundingClientRect();  
  var x = clonePosition.left - wrapperPosition.left;
  var y = clonePosition.top  - wrapperPosition.top;
  
  TweenLite.set(clone, { autoAlpha: 0, scale: 1 });  
  TweenLite.set(element, { x: x, y: y, scale: 1.2, autoAlpha: 0.75 });  
  TweenLite.to([element, clone], 0.3, { className: "+=placed" });
  TweenLite.to(element, 0.3, { scale: 1, autoAlpha: 1, x: 0, y: 0, onComplete: done });
  
  function done() {
    scope.moved = false;
  }
}

function moveBack(scope) {
    
  var clone   = scope.clone;
  var element = scope.element;
  var wrapper = scope.wrapper;  
  
  TweenLite.to(wrapper, 0.2, { width: width });
  TweenLite.to(clone, 0.3, { scale: 1, autoAlpha: 1, x: scope.x, y: scope.y, onComplete: done });
  
  function done() {
    scope.moved = false;
    TweenLite.set(clone, { autoAlpha: 0, scale: 1 });
    TweenLite.set(element, { scale: 1, autoAlpha: 1 });
  }
}