$('.js-Character_Change').each(function(){
  const $this = $(this);
  const $target = $this.children('.js-Character_Target');
  const $switcher = $this.children('.js-Character_Switcher');
  const $canvas = $this.children('.js-Character_Canvas');

  let canvasWidth = $canvas.innerWidth();
  let canvasHeight = $canvas.innerHeight();

  // アプリケーションの作成
  const app = new PIXI.Application(canvasWidth, canvasHeight, {transparent : true});
  $canvas.append(app.view);

  // コンテナの作成
  let container = new PIXI.Container();
  // ステージに反映
  app.stage.addChild(container);
  container.x = 0;
  container.y = 0;

  // 表示をするパーティクルの数
  let totalParticle = 50;

  //　画像配列
  let images = ['https://dl.dropbox.com/s/eejj0fryiojjcfw/star.png?dl=0']

  // クリック処理
  let index = 0;
  $switcher.on('click',function(){

    // 切り替え処理
    const targetLength = $target.children().length - 1;
    index+=1;
    if(index > targetLength){
      index = 0;
    }
    $target.children('div').addClass('off').removeClass('on');
    $target.children('div').eq(index).removeClass('off').addClass('on');

    // パーティクル用の配列
    const particles = [];

    // totalParticle回数分ループ
    for (let i = 0; i < totalParticle; i++) {

      // パーティクルの画像設定
      let n = Math.floor(Math.random() * images.length);
      const particle = PIXI.Sprite.from(images[n]);

      // パーティクルの中心をきめる
      particle.anchor.set(0.5);

      // 透明度
      particle.alpha = 1;

      // サイズをランダムにきめる
      const max = app.screen.width * 0.000166666666667;
      const size = Math.random() * max;
      particle.scale.set(size);

      // パーティクルの位置をcanvasの中心に
      particle.x = app.screen.width / 2;
      particle.y = app.screen.height / 2;

      // 速度と向き
      particle.vx = app.screen.width * 0.02 * (Math.random() - 0.5); // 0~1 - .5 = -.5 ~ .5;
      particle.vy = app.screen.width * 0.02 * (Math.random() - 0.5);

      // 寿命
      particle.life = 100;

      // 生成されたパーティクルの配列をpushして簡単にアクセスできるようにします
      particles.push(particle);

      // コンテナに反映
      container.addChild(particle);

    }

    // アニメーションフレーム毎の処理を指定
    app.ticker.add(function() {

      // 画像を繰り返し処理して位置を更新する
      for (let i = 0; i < particles.length; i++) {
        //配列を代入
        const particle = particles[i];

        // 透明度
        particle.alpha -= 0.01;
        
        // サイズ変化
        particle.scale.x *= .99;
        particle.scale.y *= .99;

        // 回転
        particle.rotation += 0.1;

        // 寿命
        particle.life -= 1;

        // 摩擦
        particle.vx *= .98;
        particle.vy *= .98;

        // 速度を位置に足していく
        particle.x += particle.vx;
        particle.y += particle.vy;

        if (particle.life <= 0) {
          // コンテナから削除
          container.removeChild(particle);
          // 配列からも削除(i番目から1個削除)
          particles.splice(i, 1);
        }
      }
    });
  });
});