(function main() {
  let anim;

  document.getElementById('fadeInPlay')
    .addEventListener('click', function () {
      const block = document.getElementById('fadeInBlock');
      animaster().fadeIn(block, 5000);
    });
  document.getElementById('fadeInReset')
    .addEventListener('click', function () {
      const block = document.getElementById('fadeInBlock');
      resetFadeIn(block);
    });

  document.getElementById('movePlay')
    .addEventListener('click', function () {
      const block = document.getElementById('moveBlock');
      animaster().move(block, 1000, {x: 100, y: 10});
    });
  document.getElementById('moveReset')
    .addEventListener('click', function () {
      const block = document.getElementById('moveBlock');
      resetMoveAndScale(block);
    });

  document.getElementById('scalePlay')
    .addEventListener('click', function () {
      const block = document.getElementById('scaleBlock');
      animaster().scale(block, 1000, 1.25);
    });
  document.getElementById('scaleReset')
    .addEventListener('click', function () {
      const block = document.getElementById('scaleBlock');
      resetMoveAndScale(block);
    });

  document.getElementById('fadeOutPlay')
    .addEventListener('click', function () {
      const block = document.getElementById('fadeOutBlock');
      animaster().fadeOut(block, 5000);
    });
  document.getElementById('fadeOutReset')
    .addEventListener('click', function () {
      const block = document.getElementById('fadeOutBlock');
      resetFadeOut(block);
    });

  document.getElementById('heartBeatingPlay')
    .addEventListener('click', function () {
      const block = document.getElementById('heartBeatingBlock');
      anim = animaster().heartBeating(block);
      document.getElementById('heartBeatingStop')
        .addEventListener('click', function () {
          anim.stop();
        });
    });

  document.getElementById('shakingPlay')
    .addEventListener('click', function () {
      const block = document.getElementById('shakingBlock');
      anim = animaster().shaking(block);
      document.getElementById('shakingStop')
        .addEventListener('click', function () {
          anim.stop();
        });
    });

  document.getElementById('moveAndHidePlay')
    .addEventListener('click', function () {
      const block = document.getElementById('moveAndHideBlock');
      animaster().moveAndHide(block, 5000, {x: 100, y: 20});
    });
  document.getElementById('moveAndHideReset')
    .addEventListener('click', function () {
      const block = document.getElementById('moveAndHideBlock');
      resetFadeOut(block);
      resetMoveAndScale(block);
    });

  document.getElementById('showAndHidePlay')
    .addEventListener('click', function () {
      const block = document.getElementById('showAndHideBlock');
      animaster().showAndHide(block, 5000);
    });

})();

