/**
    A JavaScript implementation of the gif found here: http://gif.flrn.nl/post/106259683043
*/
window.requestAnimFrame = (function(){
  return window.requestAnimationFrame    ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame    ||
    function( callback ){
    window.setTimeout(callback, 1000 / 60);
  };
})();

var rad = function(deg) {
  return (deg * (Math.PI / 180));
};

var InterruptedRing = function(ctx, x, y, radius, interruptions, sizeOfInterruption, color, velocity) {
  this.x = x;                     // center-x
  this.y = y;                     // center-y
  this.r = radius;                // the radius of the ring
  this.i = interruptions;         // the amount of gaps in the ring
  this.d = sizeOfInterruption;    // the length of a gap in degrees!
  this.v = velocity;              // the speed and direction of the rotation 
  this.s = color;                 // fill style, might as well be a gradient or pattern
  this.c = ctx;                   // canvas context
  this.o = (Math.floor(Math.random() * 360) * (velocity < 0 ? -1 : 1)); // random start rotation
  this.l = Math.floor((360 - (interruptions * sizeOfInterruption)) / interruptions); // size of a leg in degrees
};

/**
 * step() updates the o property of an InterruptedRing, which is the 
 * offset angle for both start and end angle arguments in the arc call.
 * This value is used to rotate the ring, instead of rotating the whole ctx.
 */
InterruptedRing.prototype.step = function() {
  this.o = ((this.o + this.v) % 360);
};

InterruptedRing.prototype.render = function() {
  var p = 0;
  while(p < 360) {
    this.c.beginPath();
      this.c.arc(this.x, this.y, this.r, rad(p + this.o), rad(p + this.o + this.l), false);
      this.c.lineWidth = 5;
      this.c.strokeStyle = this.s;
      this.c.stroke();
    this.c.closePath();

    p += (this.d + this.l); 
  }
};

$(function() {
  var canvas = document.getElementById('animation');
  var context = canvas.getContext('2d');

  var cx = 200;
  var cy = 200;

  // all the speeds are estimates of the original, good enough for me! 
  var rings = [
    // group 1
    new InterruptedRing(context, cx, cy, 8,   1, 60, '#d53933', -2), // radius:12 + linewidth:5 + space:5
    new InterruptedRing(context, cx, cy, 17,  4, 30, '#1d909a', 1),
    new InterruptedRing(context, cx, cy, 26,  2, 15, '#e59c10', -1.5),

    // group 2
    new InterruptedRing(context, cx, cy, 35,  2, 10, '#d53933', 1.5),
    new InterruptedRing(context, cx, cy, 44,  4, 10, '#1d909a', -0.5),
    new InterruptedRing(context, cx, cy, 53,  2, 8,  '#e59c10', -1),

    // group 3
    new InterruptedRing(context, cx, cy, 62,  2, 6,  '#d53933', -1.6),
    new InterruptedRing(context, cx, cy, 71,  4, 6,  '#1d909a', -0.60),
    new InterruptedRing(context, cx, cy, 80,  2, 6,  '#e59c10', 1.1),

    // group 4
    new InterruptedRing(context, cx, cy, 89,  2, 6,  '#d53933', 1.05),
    new InterruptedRing(context, cx, cy, 98,  5, 6,  '#1d909a', -0.50),
    new InterruptedRing(context, cx, cy, 107, 3, 5,  '#e59c10', 0.9),

    // group 5
    new InterruptedRing(context, cx, cy, 116, 2, 5,  '#d53933', -0.9),
    new InterruptedRing(context, cx, cy, 125, 4, 5,  '#1d909a', 0.60),
    new InterruptedRing(context, cx, cy, 134, 6, 5,  '#e59c10', -0.40),
  ];


  // animate those interrupted rings!!
  var anim = function anim() {
    requestAnimFrame(anim);

    context.clearRect(0, 0, 400, 400);
    for(var i in rings) rings[i].step(); // step all before render all ;)
    for(var i in rings) rings[i].render();
  }; anim();
});