 # 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
         

            grid_focus.field_open = "none"
            @setState { grid_focus: grid_focus }

    doesCellHaveFieldOpen: (row, col) ->
        @state.grid_focus.field_open != "none" and \
               @state.grid_focus.row == row and @state.grid_focus.col == col
    getCellFieldInitialValue: () ->
        if @state.grid_focus != null
            cell = @state.puzzle.grid[@state.grid_focus.row][@state.grid_focus.col]
            if @state.grid_focus.field_open == "number"
                return if cell.number == null then "" else cell.number.toString()
            else if @state.grid_focus.field_open == "contents"
                return cell.contents
    onCellFieldKeyPress: (event) ->
        v = event.target.value
        keyCode = event.keyCode


    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
