             else
                 return
 
-            @props.requestOp Ot.opEditCellValue grid_focus.row, grid_focus.col, name, value
+            @props.requestOp Ot.opEditCellValue row, col, name, value
 
             grid_focus.field_open = "none"
             @setState { grid_focus: grid_focus }

# some user configuration settings.

PuzzlePage = React.createClass
    render: ->
        if @state.puzzle == null
            <div className="puzzle_container">
              Loading puzzle...
            </div>
        else
            <div className="puzzle_container">
              <div className="puzzle_grid">
                <table className="puzzle_grid_table">
                  { @render_rows() }
                </table>
                <input type="button" value="Re-assign numbers" onClick={this.renumber} />
                <input type="checkbox"
                        defaultChecked={true}
                        onChange={@toggleMaintainRotationalSymmetry} />
                    Maintain rotational symmetry
              </div>
              <div style={{'border': '2px solid black'}}>
                <EditableTextField
                        defaultText={@state.initial_puzzle.across_clues}
                        produceOp={(op) => @clueEdited('across', op)}
                        ref="acrossClues" />
              </div>
              <div className="offline_mode">
                <input type="checkbox"
                        defaultChecked={false}
                        onChange={@toggleOffline} />
                    Offline mode
              </div>
            </div>

    render_rows: ->
        for row in [0 ... @state.puzzle.grid.length]
            puzzle_row = @state.puzzle.grid[row]

            <tr className="puzzle_grid_row" key={"tr-"+row}>
                { @render_cells(row, puzzle_row) }
            </tr>

    render_cells: (row, puzzle_row) ->
        for col in [0 ... puzzle_row.length]
            do (col) =>
                cell = puzzle_row[col]

                <td onClick={() => @onCellClick(row, col)}
                    key={"td-"+row+"-"+col}
                    className={"puzzle_grid_cell " + @getCellClass(row, col)}>
                {
                    if cell.open
                        <div>
                          <div style={{position: 'relative', height: '100%', width: '100%'}}>
                            <div className="cell_number">
                                {if cell.number != null then cell.number else ""}
                            </div>
                          </div>
                          <div className="cell_contents">
                            {if cell.contents == "" then "\xA0" else cell.contents}
                          </div>
                        </div>
                }
                {
                    if @doesCellHaveFieldOpen(row, col)
                        <div style={{position: 'relative'}}>
                          <div className="cellField">
                            <input type="text" id="cellFieldInput"
                                      ref={@onCellFieldCreate}
                                      className="dont-bubble-keydown"
                                      onKeyDown={@onCellFieldKeyPress} />
                          </div>
                        </div>
                }
                </td>

    onCellFieldCreate: (field) ->
        if field?
            React.findDOMNode(field).focus()

    getInitialState: () ->
        puzzle: null
        

    clueEdited: (name, local_text_op) ->
        @props.requestOp(Ot.getClueOp(name, local_text_op))

    render: ->
        if @state.puzzle == null
            <div className="puzzle_container">
              Loading puzzle...
            </div>
        else
            <div className="puzzle_container">
              <div className="puzzle_grid">
                <PuzzleGrid
                    grid={@state.puzzle.grid}
                    grid_focus={@state.grid_focus}
                    cell_classes={@getCellClasses()}
                    onCellClick={@onCellClick}
                    onCellFieldKeyPress={@onCellFieldKeyPress}
                  />
                <input type="button" value="Re-assign numbers" onClick={this.renumber} />
                <input type="checkbox"
                        defaultChecked={true}
                        onChange={@toggleMaintainRotationalSymmetry} />
                    Maintain rotational symmetry
              </div>
              <div style={{'border': '2px solid black'}}>
                <EditableTextField
                        defaultText={@state.initial_puzzle.across_clues}
                        produceOp={(op) => @clueEdited('across', op)}
                        ref="acrossClues" />
              </div>
              <div className="offline_mode">
                <input type="checkbox"
                        defaultChecked={false}
                        onChange={@toggleOffline} />
                    Offline mode
              </div>
            </div>
 

PuzzleGrid = React.createClass
    render: ->
        <table className="puzzle_grid_table">
            { for row in [0 ... @props.grid.length]
               do (row) =>
                <PuzzleGridRow
                    key={"puzzle-grid-row-"+row}
                    grid_row={@props.grid[row]}
                    cell_classes={@props.cell_classes[row]}
                    grid_focus={
                        if @props.grid_focus? and @props.grid_focus.row == row then @props.grid_focus else null
                    }
                    onCellFieldKeyPress={(event, col) => @props.onCellFieldKeyPress(event, row, col)}
                    onCellClick={(col) => @props.onCellClick(row, col)}
                />
            }
        </table>

PuzzleGridRow = React.createClass
    render: ->
        <tr className="puzzle_grid_row">
            { for col in [0 ... @props.grid_row.length]
               do (col) =>
                <PuzzleGridCell
                    key={"puzzle-grid-col-"+col}
                    grid_cell={@props.grid_row[col]}
                    cell_class={@props.cell_classes[col]}
                    grid_focus={
                        if @props.grid_focus? and @props.grid_focus.col == col then @props.grid_focus else null
                    }
                    onCellFieldKeyPress={(event) => @props.onCellFieldKeyPress(event, col)}
                    onCellClick={(event) => @props.onCellClick(col)}
                />
            }
        </tr>

PuzzleGridCell = React.createClass
    render: ->
        cell = @props.grid_cell

        <td onClick={@props.onCellClick}
            className={"puzzle_grid_cell " + @props.cell_class}>
        {
            if cell.open
                <div>
                  <div style={{position: 'relative', height: '100%', width: '100%'}}>
                    <div className="cell_number">
                        {if cell.number != null then cell.number else ""}
                    </div>
                  </div>
                  <div className="cell_contents">
                    {if cell.contents == "" then "\xA0" else cell.contents}
                  </div>
                </div>
        }
        {
            if @props.grid_focus? and @props.grid_focus.field_open != "none"
                <div style={{position: 'relative'}}>
                  <div className="cellField">
                    <input type="text" id="cellFieldInput"
                              defaultValue={@getCellFieldInitialValue()}
                              ref={@onCellFieldCreate}
                              className="dont-bubble-keydown"
                              onKeyDown={@props.onCellFieldKeyPress} />
                  </div>
                </div>
        }
        </td>

    onCellFieldCreate: (field) ->
        if field?
            React.findDOMNode(field).focus()

    getCellFieldInitialValue: () ->
        if @props.grid_focus != null
            cell = @props.grid_cell
            if @props.grid_focus.field_open == "number"
                return if cell.number == null then "" else cell.number.toString()
            else if @props.grid_focus.field_open == "contents"
                return cell.contents
        else
            return null

window.PuzzlePage = PuzzlePage
