const posters = document.getElementsByClassName('poster');
for(let i=0;i<posters.length;i++){
  const canvas = posters[i];
  const ctx = canvas.getContext('2d');
  const img = new Image();
  img.src = canvas.dataset.image; // ここに画像のURLを指定
  img.onload = function() {
    document.addEventListener("scroll",function(){
      const className = "-inview", offset = 100 , remove = false;
      const wH = document.documentElement.clientHeight;
      const targetTop = canvas.getBoundingClientRect().top,
            targetBtm = targetTop + canvas.clientHeight;
      if (!canvas.classList.contains(className) && targetTop + offset < wH && 0 < targetBtm - offset ) {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        peelEffect(canvas, ctx, img);
        canvas.classList.add(className);
      }
    })
  };
}

function peelEffect(canvas, ctx, img) {

  const canvasWidth = canvas.width,canvasHeight = canvas.height;
  const imgWidth = canvasWidth * 0.8, imgLeft = canvasWidth * 0.1, imgRight = canvasWidth * 0.9;
  const imgHeight = canvasHeight * 0.8, imgTop = canvasHeight * 0.1, imgBottom = canvasHeight * 0.9;

  let peelSizeX = imgRight*2,peelSizeY = imgBottom*2;
  let direction = true;

  const maxPeelSizeX = Math.floor(imgLeft*2),
        maxPeelSizeY = Math.floor(imgTop*2);  // 剥がれる部分の最大サイズ
  const peelSpeed = 1;    // 剥がれのスピード
  const putSpeedX = Math.floor(imgRight / 20),putSpeedY = Math.floor(imgBottom / 20);
  const gravity = 0.8;    // 重力を表現するための垂直方向の速度

  
  function animate() {
    let repeat = true;
    if(direction){
      if (peelSizeX > imgLeft && peelSizeY > imgTop ) {
        peelSizeX -= putSpeedX;
        peelSizeY -= putSpeedY;
      }else{
        peelSizeX = imgLeft;
        peelSizeY = imgTop;
        direction = false;
      }
    }else{
      if (peelSizeX < maxPeelSizeX && peelSizeY < maxPeelSizeY ) {
        if(peelSizeX < maxPeelSizeX){
          peelSizeX += peelSpeed;
        }
        if(peelSizeY < maxPeelSizeY){
          peelSizeY += peelSpeed;
        }
      }else{
        repeat = false;
      }
    }
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);  // キャンバスをクリア

    // クリッピングのための多角形を描画
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(imgLeft, peelSizeY);
    ctx.lineTo(peelSizeX, imgTop);
    ctx.lineTo(imgRight, imgTop);
    ctx.lineTo(imgRight, imgBottom);
    ctx.lineTo(imgLeft, imgBottom);
    ctx.closePath();
    
    // クリッピングを適用
    ctx.clip();
    ctx.drawImage(img, imgLeft, imgTop, imgWidth, imgHeight);

    ctx.restore();
    // 剥がれた部分の裏側を描画
    drawPeelingPart(peelSizeX, peelSizeY, gravity);

    if(repeat){
      requestAnimationFrame(animate);
    }
  }

  function drawPeelingPart(sizeX, sizeY, gravity) {
    const foldHeight = sizeY + gravity * 10; // 重力を加味して垂れ下がるようにする

    // 剥がれた部分の裏側を描画
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(sizeX, imgTop);
    ctx.lineTo(sizeX - sizeX * 0.3, foldHeight);  // 垂れ下がるように描画
    ctx.quadraticCurveTo(sizeX - sizeX * 0.4, foldHeight * 0.9, imgLeft, sizeY);
    ctx.closePath();

    // 裏側の色
    ctx.fillStyle = '#dedede';
    ctx.fill();

    // 影の効果
    ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = -5;
    ctx.shadowOffsetY = 5;
    ctx.fill();

    ctx.restore();
  }

  animate();
}