var c = document.querySelector('canvas'), 
    ctx = c.getContext('2d'), 
    w, h, min_dim, 
    t = 0, r_id = null, 
    e = [], n = 16;

var Ellipse = function(base_r, φ, amplit) {
  this.r = base_r || 128;
  this.φ = φ || 0;
  this.a = amplit || 32;
  this.ρ = {};
  
  this.draw = function(ctxt) {
    var θ = this.φ + t*Math.PI/60;
    
    this.ρ = {
      'x': this.r + this.a*Math.cos(θ), 
      'y': this.r + this.a*Math.sin(θ)
    };
    
    ctxt.save();
    ctxt.beginPath();
    
    /* using the new ellipse function 
     * that only works in Chrome/ Opera atm 
     * see link in pen description
     */
    if(ctxt.ellipse && 
       this.ρ.x > 0 && this.ρ.y > 0) {
      ctxt.ellipse(0, 0, this.ρ.x, this.ρ.y, 0, 
                   0, 2*Math.PI);
    }
    else {
      ctxt.scale(this.ρ.x/this.r, 
                 this.ρ.y/this.r);
      ctxt.arc(0, 0, this.r, 0, 2*Math.PI);
    }
    
    ctxt.closePath();
    ctxt.stroke();
    ctxt.restore();
  };
};

var init = function() {
  var s = getComputedStyle(c), r;
  
  if(r_id) {
    cancelAnimationFrame(r_id);
    r_id = null;
    t = 0;
  }
  
  e = [];
  
  w = c.width = ~~s.width.split('px')[0];
  h = c.height = ~~s.height.split('px')[0];
  min_dim = Math.min(w, h);
  
  ctx.translate(w/2, h/2);
  ctx.strokeStyle = 'deepskyblue';
  
  for(var i = 0; i < n; i++) {
    r = min_dim/3 - i*(min_dim - 64)/3/n;
    e.push(new Ellipse(r, i*Math.PI/36));
  }
  
  console.log(ctx.ellipse ? 
    'Hi, I support the new ellipse function!' : 
    'Sorry, I don\'t support ellipse() yet :(');
  
  draw();
};

var draw = function() {
  ctx.clearRect(-w/2, -h/2, w, h);
  
  for(var i = 0; i < n; i++) {
    e[i].draw(ctx);
  }
  
  t++;
  
  r_id = requestAnimationFrame(draw);
};

setTimeout(function() {
  init();
  
  addEventListener('resize', init, 15);
}, 15);