console.log('begin');

var url = 'https://cdn.rawgit.com/darosh/scrolls-and-decks/master/client/';
var id = 591;
var element = document.documentElement;
var attrs = {};

var canvas = document.createElement('canvas');

var zoom = 1;
var shift = 0;

canvas.width = 530 * zoom;
canvas.height = 490 * zoom;
element.appendChild(canvas);
var ctx = canvas.getContext('2d');
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);

var standDeferred = $.Deferred();
var standImg = new Image();
standImg.src = url + 'images/unitstand.png';
standDeferred.img = standImg;
standImg.onload = function() {
  standDeferred.resolve(standDeferred);
};

var spritesImg = new Image();
var data;

data = $.ajax({
  url: url + 'data/bundles/' + id + '/data.json',
});

var deferred = $.Deferred();

spritesImg.src = url + 'data/bundles/' + id + '/sprites.png';
spritesImg.onload = function() {
  deferred.img = spritesImg;
  deferred.resolve(deferred);
};

$.when(data, standDeferred, deferred).then(ready);

function ready(d) {
  data = d[0];
  console.log('ready');  
  
  var fps = 24;
  var firstFrameTime = null;

  function animate() {
    window.requestAnimationFrame(function() {

      var time = (new Date()).getTime();

      var animation = data.animations.idle;

      if (!firstFrameTime) {
        firstFrameTime = time;
      }

      var elapsed = Math.round((time - firstFrameTime) / (1000 / fps));

      var animated = true;
      var inView = true;
      var delay = (animated && inView) ? (1000 / 30) : (1000 / 3);
      var frame = elapsed % animation.length;

      if (inView || (elapsed === 0)) {
        if ((frame !== previousFrame) && (animated || previousFrame === null)) {
          previousFrame = frame;
          renderFrame(animation[frame]);
        }
      }

      setTimeout(function() {
        animate();
      }, delay);
    });
  }

  var previousFrame = null;

  animate(id);
}

function renderPart(part) {
  if (part.length === 3) {
    part.splice(1, 0, 1, 0, 0, 1);
  }

  var s = data.sprites[part[0]];
  var e = 264 * zoom + part[5] / (s[4] / s[2]);
  var f = 270 * zoom + shift + part[6] / (s[5] / s[3]);
  ctx.setTransform(part[1], part[2], part[3], part[4], e, f);
  ctx.drawImage(spritesImg, s[0], s[1], s[2], s[3], 0, 0, s[2], s[3]);
}

function clearFrame() {
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var w = standImg.width * 0.58;
  var h = standImg.height * 0.58;
  ctx.globalAlpha = 0.18;
  ctx.drawImage(standImg, 0, 0, standImg.width, standImg.height, (canvas.width - w) / 2, 328 * zoom + shift, w, h);
  
  ctx.globalAlpha = 1;
}

function renderFrame(frame) {
  clearFrame();
  frame.forEach(renderPart);
}