var DOT_SIZE = 16;
var X_START_POS = 50;
var Y_START_POS = 50;

// ‥‥‥‥‥‥‥‥‥‥‥‥‥□□□
// ‥‥‥‥‥‥〓〓〓〓〓‥‥□□□
// ‥‥‥‥‥〓〓〓〓〓〓〓〓〓□□
// ‥‥‥‥‥■■■□□■□‥■■■
// ‥‥‥‥■□■□□□■□□■■■
// ‥‥‥‥■□■■□□□■□□□■
// ‥‥‥‥■■□□□□■■■■■‥
// ‥‥‥‥‥‥□□□□□□□■‥‥
// ‥‥■■■■■〓■■■〓■‥‥‥
// ‥■■■■■■■〓■■■〓‥‥■
// □□■■■■■■〓〓〓〓〓‥‥■
// □□□‥〓〓■〓〓□〓〓□〓■■
// ‥□‥■〓〓〓〓〓〓〓〓〓〓■■
// ‥‥■■■〓〓〓〓〓〓〓〓〓■■
// ‥■■■〓〓〓〓〓〓〓‥‥‥‥‥
// ‥■‥‥〓〓〓〓‥‥‥‥‥‥‥‥
var dataSet = [
    "BK","BK","BK","BK","BK","BK","BK","BK","BK","BK","BK","BK","BK","BG","BG","BG",
    "BK","BK","BK","BK","BK","BK","RD","RD","RD","RD","RD","BK","BK","BG","BG","BG",
    "BK","BK","BK","BK","BK","RD","RD","RD","RD","RD","RD","RD","RD","RD","BG","BG",
    "BK","BK","BK","BK","BK","BR","BR","BR","BG","BG","BR","BG","BK","RD","RD","RD",
    "BK","BK","BK","BK","BR","BG","BR","BG","BG","BG","BR","BG","BG","RD","RD","RD",
    "BK","BK","BK","BK","BR","BG","BR","BR","BG","BG","BG","BR","BG","BG","BG","RD",
    "BK","BK","BK","BK","BR","BR","BG","BG","BG","BG","BR","BR","BR","BR","RD","BK",
    "BK","BK","BK","BK","BK","BK","BG","BG","BG","BG","BG","BG","BG","RD","BK","BK",
    "BK","BK","RD","RD","RD","RD","RD","BL","RD","RD","RD","BL","RD","BK","BK","BK",
    "BK","RD","RD","RD","RD","RD","RD","RD","BL","RD","RD","RD","BL","BK","BK","BR",
    "BG","BG","RD","RD","RD","RD","RD","RD","BL","BL","BL","BL","BL","BK","BK","BR",
    "BG","BG","BG","BK","BL","BL","RD","BL","BL","YL","BL","BL","YL","BL","BR","BR",
    "BK","BG","BK","BR","BL","BL","BL","BL","BL","BL","BL","BL","BL","BL","BR","BR",
    "BK","BK","BR","BR","BR","BL","BL","BL","BL","BL","BL","BL","BL","BL","BR","BR",
    "BK","BR","BR","BR","BL","BL","BL","BL","BL","BL","BL","BK","BK","BK","BK","BK",
    "BK","BR","BK","BK","BL","BL","BL","BL","BK","BK","BK","BK","BK","BK","BK","BK"
];

function getRgbColor(colorType)
{
    var colorHash = {
        "BK":"#000000", // black
        "WH":"#FFFFFF", // white
        "BG":"#FFCCCC", // beige
        "BR":"#800000", // brown
        "RD":"#FF0000", // red
        "YL":"#FFFF00", // yellow
        "GN":"#00FF00", // green
        "WT":"#00FFFF", // water
        "BL":"#0000FF", // blue
        "PR":"#800080"  // purple
    };
    return colorHash[colorType];
}

function getSingleLightColor(colorType, rgbType) {
    var result = "";
    var rgb = getRgbColor(colorType);
    rgb = rgb.replace("#", "");
    var r = parseInt("0x" + rgb.substr(0, 2), 16);
    var g = parseInt("0x" + rgb.substr(2, 2), 16);
    var b = parseInt("0x" + rgb.substr(4, 2), 16);
    switch (rgbType) {
        case 'r':
            r = r;
            g = 0;
            b = 0;
            break;
        case 'g':
            r = 0;
            g = g;
            b = 0;
            break;
        case 'b':
            r = 0;
            g = 0;
            b = b;
            break;
    }
    result = "rgb( " + r + ", " + g + ", " + b + ")";
    return result;
}

window.requestAnimationFrame = ( function(){
    return  window.requestAnimationFrame       || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame    || 
            window.oRequestAnimationFrame      || 
            window.msRequestAnimationFrame     || 
            function( callback ){
                window.setTimeout( callback, 1000.0 / 60.0 );
            };
} )();

var width, height;
var canvas;
var ctx;
var pos = 0;
function init() {
    width = 465;
    height = 465;
    canvas = document.getElementById("canvas");
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext("2d");
    pos = 0;
}

function animate() {
    setInterval( render, 200 );
}

function render() {
    var i, x, y;
    var colorType;
    var color;
    var colorR;
    var colorG;
    var colorB;
    for (i = 0; i < dataSet.length; i++) {
        x = X_START_POS + ((i + pos) % 16) * DOT_SIZE;
        y = Y_START_POS + Math.floor(i / 16) * DOT_SIZE;
        colorType = dataSet[i];
        colorR = getSingleLightColor(colorType, "r");
        colorG = getSingleLightColor(colorType, "g");
        colorB = getSingleLightColor(colorType, "b");
        ctx.fillStyle = colorR;
        ctx.fillRect(x + DOT_SIZE / 3 * 1, y, DOT_SIZE / 3 - 2, DOT_SIZE - 2);
        ctx.fillStyle = colorG;
        ctx.fillRect(x + DOT_SIZE / 3 * 2, y, DOT_SIZE / 3 - 2, DOT_SIZE - 2);
        ctx.fillStyle = colorB;
        ctx.fillRect(x + DOT_SIZE / 3 * 3, y, DOT_SIZE / 3 - 2, DOT_SIZE - 2);
    }
    pos++;
}

init();
animate();