/**
 * @author Nityanand Ojha
 * @sprite animation
 */

window.requestAnimFrame = (function (callback) {
  return (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback) {
      window.setTimeout(callback, 1000 / 60);
    }
  );
})();

function animate() {
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  spriteMap.draw(context, 0, 0); // Draw the sprite
  requestAnimFrame(animate); // Run the animation loop
}

var pos = [
  { top: 9, left: 26 },
  { top: 7, left: 35 },
  { top: 7, left: 45 },
  { top: 5, left: 55 },
  { top: 4, left: 66 },
   { top: 4, left: 76 },
];
/*var pos = [{top:363, left:775},
			{top:373, left:660},
			{top:376, left:530},
			{top:389, left:410},
			{top:393, left:260},
			{top:383, left:120}]*/

var cStat = "";
var animNo = 0;
var feedbackVid = {
  init: function () {
    var __main = document.getElementById(spriteOBJ.parentDiv);
    var canvas = document.createElement("canvas");
    __main.appendChild(canvas);
    canvas.width = spriteOBJ.frameW;
    canvas.height = spriteOBJ.frameH;
    canvas.style.position = "absolute";
    canvas.style.transition =
      "left 0.6s cubic-bezier(.55,.06,.68,.19) 0.4s, top 0.6s cubic-bezier(.55,.06,.68,.19) 0.4s";
    canvas.style.webkitTransition =
      "left 0.6s cubic-bezier(.55,.06,.68,.19) 0.4s, top 0.6s cubic-bezier(.55,.06,.68,.19) 0.4s";
    canvas.setAttribute("id", "animCanvas");
    canvas.style.bottom = spriteOBJ.animBottom + "vh";
    canvas.style.left = spriteOBJ.animLeft + "%";
    context = canvas.getContext("2d");

    var animNames = ["ideal", "right", "wrong"];

    // Initialize the SpriteMap
    spriteMap = new SpriteMap(spriteOBJ.imagePath, spriteOBJ.animSequence, {
      frameW: spriteOBJ.frameW,
      frameH: spriteOBJ.frameH,
      projectedW: spriteOBJ.frameW, // Displayed width
      projectedH: spriteOBJ.frameH, // Displayed height
      interval: 50, // Switch frames every 50ms
      useTimer: false, // Rely on requestAnimFrame to update frames instead of setInterval

      postInitCallback: function (sprite) {
        spriteMap.start("ideal"); // Start running the animation
        animate();
      },
    });
  },

  playCorrectFeedback: function (func) {
    fun = func;
    spriteMap.runOnce(onFinish, "right");
    var animCanv = document.getElementById("animCanvas");
    animCanv.style.bottom = pos[animNo].top + "vh";
    animCanv.style.left = pos[animNo].left + "%";
    cStat = "ideal";
  },

  playWrongFeedback: function (func) {
    fun = func;
    spriteMap.runOnce(onFinishWrong, "wrong");
    cStat = "ideal";
  },

  doReset: function () {
    spriteMap.use("ideal");
    animNo++;
  },
};

function onFinish() {
  //console.log(spriteMap.activeLoop, " finish");
  spriteMap.use(cStat);
  var animCanv1 = document.getElementById("animCanvas");
  animCanv1.style.bottom = pos[animNo].top + "vh";
  animCanv1.style.left = pos[animNo].left + "%";
  animNo++;

  try {
    fun();
  } catch (Err) {
    console.log("Error:  ", Err);
  }
}
function onFinishWrong() {
  //console.log(spriteMap.activeLoop, " finish");
  spriteMap.use(cStat);

  try {
    fun();
  } catch (Err) {
    console.log("Error:  ", Err);
  }
}
