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);
        var cellContent =dCreate("span");
        cellData.definitions.forEach(function(definition) {
            var domDefinition = dCreate("span");
            domDefinition.className = R.klass.cell.definitions.item;
            domDefinition.innerHTML = definition.text.join("<br/>");
            cellContent.appendChild(domDefinition);
        });
        cell.appendChild(cellContent);
    } else {
        cell.classList.add(R.klass.cell.letter);
    }
    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]);
            cell.dataset.x = j;
            cell.dataset.y = i;
            line.appendChild(cell);
            UI_CELLS.push({
                x: j
                ,y: i
                ,dom: cell
                ,data: GRID.grid[j][i]
            });
        }
    }
    for (var i =0; i < GRID.height; i++) {
        for (var j =0; j < GRID.width; j++) {
            var cell = UI_CELLS[i *GRID.width +j];
            if (cell.data.definitions) {
                cell.data.definitions.forEach(function(d) {
                    switch (d.direction) {
                        case Definition.RIGHT_VERTICAL:
                            UI_CELLS[i *GRID.width +j +1].dom.classList.add(R.klass.cell.definitions.rightVertical);
                        break;

                        case Definition.RIGHT_HORIZONTAL:
                            UI_CELLS[i *GRID.width +j +1].dom.classList.add(R.klass.cell.definitions.rightHorizontal);
                        break;

                        case Definition.BOTTOM_VERTICAL:
                            UI_CELLS[(i +1) *GRID.width +j].dom.classList.add(R.klass.cell.definitions.bottomVertical);
                        break;

                        case Definition.BOTTOM_HORIZONTAL:
                            UI_CELLS[(i +1) *GRID.width +j].dom.classList.add(R.klass.cell.definitions.bottomHorizontal);
                        break;
                    }
                });
            }
        }
    }
    document.body.textContent = "";
    document.body.appendChild(frag);
}

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

function gridClickDelegate(e) {
    var target = e.target;
    while (target && !target.classList.contains(R.klass.cell.item))
        target = target.parentElement;
    if (target && target.dataset && target.dataset.x && target.dataset.y) {
        var clickedCell = UI_CELLS[parseInt(target.dataset.x, 10) +parseInt(target.dataset.y, 10) *GRID.width];
        if (clickedCell.data.isBlack) {
            unselect();
        } else if (clickedCell.data.definitions) {
            var first = true;
            unselect();
            if (clickedCell.data.definitions.length) {
                clickedCell.data.definitions[0].word.forEach(function(coordinates) {
                    select(coordinates[0], coordinates[1]);
                    if (first) {
                        CURRENTINPUT = UI_CELLS[coordinates[0] +coordinates[1] *GRID.width];
                        CURRENTINPUT.dom.classList.add(R.klass.cell.currentInput);
                        first = false;
                    }
                });
            }
        } else {
            var words = GRID.getWord(clickedCell.x, clickedCell.y);
            unselect();
            words.forEach(function (word) {
                word.forEach(function (coordinates) {
                    select(coordinates[0], coordinates[1]);
                });
            });
            target.classList.add(R.klass.cell.currentInput);
            CURRENTINPUT = clickedCell;
        }
    }
}