             # 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()

  getEventOffset: (e) ->
    rect = @refs.sizeRect.getDOMNode().getBoundingClientRect()

    # console.log 'RECT: ', rect
    {horizontal, vertical} = @getScale()
    x: ((e.pageX - pageXOffset - rect.left) / horizontal) + @state.viewX
    y: ((e.pageY - pageYOffset - rect.top) / vertical) + @state.viewY

    # x: ((e.pageX - pageXOffset - rect.left)) + @state.viewX
    # y: ((e.pageY - pageYOffset - rect.top)) + @state.viewY

  onClickDelete: (key) ->
    marks = @state.marks
    marks.splice(key,1) # delete marks[key]
    @setState
      marks: marks
      selectedMark: null, =>
        @forceUpdate() # make sure keys are up-to-date before re-render

  beginTextEntry: ->
    # console.log 'beginTextEntry()'
    @nextSubject()
    return # just load next subject for now
    return unless @state.marks.length > 0
    @setState
      selectedMark: @state.marks[0], =>
        {horizontal, vertical} = @getScale()
        $('html, body').animate scrollTop: vertical*@state.selectedMark.y-window.innerHeight/2+80, 500

  nextTextEntry: ->
    key = @state.selectedMark.key
    if key+1 > @state.marks.length-1
      # console.log "That's all the marks for now!"
      return

    @setState selectedMark: @state.marks[key+1], =>
      {horizontal, vertical} = @getScale()
      $('html, body').animate scrollTop: vertical*@state.selectedMark.y-window.innerHeight/2+80, 500

  onClickTranscribe: (key) ->
    console.log 'onClickTranscribe() '

    console.log location.host + "/?subject_id=#{@state.marks[key].transcribe_id}#/transcribe"
    location.replace 'http://' + location.host + "/?subject_id=#{@state.marks[key].transcribe_id}&scrollOffset=#{$(window).scrollTop()}#/transcribe"
    # @setState showTranscribeTool: true

  # dummy placeholder
  recordTranscription: ->
    console.log 'recordTranscription()'

  # "https://zooniverse-static.s3.amazonaws.com/scribe_subjects/logbookofalfredg1851unse_0083.jpg"

  render: ->
    # don't render if ya ain't got subjects (yet)
    # console.log 'showTranscribeTool is ', @state.showTranscribeTool
    return null if @state.subjects is null or @state.subjects.length is 0

    viewBox = [0, 0, @state.imageWidth, @state.imageHeight]

    # LOADING
    if @state.loading
      <div className="subject-container">
        <div className="marking-surface">
          <LoadingIndicator/>
        </div>
        <p>{@state.subjects.location}</p>
        <div className="subject-ui">
          <ActionButton loading={@state.loading} />
        </div>
      </div>

    else

      if @state.marks.length is 0
        action_button =  <ActionButton label={"NEXT PAGE"} onActionSubmit={@nextSubject} />
      else if @state.workflow is "finished"
        action_button =  <ActionButton label={"FINISH"} onActionSubmit={@nextSubject} />

      else if @state.marks.length > 0
        action_button =  <ActionButton label={"FINISHED MARKING"} onActionSubmit={@beginTextEntry} />

      <div className="subject-viewer">
        <div className="subject-container">
          <div className="marking-surface">

            <svg
              className = "subject-viewer-svg"
              width = {@state.imageWidth}
              height = {@state.imageHeight}
              viewBox = {viewBox}
              data-tool = {@props.selectedDrawingTool?.type} >

              <rect
                ref = "sizeRect"
                width = {@state.imageWidth}
                height = {@state.imageHeight} />

              <Draggable
                onStart = {@handleInitStart}
                onDrag  = {@handleInitDrag}

    @state.classification = new Classification @state.subject

  handleInitStart: (e) ->
    console.log 'handleInitStart()'
    
  handleInitDrag: (e) ->
    console.log 'handleInitDrag()'

  handleInitRelease: (e) ->
    console.log 'handleInitRelease()'

  handleToolMouseDown: ->
    console.log 'handleToolMouseDown()'

  setView: (viewX, viewY, viewWidth, viewHeight) ->
    @setState {viewX, viewY, viewWidth, viewHeight}
