(function() {
  
  // Return if canvas support isn't detected
  if (!document.createElement('canvas').getContext) {
    return;
  }
  
  var canvas = document.createElement("canvas"),
      context = canvas.getContext("2d"),
    height = 800,
    width = 800;
    var delta = 0;
    var interval = null;
    
  $(canvas).attr("width", height);
  $(canvas).attr("height", width);
  $(canvas).css({
    "position" : "absolute",
    "left" : "50%",
    "top" : "15px",
    "marginLeft" : "-400px"
  });
  document.body.appendChild(canvas);
  context.save();
  context.translate(height/2, width/2);
  
  function draw() {
    context.clearRect(-width/2,-height/2,width, height);
    for (var i=1; i<=4; i++) {
      var rotation = (90 * i) + delta;
      context.save();
      context.rotate(rotation * Math.PI/180);
      context.drawImage(targets, 218 * (i-1), 0, 218, 218, -109, -400, 218, 218);
      context.restore();
    }
    
    if (delta === 0 || delta % 90 == 0) {
        if (interval) {
          clearInterval(interval);
        }
        // take a break;
        setTimeout(function() {
           interval = setInterval(draw, 40);
        }, 4000);
      }
    context.clearRect(-width/2,-height/2 + 150,width, height);
    delta += 1;
  };
  
  var targets = new Image();
  targets.onload = loadLoop;
  targets.src = "/images/targets.png";
  
  function loadLoop() {
      draw();
      $(".main-title").hide();
  }
})();