var stage = new createjs.StageGL("canvas");
stage.enableMouseOver(5);
createjs.Touch.enable(stage);
LabTemplate.setupStageResize(stage, handleResize);
stage.setClearColor("#000000")
function handleResize(event) {
  stage.updateViewport(stage.canvas.width, stage.canvas.height);
  stage.update();
}
createjs.Ticker.timingMode = "raf";

var m = new createjs.Point(),
    dragging = false,
    currentAvatar,
    yPos = 0.6,
    container,
    finishDrags=[],
    pacman,
    pieces = [];

    var queue = new createjs.LoadQueue(false, "https://lab.gskinner.com/codepen/ghosts/", true);
    var manifest = [{src:"ghost.png", id:"ghost"}, {src:"pacman.png", id:"pacman"}];
    queue.on("progress", handleProgress);
    queue.on("complete", handleLoad);
    queue.loadManifest(manifest);

    function handleProgress(event) {
        LabTemplate.loadProgress(event.progress);
    }

var ghostSS, pacmanSS;
function handleLoad(event) {
  var image = queue.getResult("pacman");
  createGhosts();
  pacmanSS = new createjs.SpriteSheet({
    images:[image],
    frames: {width:image.width,height:2,count:image.height/2}
  });
  createSprite(pacmanSS, image, true);

  LabTemplate.loadComplete();
  createjs.Ticker.on("tick", update);
  update();
  stage.update();
}

var ghosts = [];
function createGhosts() {  
  var image = queue.getResult("ghost"),
      sb = new createjs.SpriteSheetBuilder();
  
  for (var i=0, l=8; i<l; i++) {
    var ghost = new createjs.Bitmap(image),
        matrix = new createjs.ColorMatrix().adjustHue(360/l*i-180);
    ghost.filters = [new createjs.ColorMatrixFilter(matrix)];
    ghost.cache(0, 0, image.width, image.height);
    ghosts.push(new createjs.SpriteSheet({
        images:[ghost.cacheCanvas],
        frames: {width:image.width,height:2,count:image.height/2}
      }));               
  }

  for (var i=0; i<50; i++) {
    createSprite(ghosts[Math.random() * ghosts.length | 0], image, false);
  }
}

function createSprite(ss, image, isPacman) {
  container = new createjs.Container(ss);
  container.vx = container.vy = 0;
  container.mouseChildren = false;
  container.cursor = "pointer";

  var sprites = container.sprites = [],
      pos = new createjs.Point(
        Math.random() * (stage.canvas.width-100)+50|0, 
        Math.random()*(stage.canvas.height-200)+100|0);

  for (var i=0, l=image.height; i<l/2; i++) {
    var sprite = new createjs.Sprite(ss);
    sprite.gotoAndStop(i);
    sprite.x = pos.x;
    sprite.y = pos.y+i*2;
    sprite.regX = image.width/2;

    sprite.pacman = isPacman;
    if (isPacman) { pacman = sprite; }
    container.addChild(sprite);
    sprites.push(sprite);
    pieces.push(sprite);
  }
  stage.addChild(container);

  container.on("mousedown", startDrag);
  container.on("pressmove", handleDrag);
  container.on("pressup", handleRelease);
};

function startDrag(event) {
  if (currentAvatar) {
    // Shouldn't happen, but if you drag out the window, it will!
    handleRelease();
  }
  stage.enableMouseOver(0);
  currentAvatar = event.currentTarget;
  var index = finishDrags.indexOf(currentAvatar);
  if (index > -1) { finishDrags.splice(index, 1); }
  handleDrag(event);
  stage.addChild(currentAvatar);
  update();
}
function handleDrag(event) {
  m.setValues(event.stageX, event.stageY);
}
function handleRelease(event) {
  stage.enableMouseOver(5);
  finishDrags.push(currentAvatar);
  currentAvatar.target = m.clone();
  currentAvatar = null;
}

var active = true;
function deactivate(time) {
  if (time == null) { time = 3000; }
  setTimeout(function() {
    active = false;
  }, time);
  setTimeout(function() {
    active = true;
  }, time + 3000);
}

// Update the current drag
function update(event) {
  if (currentAvatar != null) {
    updateAvatar(currentAvatar, m);
  }
  for (var i = 0, l=finishDrags.length; i<l; i++) {
    updateAvatar(finishDrags[i]);
  }

  // Look
  for (var i = 0, l=pieces.length; i < l; i++) {
    var obj = pieces[i];
    if (obj.pacman) { continue; }
    obj.scaleX = (obj.x < pacman.x) ? 1 : -1;
  }

  if (!active) { return; }

  if (currentAvatar != null || finishDrags.length > 0) {
    stage.update(event);
  }
}

function updateAvatar(container, target) {

  if (container == null) { return; }

  var sprites = container.sprites,
      leftOver = 0;

  for (var i=0, l=sprites.length; i<l; i++) {

    var sprite = sprites[i];

    if (target == null) {
      target = container.target;
    }

    if (i == 0) {
      container.vx += (target.x - sprite.x) * 0.2;
      container.vy += (target.y + i - sprite.y) * 0.45;
      container.vx *= 0.8;
      container.vy *= 0.8;

      sprite.x += container.vx;
      sprite.y += container.vy;

      sprite.x = sprite.x + 0.5 | 0;
      sprite.y = sprite.y + 0.5 | 0;
    } else {
      sprite.x += (target.x - sprite.x) * 0.75;
      sprite.y += (target.y+2 - sprite.y) * 0.75;

      leftOver += Math.abs(target.y+1 - sprite.y) + Math.abs(target.x - sprite.x);
    }

    target = sprite;
  }

  // Stretch to fill
  for (var i=0, l=sprites.length-1; i<l; i++) {
    sprite = sprites[i];
    var nextKid = sprites[i+1];
    sprite.scaleY = (nextKid.y - sprite.y);
  }

  // Remove from list!
  if (container != currentAvatar && leftOver < 1) {
    var index = finishDrags.indexOf(container);
    finishDrags.splice(index, 1);
  }
}