Add a toggle for scanned image/OCR text

app/classify/subject-viewer.cjsx

@@ -16,7 +16,7 @@ module.exports = React.createClass
 
   render: ->
     classList=["readymade-marking-surface-container"]
-    classList.push 'image' if @props.task is 'filter'
+    classList.push @props.mode
     classList.push 'active' if @props.active
     image = @mediaSrcs['image/jpeg']
     <div className={classList.join ' '}>

app/classify/subject.cjsx

@@ -7,31 +7,48 @@ module.exports = React.createClass
 
   getInitialState: ->
     currentSubjects: []
+    mode: 'text'
+    viewAll: false
 
   componentWillReceiveProps: (newProps) ->
     {nextSubjectIds, prevSubjectIds} = newProps.subject.metadata
     @props.api.type('subjects')
       .get([nextSubjectIds[0], prevSubjectIds[0]])
       .then (subjects) =>
-        @setState currentSubjects: [subjects[1], newProps.subject, subjects[0]]
+        @setState 
+          currentSubjects: [subjects[1], newProps.subject, subjects[0]]
+          mode: 'text'
 
   render: ->
-    console.log @props.task 
+    console.log @props.task
+    mode = if @props.task == 'filter' then 'image' else @state.mode
     <div className="readymade-subject-viewer-container">
       {
         if @state.currentSubjects.length
           <div className="readymade-subject-viewer">
             <SubjectTools project={@props.project} api={@props.api} talk={@props.talk} user={@props.user} subject={@props.subject} />
+            {if @props.task isnt 'filter'
+              <div style={position: 'relative'}>
+                <label className="readymade-clickable image-toggle">
+                  <input type="checkbox" onChange={@toggle} />
+                  <span className="fa fa-file-text#{if @state.mode is 'image' then '-o' else ' active'}"></span>
+                  <span className="fa fa-file-image-o #{if @state.mode is 'image' then 'active' else ''}"></span>
+                </label>
+              </div>}
             <div className="scroll-container" ref="scrollContainer">
-              {<SubjectViewer task={@props.task} subject={subject} key={subject.id} active={subject is @props.subject} ref="subject#{subject.id}" /> for subject in @state.currentSubjects}
+              {<SubjectViewer mode={mode} subject={subject} key={subject.id} active={subject is @props.subject || @state.viewAll} ref="subject#{subject.id}" /> for subject in @state.currentSubjects}
             </div>
           </div>
       }
     </div>
 
   onChange: (annotation) ->
     if annotation.issue
-      @refs["subject#{subject.id}"].getDOMNode().classList.add 'active' for subject in @state.currentSubjects
+      viewAll = true
     else
-      @refs["subject#{subject.id}"].getDOMNode().classList.remove 'active' for subject in @state.currentSubjects
-      @refs["subject#{@props.subject.id}"].getDOMNode().classList.add 'active'
+      viewAll = false
+    @setState {viewAll}
+
+  toggle: (e)->
+    mode = if @state.mode is 'image' then 'text' else 'image'
+    @setState {mode}

css/custom.styl

@@ -34,6 +34,30 @@
       color: white
       font-size: 1em
       padding: .2em .4em
+
+    .image-toggle
+      background: #0b517c
+      border: 0
+      color: white
+      float: right
+      padding: 0
+      border: 0
+      border-radius: 1px
+      font-size: 1.2em
+
+      input[type=checkbox]
+        position: absolute
+        height: 0
+        width: 0
+        opacity: 0
+
+      span
+        background: rgba(0, 0, 0, 0.1)
+        padding: .2em .4em
+
+        &.active
+          background: rgba(0, 0, 0, 0.3)
+
 
 .readymade-decision-tree-container
   padding-left: 0