// Define some Defaults
var RAD2DEG = 180 / Math.PI,
  DEG2RAD = Math.PI / 180,
  world = document.getElementsByTagName("world")[0],
   guy = document.getElementsByTagName('guy')[0],
  fly = {
    self: document.getElementById("fly"),
    body: document.getElementsByTagName("flybody")[0],
    smallwings: document.getElementsByTagName("smallwings")[0],
    middlewings: document.getElementsByTagName("middlewings")[0],
    bigwings: document.getElementsByTagName("bigwings")[0],
    eye: document.getElementsByTagName("fly_eye"),
    delay: 1500,
    ease: "cubic.out",
    radius: 0,
    revert: { use: true, delay: 400, ease: "back.out" },
    rotate: { use: true, delay: 600, ease: "none" },
    offset: { x: 38, y: 36 }
  },
  left = {
    self: document.getElementById("left_iris"),
    parent: document.getElementById("left"),
    delay: 1600,
    ease: "power3.Out",
    radius: 30,
    revert: { use: true, delay: 400, ease: "back.out" },
    rotate: { use: true, delay: 1500, ease: "quad.out" },
    offset: { x: 20, y: 26 }
  },
  right = {
    self: document.getElementById("right_iris"),
    parent: document.getElementById("right"),
    delay: 1300,
    ease: "power2.Out",
    radius: 25,
    revert: { use: true, delay: 400, ease: "back.Out" },
    rotate: { use: true, delay: 1200, ease: "quad.out" },
    offset: { x: 17, y: 30 }
  };

//Reset some Coordinates and Sizes
reset();
animateFly();

function animateFly() {
  var tl = gsap.timeline({ repeat: -1, yoyo: true });
  tl.fromTo(
    fly.bigwings,
    0.1,
    { rotationZ: "-25deg", transformOrigin: "50% 100%" },
    { rotationZ: "5deg" },
    0
  );
  tl.fromTo(
    fly.smallwings,
    0.1,
    { rotationZ: "25deg", transformOrigin: "50% 100%" },
    { rotationZ: "35deg" },
    0
  );
  tl.fromTo(
    fly.middlewings,
    0.1,
    { rotationZ: "-15deg", transformOrigin: "50% 100%" },
    { rotationZ: "-40deg" },
    0
  );
  fly.eyetl = gsap.timeline({ yoyo: true });
  fly.eyetl.add(gsap.to(fly.eye, 0.2, { 'borderTopWidth': 20 }));
  fly.eyetl.add(
    gsap.to(fly.eye, 0.2, {
      'borderTopWidth': 2,
      onComplete: function() {
        gsap.delayedCall(Math.random() * 3, function() {
          fly.eyetl.play(0);
        });
      }
    })
  );
}

//Add Those Test Values to dat.GUI
prepareTestEnvironment();

//On Resize recalculate Size and Position
window.addEventListener("resize", reset);

//Start Listeners
world.addEventListener("mousemove", e => {
  animate(fly, { x: e.clientX, y: e.clientY });
  animate(left, { x: e.clientX, y: e.clientY });
  animate(right, { x: e.clientX, y: e.clientY });
});
world.addEventListener("mouseleave", e => {
  if (fly.revert.use) revert(fly);
  if (left.revert.use) revert(left);
  if (right.revert.use) revert(right);
});

function reset() {
  resetCoordinates(fly);
  resetCoordinates(left);
  resetCoordinates(right);
}

function resetCoordinates(obj) {
  var box = obj.self.getBoundingClientRect();
  obj.original = { x: box.left, y: box.y };
}

function animate(obj, mouse) {
  // Calculate Offseted Coordinates
  var x = mouse.x - obj.offset.x,
    y = mouse.y + document.documentElement.scrollTop - obj.offset.y,
      delta = getRelativePosition(fly.self, guy, [0.5, 0.5], [0.5, 0.5]),
      angry = 0.7- Math.max(Math.abs(gsap.utils.normalize(0,window.window.outerWidth/2,(delta.x+delta.y)/2)),0);
  
  //Get Rotation and new Position
  obj.current = getMath({
    mouse: { x: x, y: y },
    original: obj.original,
    last: obj.current || { x: 0, y: 0, rotation: 0 },
    radius: obj.radius,
    rotate: obj.rotate
  });
  // Get Red Eye for Fly if getting closer
  gsap.set(fly.eye,{backgroundColor:'rgba(255,0,0,'+angry+')'});
  //Animate to Position
  gsap.to(obj.self, {
    duration: obj.delay / 1000,
    x: obj.current.x,
    y: obj.current.y,
    overwrite: "auto",
    ease: obj.ease,
    transformOrigin: obj.offset.x + "px " + obj.offset.y + "px"
  });

  //If Rotation Set, Rotate Element
  if (obj.rotate.use)
    gsap.to(obj.self, {
      duration: obj.rotate.delay / 1000,
      ease: obj.rotate.ease,
      rotation: obj.current.rotation + "_short",
      overwrite: "auto"
    });
}

