ColorSpace = function (canvas_id, lights) {
    this.canvas_id = canvas_id;
    this.canvas = null;
    this.scale = 1;
    this.lights = lights;
    this.cscale = 255.0;

    var canvas = document.getElementById(canvas_id);
    if (!canvas)
        return;
    if (!canvas.getContext)
        return;
    this.canvas = canvas;

    //this.init_lights();
};


ColorSpace.prototype.init_lights = function () {
    var c = [0, 0, 0];
    for (var i = 0; i < this.lights.length; i++) {
        for (var ci = 0; ci < 3; ci++)
            c[ci] += this.lights[i][ci];
    }
    var maxcc = 0;
    for (var ci = 0; ci < 3; ci++)
        if (maxcc < c[ci])
            maxcc = c[ci];
    this.cscale = 1.4 * 255.0 / maxcc;
};


// draw a single spotlight 
ColorSpace.prototype.drawlight = function (ctx, li, cc) {
    if (!this.canvas) return;

    var light = this.lights[li];
    var a = 2*Math.PI * (li / this.lights.length + 0.5);
    var x = this.scale * (0.25 * Math.cos(a) + 1);
    var y = this.scale * (0.25 * Math.sin(a) + 1);
    var r = 0.55 * this.scale;

    var cs = [];
    for (var ci = 0; ci < 3; ci++) {
        cs[ci] = Math.floor(cc * light[ci]);
    }

    ctx.fillStyle = 'rgb(' + cs.join(',') + ')';
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI*2, true);
    ctx.fill();
};

ColorSpace.prototype.draw = function (ccs) {
    if (!this.canvas) return;

    if (typeof ccs == 'undefined')
        ccs = [1, 1, 1, 1, 1, 1];

    this.scale = this.canvas.width / 2;

    var ctx = this.canvas.getContext('2d');

    ctx.globalCompositeOperation = 'source-over';

    // draw a series of discs to get a fuzzy border around the
    //  dark background disc
    var nsteps = 8.0;
    for (var i = 0; i < nsteps; i++) {
        var cc = Math.floor(230 * (1.0 - (i+1) / nsteps)) + 25;
        var r = (1.0 - 0.05 * (i+1) / nsteps) * this.scale;

        ctx.fillStyle = 'rgb(' + cc + ',' + cc + ',' + cc + ')';
        ctx.beginPath();
        ctx.arc(this.scale, this.scale, r, 0, Math.PI*2, true);
        ctx.fill();
    }

    ctx.globalCompositeOperation = 'lighter';
    for (var li = 0; li < this.lights.length; li++)
        this.drawlight(ctx, li, ccs[li] * this.cscale);
};


function animate(cspace, wanderer) {
    if (!cspace.canvas) return;

    var t = new Date();
    var dt = 0.001 * (t - wanderer.lastt);
    wanderer.lastt = t;

    wanderer.step(dt);
    wanderer.update_values();

    //console.log('X', dt, wanderer.mix);

    //for (var i = 0; i < cspace.lights.length; i++) {
    //    wanderer.x[i] = 0.96 * wanderer.x[i];
    // }

    cspace.draw(wanderer.values);
    setTimeout(function () { animate(cspace, wanderer); }, 50);
};