// alert("bar");

var g_buttons = {
    ids : [ "red_button",
            "green_button",
            "blue_button",
            "orange_button",
            "yellow_button",
            "purple_button"
            ],
    colors : [ "red",
               "green",
               "blue",
               "orange",
               "yellow",
               "purple"
               ],
};

var g_board = {};

var idToIndex = function( id ) {
    var ii;
    for ( ii = 0; ii < g_buttons.ids.length; ++ii ) {
        if ( id == g_buttons.ids[ii] ) {
            break;
        }
    }
    return ii;
}

// On click we have a new IT color index.  We'll display all IT squares in
// that color, and we'll assimilate neighboring squares of that color into IT.
var clicked = function() {
    var index = idToIndex( this.id );
    g_board.itColor = index;

    g_board.it.push( expandIT() );
//     printIT();

    drawBoard();
};

var initButtons = function() {
    for ( ii = 0; ii < g_buttons.ids.length; ++ii ) {
        var button = document.getElementById( g_buttons.ids[ii] );
        if ( button ) {
            button.onclick = clicked;
            button.style.backgroundColor = g_buttons.colors[ii];
        }
    }
};

var initBoard = function() {
    var col, row;
    g_board.it = [];
    g_board.width = 12;
    g_board.cells = new Array(g_board.width);
    for ( row = 0; row < g_board.width; ++row ) {
        var arr = new Array(g_board.width);
        g_board.cells[row] = arr;

        for ( col = 0; col < g_board.width; ++col ) {
            g_board.cells[row][col] = { inIT: false, col: col, row: row };
        }
    }
};

var assignRandomColors = function() {
    var row, col;

    for ( row = 0; row < g_board.width; ++row ) {
        for ( col = 0; col < g_board.width; ++col ) {
            g_board.cells[row][col].colorIndex = Math.round((Math.random() * 1000)) % g_buttons.ids.length;
        }
    }
};

var addIfNewMatch = function( newAdds, col, row ) {
    var neighbor = g_board.cells[row][col];
    if ( ! neighbor ) { 
        alert( "no such cell at addIfNewMatch: col: " + col + "; row: " + row );
    }
    if ( !neighbor.inIT && neighbor.colorIndex == g_board.itColor ) {
        neighbor.inIT = true;
        newAdds.push( neighbor );
//         alert( "adding col: " + col + "; row: " + row );
    }
};

var addNeighbors = function( newGuys, cell ) {
    var col = cell.col;
    var row = cell.row;
    var edge = g_board.width - 1;

//     alert( "addNeighbors: col: " + col + "; row: " + row );

    if ( col > 0 ) {
        addIfNewMatch( newGuys, col-1, row );
    }
    if ( col < edge ) {
        addIfNewMatch( newGuys, col+1, row );
    }
    if ( row > 0 ) {
        addIfNewMatch( newGuys, col, row - 1 );
    }
    if ( row < edge ) {
        addIfNewMatch( newGuys, col, row + 1 );
    }
};

var expandIT = function() {
    var newMove = [];
    for ( nTurns = 0; nTurns < g_board.it.length; ++nTurns ) {
        for ( ii = 0; ii < g_board.it[nTurns].length; ++ii ) {
            addNeighbors( newMove, g_board.it[nTurns][ii] );
        }
    }

    var seenLen = 0;
    while ( true ) {
        var added = [];
        var ii;
        for ( ii = seenLen; ii < newMove.length; ++ii ) {
            addNeighbors( added, newMove[ii] );
        }
        if ( 0 == added.length ) {
            break;
        }
        seenLen = newMove.length;
        newMove = newMove.concat( added );
    }

    return newMove;
}

var initIT = function() {
    var initialITColor = g_board.cells[0][0].colorIndex;
    g_board.itColor = initialITColor;

    var firstCell = g_board.cells[0][0];
    firstCell.inIT = true;
    g_board.it = [];
    g_board.it[0] = [ firstCell ];

    g_board.it[0] = g_board.it[0].concat( expandIT() );
};

var printIT = function() {
    var str = "hi:\n";
    var nTurns, ii;
    for ( nTurns = 0; nTurns < g_board.it.length; ++nTurns ) {
        str += "[";
        for ( ii = 0; ii < g_board.it[nTurns].length; ++ii ) {
            var cell = g_board.it[nTurns][ii];
            str += "{col:" + cell.col + ", row: " + cell.row + "}, "
        }
        str += "]\n";
    }
    alert( str );
};

var drawBoard = function() {
    var ii, jj;

    var canvas = document.getElementById( "board" );
    var height = canvas.height;
    var width = canvas.width;
    if ( width != height ) {
        alert( "canvas not square!!!" );
    }
    var cellSize = width / g_board.width;
    var border = (width % g_board.width) / 2;

    var context = canvas.getContext( "2d" );

    for ( row = 0; row < g_board.width; ++row ) {
        for ( col = 0; col < g_board.cells[row].length; ++col ) {
            var cell = g_board.cells[row][col];
            var indx = cell.inIT ? g_board.itColor : cell.colorIndex;
            context.fillStyle = g_buttons.colors[indx];
            context.fillRect( border + (col*cellSize), border + (row * cellSize), cellSize, cellSize );
        }
    }

};

window.onload = function () {
    var ii;

    initButtons();

    initBoard();
    assignRandomColors();
    initIT();
//     printIT();

    drawBoard();
};