//Revert things to original Position
function revert(obj) {
  gsap.to(obj.self, obj.revert.delay / 1000, {
    x: 0,
    y: 0,
    overwrite: "auto",
    ease: obj.revert.ease
  });
}

// Render Rotation and Position
function getMath(_) {
  var x, y, flip, alpa;
  // Get Position (Respect Wrapper Offsets)
  _.new = {
    x: _.mouse.x,
    y: _.mouse.y,
    rotation: _.last.rotation || 0
  };

  // Set Position Limits if Radius is set
  if (_.radius > 0) {
    //Use Pitagoras and calculate original Angle
    x = _.new.x - _.original.x;
    y = _.new.y - _.original.y;

    //If Radius is bigger then predefined Radius, calculate new Positions
    if (Math.sqrt(x * x + y * y) > _.radius && x !== 0 && y !== 0) {
      flip = _.new.x < _.original.x ? -1 : 1;
      alpha = Math.atan(y / x);
      //calculate x,y coordinates baed on max Radius and Angle
      _.new.x = Math.cos(alpha) * _.radius * flip;
      _.new.y = Math.sin(alpha) * _.radius * flip;
    } else {
      //Check Radius if Angle is 0,90,180,270 degree (x==0 || y==0)
      _.new.x = x > _.radius ? _.radius : x < 0 - _.radius ? 0 - _.radius : x;
      _.new.y = y > _.radius ? _.radius : y < 0 - _.radius ? 0 - _.radius : y;
    }
  } else {
    _.new.x = _.new.x - _.original.x;
    _.new.y = _.new.y - _.original.y;
  }

  // If rotation used, calculate direction Angle
  if (_.rotate.use) {
    x = _.last.x - _.new.x;
    y = _.last.y - _.new.y;
    _.new.rotation =
      Math.sqrt(x * x + y * y) > 2 // 2 is just try and error. This feels well, but maybe someone has a better idea here :=)
        ? Math.round(Math.atan2(y, x) * RAD2DEG) - 90 || _.new.rotation
        : _.new.rotation;
  }

  //Something Changed, for further ideas...
  _.new.move = _.new.x - _.last.x !== 0 || _.new.y - _.last.y !== 0;
  return _.new;
}

//Prepare the Test Values and call that dat.GUI  (Not that interesting from here...)
function addSingleGui(gui, name, obj, eases) {
  var guiBasic = gui.addFolder(name + " Basics");
  guiRotate = gui.addFolder(name + " Rotation");
  guiRevert = gui.addFolder(name + " Revert");

  guiBasic.add(obj, "delay", 0, 5000);
  guiBasic.add(obj, "ease", eases);
  guiRotate.add(obj.rotate, "use");
  guiRotate.add(obj.rotate, "delay", 0, 5000);
  guiRotate.add(obj.rotate, "ease", eases);
  guiRevert.add(obj.revert, "use");
  guiRevert.add(obj.revert, "delay", 0, 5000);
  guiRevert.add(obj.revert, "ease", eases);
}

function prepareTestEnvironment() {
  var eases = ["none"],
    gui = new dat.GUI();

  // Collect all Eases
  for (var ease in gsap.parseEase())
    if (ease.indexOf(".") > 0 && ease.indexOf(".ease") === -1) eases.push(ease);

  addSingleGui(gui, "Fly", fly, eases);
  addSingleGui(gui, "Left Eye", left, eases);
  addSingleGui(gui, "Right Eye", right, eases);
}


// feed two elements to this method and it'll return the gap between them as a point {x, y} according to the coordinate system of the fromElement's parent. By default, it will align their centers, but you can define a different origin for each, like [0, 0] would be the top left corner, [0.5, 0.5] would be the center, [1, 1] would be the bottom right, etc. 
function getRelativePosition(fromElement, toElement, fromOrigin, toOrigin) {
	let matrix = MotionPathPlugin.getGlobalMatrix,
		originToPoint = (element, origin) => {
			let o = origin || [0.5, 0.5],
				svg = element.ownerSVGElement && element.getBBox(),
				w = svg ? svg.width : element.offsetWidth || 0,
				h = svg ? svg.height : element.offsetHeight || 0;
			return {x: o[0] * w, y: o[1] * h};
		},
		parentMatrix = matrix(fromElement.parentNode, true),
		fromPoint = parentMatrix.apply(matrix(fromElement).apply(originToPoint(fromElement, fromOrigin))),
		toPoint = parentMatrix.apply(matrix(toElement).apply(originToPoint(toElement, toOrigin)));
	return {x: toPoint.x - fromPoint.x, y: toPoint.y - fromPoint.y};
}