var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

function mkGradient(opts){
    opts.ctx.rect(0, 0, opts.r2*2, opts.r2*2);
    
    var g = opts.ctx.createRadialGradient(opts.x||opts.r2, opts.x||opts.r2, opts.r1, opts.x||opts.r2, opts.x||opts.r2, opts.r2);
    
    g.addColorStop(0, opts.c1);
    g.addColorStop(1, opts.c2);
    
    
    opts.ctx.fillStyle = g;
    opts.ctx.fill();
}

function mkPlanet(opts){
    var canvas = document.createElement('canvas');
    canvas.width = opts.r*2.4;
    canvas.height = opts.r*2.4;
    var ctx = canvas.getContext('2d');
    
    // Halo
    mkGradient({
        ctx: ctx,
        r1: opts.r,
        r2: opts.r*1.2,
        c1: opts.h1,
        c2: opts.h2
    });
    
    // Translate to edge of halo.
    var offset = opts.r*1.2-opts.r;
    ctx.translate(offset, offset);

    /// Create planet outline clip
    ctx.beginPath();
    ctx.arc(opts.r, opts.r, opts.r, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.clip();

    // Fill the ocean
    mkGradient({
        ctx: ctx,
        r1: 0,
        r2: opts.r,
        c1: opts.o2,
        c2: opts.o1
    });
    
    // Add some continents
    for(var i=0;i<opts.r; i++){
        ctx.globalAlpha = .8;
        var x = Math.random()*opts.r*2;
        var y = Math.random()*opts.r*2
        ctx.beginPath();
        ctx.arc(x, y, Math.random()*(opts.r/5), 0, 2 * Math.PI);
        ctx.fillStyle = i > opts.r/2 ? opts.c3 : opts.c2;
        ctx.fill();
    }
    ctx.globalAlpha = 1;
    // Add some atmosphere
    mkGradient({
        ctx: ctx,
        r1: opts.r/2,
        r2: opts.r,
        c1: 'rgba(255,255,255,0)',
        c2: 'rgba(255,255,255,.5)'
    });
    
    
    if(!opts.radiant){
      mkGradient({
          ctx: ctx,
          r1: opts.r*1.3,
          r2: opts.r*2,
          c1: 'rgba(0,0,0,0)',
          c2: 'rgba(0,0,0,.8)',
          x: -opts.r/8
      });
    }
    return canvas;
}

var earth = mkPlanet({
    r:100,
    o1: '#0d76b8', // ocean 1
    o2: '#48b8fb', // ocean color 2
    c2: '#156b15', // land color 1
    c3: '#1C7D1C', // land color 2
    h1: '#48d6f9', // halo color 1
    h2: 'rgba(134,59,249,0)' // halo color 2
});

var europa = mkPlanet({
    r:50,
    o1: '#315A9E',
    o2: '#113A7D',
    c2: '#E1ECFF',
    c3: '#F2F7FF',
    h1: 'rgba(255,255,255,.5)',
    h2: 'rgba(134,59,249,0)'
});


var mars = mkPlanet({
    r:90,
    o1: '#621100',
    o2: '#723F36',
    c2: '#FF2F00',
    c3: '#BD2200',
    h1: 'rgba(255,122,0,.8)',
    h2: 'rgba(255,12,0,0)'
});


var sun = mkPlanet({
    r:200,
    o1: '#FFF500',
    o2: '#FFE300',
    c2: '#FFC700',
    c3: '#FFAF00',
    h1: 'rgba(255,122,0,1)',
    h2: 'rgba(255,12,0,0)',
    radiant:true
});

ctx.drawImage(sun,0,0);
ctx.drawImage(earth,500,120);
ctx.drawImage(mars,750,130);
ctx.drawImage(europa,1000,180);