function animaster() {

  return {
    _steps: [],
    _translation: {x: 0, y: 0},
    _ratio: 1,
    _run: function (element, steps) {
      const anim = steps.shift();
      console.log(anim);
      switch (anim.name) {
        case "move":
          animaster().move.call(this, element, anim.duration, anim.translation);
          break;
        case "scale":
          animaster().scale.call(this, element, anim.duration, anim.ratio);
          break;
        case "fadeIn":
          animaster().fadeIn.call(this, element, anim.duration);
          break;
        case "fadeOut":
          animaster().fadeOut.call(this, element, anim.duration);
          break;
        case "delay":
          animaster().move(element, anim.duration, null);
          break;
        case "moveAndHide":
          animaster().move(element, anim.duration *3/5, anim.translation)
          setTimeout(function () {
            animaster().fadeOut(element, anim.duration * 2 / 5);
          }, anim.duration * 3 / 5);
          break;
        case "showAndHide":
            animaster().fadeIn(element, anim.duration * 1 / 3);
            animaster().addDelay(anim.duration * 2 / 3)
            animaster().fadeOut(element, anim.duration * 1 / 3);
            break;
        case "beating":
            animaster().heartBeating(element);
      }
      if(steps.length!==0)
        setTimeout(()=> this._run(element, steps), anim.duration);
    },
    scale:  function (element, duration, ratio) {
      this._ratio *= ratio;
      element.style.transitionDuration = `${duration}ms`;
      element.style.transform = getTransform(this._translation, this._ratio);
      console.log(element.style.transform);
    },
    move:  function (element, duration, translation) {
      this._translation.x += translation.x;
      this._translation.y += translation.y;
      element.style.transitionDuration = `${duration}ms`;
      element.style.transform = getTransform(this._translation, this._ratio);
      console.log(element.style.transform);
    },
    fadeIn: function (element, duration) {
      element.style.transitionDuration = `${duration}ms`;
      element.classList.remove('hide');
      element.classList.add('show');
    },
    fadeOut: function (element, duration) {
      element.style.transitionDuration = `${duration}ms`;
      element.classList.remove("show");
      element.classList.add("hide");
    },
    moveAndHide: function (element, duration, translation) {
      element.style.transitionDuration = `${duration}ms`;
      animaster().move(element, duration * 3 / 5, translation);
      setTimeout(function () {
        animaster().fadeOut(element, duration * 2 / 5);
      }, duration * 3 / 5);
    },
    showAndHide: function (element, duration) {
      console.log(element);
      animaster().fadeIn(element, duration * 1 / 3);
      setTimeout(() => {
        animaster().fadeOut(element, duration * 1 / 3);
      }, duration * 2 / 3);
    },
    heartBeating: function (element) {
      element.style.transitionDuration = `500ms`;
      let beatCounter = 0;

      let beating = setInterval(() => {
        animaster().scale(element, 500, beatCounter % 2 === 0 ? 1.4 : 1.0);
        beatCounter++;
      }, 500);

      return {
        stop: () => {
          clearInterval(beating);
          animaster().scale(element, 0, 1);
        }
      };
    },
    shaking: function (element) {
      element.style.transitionDuration = `250ms`;
      let shakeCounter = 0;

      let shaking = setInterval(() => {
        animaster().move(element, 250, shakeCounter % 2 === 0 ? {x: -20, y: 0} : {x: 20, y: 0});
        shakeCounter++;
      }, 500);

      return {
        stop: () => {
          clearInterval(shaking);
          animaster().move(element, 0, {x: 0, y: 0});
        }
      };
    },
    addMove: function (duration, translation) {
      const anim = {name: "move", duration: duration, translation: translation, ratio: null};
      this._steps.push(anim);
      return this;
    },
    addScale: function (duration, ratio) {
      const anim = {name: "scale", duration: duration, translation: null, ratio: ratio};
      this._steps.push(anim);
      return this;
    },
    addFadeIn: function (duration) {
      const anim = {name: "fadeIn", duration: duration, translation: null, ratio: null};
      this._steps.push(anim);
      return this;
    },
    addFadeOut: function (duration) {
      const anim = {name: "fadeOut", duration: duration, translation: null, ratio: null};
      this._steps.push(anim);
      return this;
    },
    addDelay: function (duration){
      const anim = {name: "delay", duration: duration, translation: null, ratio: null};
      this._steps.push(anim);
      return this;
    },
    addMoveAndHide: function(duration, translation){
      const anim = {name: "moveAndHide", duration: duration, translation: null, ratio: null};
      this._steps.push(anim);
      return this;
    },
    addShowAndHide: function(duration){
      const anim = {name: "showAndHide", duration: duration, translation: null, ratio: null};
      this._steps.push(anim);
      return this;
    },
    addHeartBeating: function(){
      const anim = {name: "beating", duration: duration, translation: null, ratio: null};
      this._steps.push(anim);
      return this;
    },
    buildHandler: function(cycled){
      that = this;
      return function () {
      that.play(this, cycled);
      }
    },
    play: function (element, cycled = false) {
      while (cycled)
      {
      this._run(element, this._steps);
      }
    }
  };
}

const customAnimation = animaster()
  .addMove(200, {x: 40, y: 40})
  .addScale(800, 1.3)
  .addMove(200, {x: 80, y: 0})
  .addScale(800, 1)
  .addMove(200, {x: 40, y: -40})
  .addScale(800, 0.7)
  .addMove(200, {x: 0, y: 0})
  .addScale(800, 1);


const element = document.getElementById('moveBlock');
customAnimation.play(element);

function getTransform(translation, ratio) {
  const result = [];
  if (translation) {
    result.push(`translate(${translation.x}px,${translation.y}px)`);
  }
  if (ratio) {
    result.push(`scale(${ratio})`);
  }
  return result.join(' ');
}

function resetFadeIn(element) {
  element.style.transitionDuration = null;
  element.classList.remove("show");
  element.classList.add("hide");
}

function resetFadeOut(element) {
  element.style.transitionDuration = null;
  element.classList.remove("hide");
  element.classList.add("show");
}

function resetMoveAndScale(element) {
  element.style.transitionDuration = null;
  element.style.transform = null;
}