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

var canvas = document.getElementById('canvas'),
    ctx        = canvas.getContext('2d'),
    ww         = window.innerWidth,
    wh         = window.innerHeight,
    g          = [ww/15, wh/15],
    fps        = 25,
    j          = 0,
    c          = 5,
    size       = 10,
    n          = 8
speed      = 50;

canvas.width  = ww;
canvas.height = wh;

ctx.fillStyle="rgba(255,255,255,.5)";
ctx.strokeStyle="rgba(255,255,255,.6)";

function draw() {
  setTimeout(function() {
    requestAnimationFrame(draw);

    ctx.clearRect(0,0,ww, wh);
    ctx.save();

    ctx.translate( ww/2,wh/2 );
    ctx.rotate(j/(speed*2));
    ctx.translate( -ww/2,-wh/2 );

    for(var i=0;i<n;i++){
      ctx.translate( ww/2,wh/2 );
      ctx.rotate(Math.PI/(n/2));
      ctx.translate( -ww/2,-wh/2 );
      for(var k=1;k<c;k++){
        ctx.beginPath();
        ctx.arc(ww/2+g[0]*2, wh/2+g[1]*2, k*size, 0, Math.PI*2, false);
        ctx.stroke();
        ctx.closePath();
      }
    }
    ctx.restore();

    j++;
  }, 1000 / fps);
};
draw();


//CONTROLS

document.body.addEventListener("mousemove", function(e){
  g = [ww/2-e.x, wh/2-e.y];
});
var controls = true;
document.body.addEventListener("keypress", function(e){
  if(e.keyCode==32 && controls){
    document.getElementById("form").classList.add("visible");
    document.getElementById("form").style.left = (ww/2-g[0])+"px";
    document.getElementById("form").style.top  = (wh/2-g[1])+"px";
    document.getElementById("tip").innerHTML   = "Press space to hide controls.";
  }
  else{
    document.getElementById("form").classList.remove("visible");
    document.getElementById("tip").innerHTML = "Press space for controls";
  }
});
document.body.addEventListener("keyup", function(e){
  if(e.keyCode==32){
    controls = !controls;
  }
});

document.getElementById("circles").addEventListener("input", function(){
  c = this.value;
});
document.getElementById("size").addEventListener("input", function(){
  size = this.value;
});
document.getElementById("number").addEventListener("input", function(){
  n = this.value;
});
document.getElementById("color").addEventListener("input", function(){
  ctx.strokeStyle = this.value;
});
document.getElementById("speed").addEventListener("input", function(){
  speed = 200-this.value;
  if(this.value==0)speed=0;
});
document.getElementById("close").addEventListener("click", function(){
  document.getElementById("form").classList.remove("visible");
  document.getElementById("tip").innerHTML = "Press space for controls";
  controls=true;
});