createjs.Tween.get(target)
        .to({x: 200}, 100, createjs.Ease.cubicInOut)
        .call(function(){ console.log("finish tween"); });

(function(){
  var mView = null,
  stage = null,
  particleStage = null,
  particles = [],
  baseParticles = [],
  stageNamePattern = {
    START: 0,
    SHOW:  1,
    MOVE:  2
  },
  stageName = stageNamePattern.START,
  imgFile = null,
  mousePoint = new createjs.Point(),
  MOUSE_BOUNDS_RADIUS = 200,
  isBound = false,
  isClick = false,
  // 2点から直角三角形3辺の長さを求める
  calcuSides = function(basePoint, targetPoint) {
    var _x, _y, _z;
    _x = Math.abs(basePoint.x - targetPoint.x);
    _y = Math.abs(basePoint.y - targetPoint.y);
    _z = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2));
    return { x: _x, y: _y,  z: _z };
  },
  // 2辺の長さからsinθを求める
  calcu2PointSin = function(basePoint, targetPoint) {
    var sides, sin;
    sides = calcuSides(basePoint, targetPoint);
    sin = sides.y / sides.z;
    if (basePoint.y > targetPoint.y) {
      sin *= -1;
    }
    return sin;
  },
  // 2辺の長さからcosθを求める
  calcu2PointCos = function(basePoint, targetPoint) {
    var cos, sides;
    sides = calcuSides(basePoint, targetPoint);
    cos = sides.x / sides.z;
    if (basePoint.x > targetPoint.x) {
      cos *= -1;
    }
    return cos;
  },
  // 画像情報からRGBの合計値が700以上の箇所のピクセルデータを取得する
  createLocationData = function(imgMap) {
    var buket, height, imgData, index, results, width, x, y;
    imgData = imgMap.data;
    width = imgFile.width;
    height = imgFile.height;
    y = 0;
    results = [];
    while (y < height) {
      x = 0;
      while (x < width) {
        // 配列の格納順が [r, g, b, alpha, r, g, b, alpha...] という順番で格納されているので、4つ分ずらしている。
        index = (x + y * width) * 4;
        // rgbの合計値が700以下のピクセルだった場合に取得
        if (700 > imgData[index + 0] + imgData[index + 1] + imgData[index + 2]) {
          buket = {
            x: x + (mView.width() / 2) - (imgFile.width / 2),
            y: y + (mView.height() / 2) - (imgFile.height / 2),
            baseX: x,
            baseY: y,
            r: imgData[index + 0],
            g: imgData[index + 1],
            b: imgData[index + 2],
            alpha: imgData[index + 3],
            tweenX: false,
            tweenY: false,
            scale: Math.random() * 1 + .5,
            bound: false
          };
          baseParticles.push(buket);
        }
        x += 7;
      }
      results.push(y += 7);
    }
    return results;
  },
  // ポコポコと泡っぽくパーテクルを表示させるときのTween
  showParticles = function() {
    var circle, i, index, len, particleCount, results, scale;
    if (stageName === stageNamePattern.START) {
      stageName = stageNamePattern.SHOW;
      particleCount = 0;
      results = [];
      for (index = i = 0, len = particles.length; i < len; index = ++i) {
        circle = particles[index];
        circle.scaleX = 0;
        circle.scaleY = 0;
        scale = baseParticles[index].scale;
        results.push(createjs.Tween.get(circle).wait(Math.random() * 500 + 500).to({
          scaleX: scale,
          scaleY: scale
        }, Math.random() * 2000 + 1000, createjs.Ease.getElasticOut(Math.random() * 5 + 1, Math.random() * .25 + .1)).call(function() {
          particleCount++;
          if (particleCount === particles.length) {
            return setTimeout(function() {
              return stageName = stageNamePattern.MOVE;
            }, 100);
          }
        }));
      }
      return results;
    }
  },
  // 画像情報から作成したParticleのデータから1つ1つ丸のオブジェクトを生成する
  createLogo = function() {
    var circle, i, index, len, local, results, rgba;
    results = [];
    for (index = i = 0, len = baseParticles.length; i < len; index = ++i) {
      local = baseParticles[index];
      circle = new createjs.Shape();
      circle.no = index;
      circle.x = local.x;
      circle.y = local.y;
      circle.scaleX = 0;
      circle.scaleY = 0;
      rgba = "rgba(" + local.r + "," + local.g + "," + local.b + ", 1)";
      circle.graphics.beginFill(rgba).drawCircle(0, 0, 2);
      particles.push(circle);
      results.push(particleStage.addChild(circle));
    }
    return results;
  },
  // バウンドのTween と クリック操作がない場合のアメーバTween
  moveParticles = function() {
    var _x, _y, i, index, len, particle, rate, results, sides, sin, velocityX, velocityY;
    results = [];
    for (index = i = 0, len = particles.length; i < len; index = ++i) {
      particle = particles[index];
      _x = particle.x;
      _y = particle.y;
      // バウンドのTween
      if (isClick) {
        particle.bound = true;
        particle.tweenX = false;
        particle.tweenY = false;
        sides = calcuSides(mousePoint, { x: _x,  y: _y });
        if (sides.z < MOUSE_BOUNDS_RADIUS) {
          rate = {
            x: MOUSE_BOUNDS_RADIUS * calcu2PointCos(mousePoint, { x: _x,  y: _y }),
            y: MOUSE_BOUNDS_RADIUS * calcu2PointSin(mousePoint, { x: _x,  y: _y })
          };
          sin = calcu2PointCos(mousePoint, { x: _x,  y: _y });
          velocityX = rate.x + Math.random() * 20 + 10;
          velocityY = rate.y + Math.random() * 20 + 10;
          createjs.Tween.get(particle, { override: true }).to({
            x: particle.x + velocityX,
            y: particle.y + velocityY
          }, (Math.random() * 1200 + 1000) * (1 - sides.z / MOUSE_BOUNDS_RADIUS), createjs.Ease.backOut).call(function() {
            return createjs.Tween.get(this).to({
              x: baseParticles[this.no].x,
              y: baseParticles[this.no].y
            }, Math.random() * 5000 + 4000, createjs.Ease.getElasticOut(1, Math.random() * .25 + .1));
          });
        }
      // アメーバTween
      } else if (!isBound) {
        if (!particle.tweenX) {
          particle.tweenX = true;
            createjs.Tween.get(particle).to({
            x: baseParticles[particle.no].x + Math.random() * 10 - 5
          }, Math.random() * 900 + 700, createjs.Ease.sineInOut).call(function() {
            return this.tweenX = false;
          });
        }
        if (!particle.tweenY) {
          particle.tweenY = true;
          results.push(createjs.Tween.get(particle).to({
            y: baseParticles[particle.no].y + Math.random() * 10 - 5
          }, Math.random() * 900 + 700, createjs.Ease.sineInOut).call(function() {
            return this.tweenY = false;
          }));
        }
      }
    }
    if(isBound) {
      //tweenで動いているオブジェクトがないかを確認
      var isActive = false;
      particles.forEach(function (particle) {
        if (isActive) {
          return
        }
        isActive = createjs.Tween.hasActiveTweens(particle);
      });
      if (!isActive) {
        isBound = false;
      }
    }
  },
  // Tickerで呼び出されるメインループ
  mainLoop = function() {
    switch (stageName) {
      case stageNamePattern.START:
        showParticles();
        break;
      case stageNamePattern.MOVE:
        moveParticles();
    }
    stage.update();
    return isClick = false;
  };
  // 実行関数
  // PreloadJSで画像を読み込未処理で使用する。
  // 読み込み完了後にmainloopを起動する。
  window.onload = function() {
    var canvas, context, manifest, queue, canvasEle;
    stage = new createjs.Stage("canvas");
    particleStage = new createjs.Container();
    mView = $("body");
    canvasEle = $("#canvas");
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    stage.on("stagemouseup", function(evt) {
      isClick = true;
      isBound = true;
      mousePoint.x = evt.stageX;
      return mousePoint.y = evt.stageY;
    });
    manifest = [{ id: "logo",  src: "assets/logo.jpg" }];
    queue = new createjs.LoadQueue();
    queue.on("complete", function() {
      var logoImg, logoImgMamp;
      imgFile = queue.getResult("logo");
      // canvasElementのwidthとheightを画面サイズに変更させる
      canvasEle.prop("width", mView.width());
      canvasEle.prop("height", mView.height());
      // 一度画像をstage上に表示する
      logoImg = new createjs.Bitmap(imgFile);
      stage.addChild(logoImg);
      stage.update();
      // 表示させているオブジェクトをimageMapとして取得する
      // 取得後はstageから画像オブジェクトをremoveする
      logoImgMamp = context.getImageData(0, 0, imgFile.width, imgFile.height);
      createLocationData(logoImgMamp);
      stage.removeAllChildren();
      // 取得した値からParticleオブジェクト生成してstageに追加する
      createLogo();
      stage.update();
      stage.addChild(particleStage);
      // 33fpsでTickerを実行する
      createjs.Ticker.framerate = 33;
      return createjs.Ticker.addEventListener("tick", mainLoop);
    }, this);
    return queue.loadManifest(manifest, true);
  };
})();