// /* ===========================================================
// # Point
// =========================================================== */
class Point{
	constructor(x = 0, y = 0) {
		this.x = x || 0;
		this.y = y || 0;
	}
}

// /* ===========================================================
// # Zoom
// =========================================================== */
class Zoom {
	constructor() {
    // -----------------------------
    this.zoom = document.querySelector(".zoom");
    this.inner = document.querySelector(".zoom__inner");
    this.elm = document.querySelector(".zoom__elm");
    this.lens = document.querySelector(".zoom__lens");
    this.result = document.querySelector(".zoom__result");
    // -----------------------------
    this.isMouseEnter = false;

    this.baseSize = 500;　// 拡大用画像のサイズとりあえず1:1のサイズのみ

    this.scale = 2.0; // スケール初期値
    this.scaleMin = 1.0;　// スケール最小値
    this.scaleMax = 3.0; // スケール最大値
    this.scaleNum = 0.02; // マウススクロールでのスケール変化値

    this.factor = 0.10; // イージング 係数
    this.fraction = 0.05; // マウス位置の繰り上げ・切り下げ 端数
    // -----------------------------
    this.currentPoint = new Point(); // 現在位置
    this.targetPoint = new Point(); // 目標位置
    // -----------------------------
    this.resize();
    this.events();
    this.update();
    // -----------------------------
  }
  events(){
    this.inner.addEventListener("mouseenter",(e) => {
      this.isMouseEnter = true;
    }, false)
    this.inner.addEventListener("mouseleave",(e) => {
      this.isMouseEnter = false;
    }, false)

    document.addEventListener("mousemove", this.mousemove.bind(this), false);
    window.addEventListener("resize", this.resize.bind(this), false);

    const mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
    window.addEventListener(mousewheelevent, this.mousewheel.bind(this), false);
  }
  resize(){
    this.elmRect = this.elm.getBoundingClientRect();
  }

  mousemove(e){
    if(!this.isMouseEnter) return;

    // baseSizeに合わせてマウス位置を0.0 ~ 1.0に正規化
    var x = (e.clientX - this.elmRect.left) / this.baseSize;
    var y = (e.clientY - this.elmRect.top) / this.baseSize;

    // 繰り上げ/繰り下げ
    if(x < 0 + this.fraction) x = 0;
    if(x > 1 - this.fraction) x = 1;
    if(y < 0 + this.fraction) y = 0;
    if(y > 1 - this.fraction) y = 1;

    // 各要素の目標位置設定
    this.targetPoint = new Point(x, y);
  }
  mousewheel(e){
    // マウススクロールでスケール変更
    if(!this.isMouseEnter) return;
    e.preventDefault();

    if(!e) e = window.event;
    let delta = e.deltaY ? -(e.deltaY) : e.wheelDelta ? e.wheelDelta : -(e.detail);

    if (delta < 0){
      this.scale -= this.scaleNum;
    } else if (delta > 0){
      this.scale += this.scaleNum;
    }

    if(this.scale < this.scaleMin) this.scale = this.scaleMin;
    if(this.scale > this.scaleMax) this.scale = this.scaleMax;
  }

  update(){
    // 各要素の更新
    window.requestAnimationFrame(this.update.bind(this));

    // 位置更新のイージング処理
    this.currentPoint.x += Number(this.targetPoint.x - this.currentPoint.x) * this.factor;
    this.currentPoint.y += Number(this.targetPoint.y - this.currentPoint.y) * this.factor;

    // レンズの位置
    var lenzPos = new Point((this.currentPoint.x * this.baseSize),(this.currentPoint.y * this.baseSize));
    Object.assign(this.lens.style,{
      transform: `translate(${lenzPos.x}px, ${lenzPos.y}px)`
    });

    // 拡大画像の位置
    var resultPos = new Point(
                        (this.currentPoint.x * this.baseSize * this.scale) - this.baseSize * this.currentPoint.x + lenzPos.x,
                        (this.currentPoint.y * this.baseSize * this.scale) - this.baseSize * this.currentPoint.y + lenzPos.y
                        );
    Object.assign(this.result.style,{
      width: this.baseSize + "px",
      transform: `translate(-${resultPos.x}px, -${resultPos.y}px) scale(${this.scale})`
    });

  }
}

window.addEventListener('DOMContentLoaded', (e)=>{
   new Zoom();
})