var UI_CELLS = [];

function dCreate(domName) {
    return document.createElement(domName);
}

function uiCreateCell(cellData) {
    var cell = dCreate("div");

    cell.className = R.klass.cell.item;
    if (cellData.isBlack) {
        cell.classList.add(R.klass.cell.black);
    } else if (cellData.definitions !== null) {
        cell.classList.add(R.klass.cell.definition);
    } else {
        cell.classList.add(R.klass.cell.letter);
        console.log(cellData);
    }
    return cell;
}

function uiCreateGrid() {
    var frag = document.createDocumentFragment();

    for (var i =0; i < GRID.height; i++) {
        var line = dCreate("div");

        line.className = R.klass.line;
        frag.appendChild(line);
        for (var j =0; j < GRID.width; j++) {
            var cell = uiCreateCell(GRID.grid[j][i]);
            line.appendChild(cell);
            UI_CELLS.push({
                x: j
                ,y: i
                ,dom: cell
                ,data: GRID.grid[j][i]
            });
        }
    }
    document.body.textContent = "";
    document.body.appendChild(frag);
}

function onGridUpdated() {
    UI_CELLS.forEach(function(i) {
        if (!i.data.definitions && !i.data.isBlack) {
            //TODO
        }
    });
}