/**
* 小数点の桁数をを指定し、四捨五入して返す
* @param {number} number - 対象となる数値 
* @param {number} digit - 小数点の桁数
* @return {number} xxx.xx
* @note Math.pow() は累乗を算出する関数で、 Math(x, y) はxのy乗を表す
*/
const toDecimal = (number, digit) => {
  return Math.round(number * Math.pow(10, digit)) / Math.pow(10, digit);
};



/**
* 初期値
*/
const windowWidth = window.innerWidth;                              // ウィンドウの幅
const windowHeight = window.innerHeight;                            // ウィンドウの高さ
const begumaruNode = document.querySelectorAll('.begumaru');        // 対象となる要素の配列
const begumaruArray = Array.prototype.slice.call(begumaruNode, 0);  // 対象となる要素の配列 (IE対策)
const begumaruPosition = begumaruArray.map((item, index) => {       // 対象となる要素の位置座標の配列
  const itemWidth = item.clientWidth;                               // 要素の横幅
  const itemHeight = item.clientHeight;                             // 要素の横幅
  const itemRect = item.getBoundingClientRect();                    // 要素の初期位置情報
  const itemLeft = itemRect.left + itemWidth / 2;                   // 調整前の位置座標X
  const itemTop = itemRect.top + itemHeight / 2;                    // 調整前の位置座標Y
  let itemX = (itemLeft * 2 - windowWidth) / windowWidth;           // 調整後の位置座標X
  let itemY = (itemTop * 2 - windowHeight) / windowHeight;          // 調整後の位置座標Y
  let itemZ = (begumaruArray.length - index) / 5;                   // 配列に入っている数 - 配列のインデックス
                                                                    // = 配列の最初ほど大きく配列の最後ほど小さい値
                                                                    // = どのくらい要素を動かすか決める係数
  itemX = toDecimal(itemX, 2);                                      // 小数点の桁数が多いので第二位までに
  itemY = toDecimal(itemY, 2);                                      // 小数点の桁数が多いので第二位までに
  return { itemX, itemY, itemZ };                                   // 位置座標 と どのくらい動かすか決める係数 を格納
});




/**
* マウスが動いたら処理を開始
*/
window.addEventListener('mousemove', (eve) => {                     // eve.clientX と eve.clientY で調整前のマウスの位置座標が取得できる
  let eveX = (eve.clientX * 2 - windowWidth) / windowWidth;         // 調整後のマウスの位置座標X
  let eveY = (eve.clientY * 2 - windowHeight) / windowHeight;       // 調整後のマウスの位置座標Y
  eveX = toDecimal(eveX, 2);                                        // 小数点の桁数が多いので第二位までに
  eveY = toDecimal(eveY, 2);                                        // 小数点の桁数が多いので第二位までに
  begumaruArray.forEach((item, index) => {                          // 対象となる要素それぞれに対して行う処理
    let strengthX = eveX - begumaruPosition[index].itemX;           // 調整後のマウスの位置座標X - 調整後の要素の位置座標X
    let strengthY = eveY - begumaruPosition[index].itemY;           // 調整後のマウスの位置座標Y - 調整後の要素の位置座標Y
                                                                    // = マウスと要素がどのくらい離れているかを表す値
    let strengthZ = begumaruPosition[index].itemZ;                  // どのくらい要素を動かすか決める係数を取り出す
    strengthX = toDecimal(strengthX, 2) * -1;                       // 小数点の桁数が多いので第二位までにして、値を反転
    strengthY = toDecimal(strengthY, 2) * -1;                       // 小数点の桁数が多いので第二位までにして、値を反転
                                                                    // = マウスと逆の向きへ動くようになる
    item.style.transform = `translate(${40 * strengthX * strengthZ}px, ${40 * strengthY * strengthZ}px)`;
    // strengthZ は どのくらい要素を動かすか決める係数 なので
    // 値が大きいほど動き、値が小さいほど動かない
    // = 遠近感を表現できる！
  });
});