var ctx, level;


function init() {
    level = 0;
    ctx = document.getElementById("canvas").getContext("2d");
    next();
}


function next() {
    if (level > 7) {
        ctx.clearRect(0, 0, 257, 257);
        level = 0;
    } else {
        var xs = [.5, 0 ,.5, .99999, .5];
        var ys = [0, .5, .5, .5, .99999];
        var n = 1 << level;
        var w = 256 >> level;
        var colors = ["#00f", "#0f0", "#f00", "#0ff",
                      "#f0f", "#830", "#056", "#000"];
        ctx.fillStyle = "#000"; //colors[level];
        for (var row = 0 ; row < n ; row++) {
            var y0 = row * w;
            for (var col = 0 ; col < n ; col++) {
                var x0 = col * w;
                for (var i = 0 ; i < 5 ; i++) {
                    var x = x0 + Math.floor(w * xs[i]) - .5;
                    var y = y0 + Math.floor(w * ys[i]) - .5;
                    ctx.fillRect(x, y, 1, 1);
                }
            }
        }
        level += 1;
    }
    setTimeout(next, 1500);
}