var mouseX = 0;
var mouseY = 0;

/* Umbrella class */
class Umbrella {
  constructor() {
    this.container = document.querySelector(".umbrella");
    this.umbrella = document.querySelector(".umbrella__illus");
    this.selection = document.querySelector(".umbrella__selec");

    this.angle = 0;
    this.iAngle = 0;
    this.sAngle = 0;
    this.moveX = 0;
    this.moveY = 0;
    this.destX = 0;
    this.destY = 0;
    this.iMoveX = 0;
    this.iMoveY = 0;
    this.sMoveX = 0;
    this.sMoveY = 0;
    this.x = 0;
    this.y = 0;
    this.accelY = 0;
    this.radius = 0;

    this.isIdle = true;
    this.atDest = true;

    this.init();
  }

  init() {
    this.umbrella.style.transform = "";
    this.selection.style.transform = "";

    var bounding = this.umbrella.getBoundingClientRect();
    this.radius = bounding.width / 2;
    this.x = bounding.left + this.radius;
    this.y = bounding.top + this.radius;
  }

  move(cntTick) {
    var destX = mouseX;
    var destY = mouseY;

    // Get distance
    var distX = this.x - destX;
    var distY = this.y - destY;
    var dist = Math.hypot(distX, distY);

    if (Math.abs(distX) > 800 || Math.abs(distY) > 300) {
      distX = 30 - Math.abs((cntTick % 500) / 500 - 0.5) * 120;
      distY = 20 - Math.abs(((75 + cntTick) % 300) / 300 - 0.5) * 80;
    } else {
      distX *= -0.5;
      distY *= -0.5;
    }

    // Calculate angle based on distance
    var angle = (distX / (window.innerWidth / -2)) * 25;
    this.angle = angle;

    // Limit movement within a range
    this.moveX = distX;
    this.moveY = distY;

    this.moveX = Math.min(Math.max(-500, this.moveX), 500);
    this.moveY = Math.max(-100, this.moveY);

    // Add inertia
    this.iAngle = this.iAngle + (this.angle - this.iAngle) * 0.04;
    this.iMoveX = this.iMoveX + (this.moveX - this.iMoveX) * 0.04;
    this.iMoveY = this.iMoveY + (this.moveY - this.iMoveY) * 0.04 + this.accelY;

    // Decrease Y acceleration to make umbrella come back to initial position
    this.accelY *= 0.5;

    // Move selection box slower
    this.sAngle = this.sAngle + (this.angle - this.iAngle) * 0.03;
    this.sMoveX = this.sMoveX + (this.moveX - this.sMoveX) * 0.03;
    this.sMoveY = this.sMoveY + (this.moveY - this.sMoveY) * 0.03 + this.accelY;

    // Prevent umbrella to go out of selection box
    this.sMoveX = Math.max(
      Math.min(this.sMoveX, this.iMoveX + 30),
      this.iMoveX - 30
    );
  }

  draw() {
    this.umbrella.style.transform =
      "translate3d(" +
      this.iMoveX +
      "px, " +
      this.iMoveY +
      "px, 0) rotate(" +
      this.iAngle +
      "deg)";

    this.selection.style.transform =
      "translate3d(" +
      this.sMoveX +
      "px, " +
      this.sMoveY +
      "px, 0) rotate(" +
      this.sAngle +
      "deg)";
  }
}

/* Object class */
class Object {
  constructor(el) {
    this.el = el;
    this.absX = 0;
    this.absY = 0;

    this.addDom();
    this.init();
  }

  addDom() {
    this.el = document.createElement("div");
    this.el.classList.add("object");

    this.el.classList.add("object--" + Math.ceil(Math.random() * 7));

    this.el.style.zIndex = Math.random() > 0.5 ? 1 : 3;
    this.el.style.opacity = 0;
    setTimeout(() => {
      this.el.style.opacity = ''
    }, 10)

    document.querySelector(".objects").appendChild(this.el);
  }

  init() {
    var bounding = this.el.getBoundingClientRect();

    this.absX = bounding.left + bounding.width / 2;
    this.absY = bounding.top + bounding.height / 2;

    this.accelX = 0;
    this.accelY = 0.5;
    this.velocX = 0;
    this.velocY = 0;
    this.moveX = 75 - Math.random() * 150;
    this.moveY = 0;
    this.rotate = 2 - Math.random() * 4;
    this.angle = 0;

    this.bounced = false;
    this.stop = false;
  }

  reset() {
    this.el.parentNode.removeChild(this.el);

    this.addDom();
    this.init();
  }

  move() {
    if (!this.stop) {
      // Calculate new position
      var newX = this.absX + this.moveX;
      var newY = this.absY + this.moveY;

      // Calculate distance to umbrella
      var distX = newX - umbrella.x - umbrella.iMoveX + umbrella.iAngle;
      var distY = newY - umbrella.y - umbrella.iMoveY;
      var dist = Math.hypot(distX, distY);

      // Make object bounces when object enters umbrella radius
      if (!this.bounced && dist <= umbrella.radius && this.velocY > 0) {
        umbrella.accelY = this.velocY * 0.75;

        // Calculate hit angle
        var angle = (Math.atan2(distY, distX) * 180) / Math.PI + 90;
        var strength = angle / 90;

        // Add rotation to object based on hit angle
        this.rotate = angle * 0.25;

        // Randomize bounce effect
        this.velocY *= -0.35 - Math.random() * 0.7 * (1 - Math.abs(strength));
        this.velocX = this.velocY * -strength;

        if (Math.random() > 0.5) {
          this.bounced = true;
        }
      } else {
        // Keep falling
        this.accelY += 0.0025;
        this.velocY += this.accelY;
      }

      this.velocX *= 0.99;

      // Calculate movement
      this.angle += this.rotate;
      this.moveX += this.velocX;
      this.moveY += this.velocY;

      // Reset
      if (this.moveY > 600) {
        this.stop = true;
        setTimeout(this.reset.bind(this), Math.random() * 1000);
      }
    }
  }

  draw() {
    if (this.stop) {
      this.el.style.opacity = 0;
    } else {
      this.el.style.transform =
        "translate3d(" +
        this.moveX +
        "px, " +
        this.moveY +
        "px, 0) rotate(" +
        this.angle +
        "deg)";
    }
  }
}

// Resize
function resizeHandler() {
  umbrella.init();
}
window.addEventListener("resize", resizeHandler);

// Mouse move
function mouseMove(e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
}
window.addEventListener("mousemove", mouseMove);

// Umbrella
const umbrella = new Umbrella();

// Objects
var objects = [];
for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    objects.push(new Object(document.querySelector(".object")));
  }, Math.random() * 1000);
}

// Tick function
function tick(timestamp) {
  objects.forEach((object) => {
    object.move();
    object.draw();
  });

  umbrella.move(cntTick);
  umbrella.draw();

  cntTick++;
  requestAnimationFrame(tick);
}
var cntTick = 0;

// Tick
tick();