const $start = $("#start");
const $dotQtyInput = $("#dotQuantity");
const $engineInput = $("#engine");
const $propertiesInput = $("#properties");
const $instructions = $("#instructions");
const $field = $("#field");
const $window = $(window);
const $inputs = $("select");
let inProgress = false;
const tests = {};
let duration;
let radius;
let centerX;
let centerY;
let dots;
let rawDots;
let currentTest;
let startingCSS;

const px = "px";

const renderDot = (state, offset, data) => {
  const dotStyle = data.dot.style;
  dotStyle.left = ~~(state.left + 0.5) + px;
  dotStyle.top = ~~(state.top + 0.5) + px;
  dotStyle.width = ~~(state.width + 0.5) + px;
  dotStyle.height = ~~(state.height + 0.5) + px;
};

//Shifty
tests.shifty = {
  milliseconds: true,
  tween(dot) {
    const angle = Math.random() * Math.PI * 2;
    const dotStyle = dot.style;

    const tweenable = new shifty.Tweenable();
    dot.tweenable = tweenable;

    tweenable.tween({
      from: {
        left: centerX,
        top: centerY,
        width: 1,
        height: 1
      },
      to: {
        left: Math.cos(angle) * radius + centerX,
        top: Math.sin(angle) * radius + centerY,
        width: 32,
        height: 32
      },
      duration,
      delay: Math.random() * duration,
      easing: "easeInCubic",
      start() {
        dotStyle.cssText = `position:absolute;`;
      },
      render: renderDot,
      data: {
        dot
      },
      finish: () => {
        tests.shifty.tween(dot);
      }
    });
  },
  stop({ tweenable }) {
    tweenable.cancel();
  },
  nativeSize: false
};

//GSAP
tests.gsap = {
  milliseconds: false,
  tween(dot) {
    const angle = Math.random() * Math.PI * 2;
    dot.style.cssText = startingCSS;
    TweenLite.to(dot, duration, {
      css: {
        left: Math.cos(angle) * radius + centerX,
        top: Math.sin(angle) * radius + centerY,
        width: 32,
        height: 32
      },
      delay: Math.random() * duration,
      ease: Cubic.easeIn,
      overwrite: "none",
      onComplete: tests.gsap.tween,
      onCompleteParams: [dot]
    });
  },
  stop(dot) {
    TweenLite.killTweensOf(dot);
  },
  nativeSize: false
};

tests.anime = {
  milliseconds: true,
  tween: function (dot) {
    var delay = Math.random() * duration;
    var angle = Math.random() * Math.PI * 2;
    //anime appears to have a bug - if we don't remove the width/height attributes, it ends up animating the width/height attributes intead of the css properties, so it displays incorrectly.
    dot.removeAttribute("width");
    dot.removeAttribute("height");

    dot.style.cssText = startingCSS;
    anime({
      targets: dot,
      duration: duration,
      left: Math.cos(angle) * radius + centerX + "px",
      top: Math.sin(angle) * radius + centerY + "px",
      width: "32px",
      height: "32px",
      delay: delay,
      easing: "easeInCubic",
      complete: function () {
        tests.anime.tween(dot);
      }
    });
  },
  stop: function (dot) {
    anime.remove(dot);
  },
  nativeSize: false
};

tests.webanimations = {
  milliseconds: true,
  wrapDot: function (dot) {
    return dot; //no wrapping necessary
  },
  tween: function (dot) {
    var delay = Math.random() * duration;
    dot.style.cssText = startingCSS;
    var angle = Math.random() * Math.PI * 2,
      anim = (dot.anim = dot.animate(
        [
          {
            left: centerX + "px",
            top: centerY + "px",
            width: "1px",
            height: "1px"
          },
          {
            left: Math.cos(angle) * radius + centerX + "px",
            top: Math.sin(angle) * radius + centerY + "px",
            width: "32px",
            height: "32px"
          }
        ],
        {
          duration: duration,
          delay: delay,
          fill: "forwards",
          easing: "cubic-bezier(0.550, 0.055, 0.675, 0.190)"
        }
      ));
    //anim.play();
    anim.onfinish = function () {
      tests.webanimations.tween(dot);
    };
  },
  stop: function (dot) {
    dot.anim.onfinish = null; //otherwise it'll call the onfinish when cancelled, and the loop will continue.
    dot.anim.cancel();
  },
  nativeSize: false
};

function toggleTest() {
  let i;
  let size;
  inProgress = !inProgress;
  if (inProgress) {
    $inputs.prop("disabled", true);
    $field.css({ pointerEvents: "none" }); //improve performance - ignore pointer events during animation
    $start.html(" STOP ");
    $start.css({ background: "#C00" });
    TweenLite.to($instructions, 0.7, {
      autoAlpha: 0,
      overwrite: "all"
    });
    currentTest = tests[$engineInput.val()];
    size = currentTest.nativeSize ? "16px" : "1px";
    centerX = $field.width() / 2;
    centerY = $field.height() / 2;
    startingCSS = `position:absolute; left:${centerX}px; top:${centerY}px; width:${size}; height:${size};`;
    radius = Math.sqrt(centerX * centerX + centerY * centerY);
    duration = currentTest.milliseconds ? 750 : 0.75;
    //we wait a millisecond before creating the dots and starting to animate them so that the UI renders first (making the "start" button say "stop"), otherwise users could be confused when there's a long pause when you choose Zepto and transforms due to the fact that it can take a while for the browser to put all the dots on their own layers.
    setTimeout(() => {
      createDots();
      i = dots.length;
      while (--i > -1) {
        currentTest.tween(dots[i]);
      }
    }, 1);
  } else {
    $start.html(" START ");
    $start.css({
      backgroundColor: "#9af600",
      background: "linear-gradient(to bottom, #9af600 0%,#71B200 100%"
    });
    TweenLite.to($instructions, 0.7, { autoAlpha: 1, delay: 0.2 });
    $inputs.prop("disabled", false);
    $field.css({ pointerEvents: "auto" });
    //stop the tweens and remove the dots.
    i = dots.length;
    while (--i > -1) {
      currentTest.stop(dots[i]);
      $field[0].removeChild(rawDots[i]); //removes dot(s)
    }
    dots = null;
    rawDots = null;
  }
}

function createDots() {
  let i = parseInt($dotQtyInput.val());
  let dot;
  dots = [];
  rawDots = [];
  while (--i > -1) {
    dot = document.createElement("img");
    dot.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/dot.png";
    dot.width = 1;
    dot.height = 1;
    dot.id = `dot${i}`;
    dot.style.cssText = startingCSS;
    $field[0].appendChild(dot);
    rawDots.push(dot);
    dots.push(dot);
  }
}

$start.click(toggleTest);

const stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
stats.dom.classList.add("stats");
document.body.appendChild(stats.dom);

const updateFpsMeter = () => {
  stats.begin();
  stats.end();
  requestAnimationFrame(updateFpsMeter);
};

requestAnimationFrame(updateFpsMeter);