                   width = {@state.imageWidth}
                   height = {@state.imageHeight} />
               </Draggable>
-              
-              { @state.marks.map ((mark, i) ->
-                  <TextRowTool
-                    key = {i}
-                    mark = {mark}
-                    imageWidth = {@state.imageWidth}
-                    imageHeight = {@state.imageHeight}
-                    getEventOffset = {@getEventOffset}
-                    selected = {mark is @state.selectedMark}
-                    onClickDelete = {@onClickDelete}
-                    onClickTranscribe = {@onClickTranscribe}
-                    submitMark = {@submitMark}
-                    scrubberWidth = {64}
-                    scrubberHeight = {32}
-                    handleDragMark = {@handleDragMark}
-                    handleUpperResize = {@handleUpperResize}
-                    handleLowerResize = {@handleLowerResize}
-                    handleMarkClick = {@handleMarkClick.bind null, mark}
-                  />
-                ), @
-              }
-
             </svg>
-
-            { if @state.showTranscribeTool
-              <TranscribeTool 
-                transcribeSteps={transcribeSteps} 
-                recordTranscription={@recordTranscription}
-                nextTextEntry={@nextTextEntry}
-                nextSubject = {@nextSubject}
-                selectedMark={@state.selectedMark}
-                xScale={@getScale().horizontal}
-                yScale={@getScale().vertical}
-              />          
-            }
-
           </div>
           <p>{@state.subject.location}</p>
           <div className="subject-ui">

            # console.log @state.loading
            # console.log "Finished Loading."

  prepareClassification: ->
    console.log 'prepareClassification()'
    for mark in [ @state.marks... ]
      @state.classification.annotate
        timestamp: mark.timestamp
        key: mark.key
        y_upper: mark.yUpper
        y_lower: mark.yLower
        x: mark.x
        y: mark.y

    # DEBUG CODE
    # console.log @state.classification.annotations

  submitMark: (key) ->
    # prepare classification
    mark = @state.marks[key]

    classification = new Classification @state.subject
    classification.annotate mark

    @disableMarkButton(key)

    # TODO: replace with this
    # @state.classification.send()

    # send classification
    $.post('/classifications', { 
        workflow_id: WORKFLOW_ID
        subject_id:  @state.subject.id
        location:    @state.subject.location
        annotations: classification.annotations
        started_at:  classification.started_at
        finished_at: classification.finished_at
        subject:     classification.subject
        user_agent:  classification.user_agent
      }, )
      .done (response) =>
        console.log "Success" #, response._id.$oid
        @setTranscribeSubject(key, response._id.$oid)
        @enableMarkButton(key)
        return
      .fail =>
        console.log "Failure"
        return
      # .always ->
      #   console.log "Always"
      #   return

  setTranscribeSubject: (key, transcribe_id) ->
    marks = @state.marks
    marks[key].transcribe_id = transcribe_id
    @setState marks: marks

  disableMarkButton: (key) ->
    marks = @state.marks
    marks[key].buttonDisabled = true
    @setState marks: marks
    @forceUpdate()

  enableMarkButton: (key) ->
    marks = @state.marks
    marks[key].buttonDisabled = false
    @setState marks: marks
    @forceUpdate()

  nextSubject: () ->

    @prepareClassification()


WORKFLOW_ID = '54b82b4745626f20c9020000' # marking workflow
endpoint = "/workflows/#{WORKFLOW_ID}/subjects.json?limit=5"

SubjectViewer = React.createClass
  displayName: 'SubjectViewer'
