              </div>
          </div>
       </div>
-      <div className="jplayer-text autocue"></div>
+      <div className="jplayer-text autocue"><TextBox mediaObj={this.props.mediaObj} startAtLine={this.state.startLine} endAtLine={this.state.endLine} highlightLine={this.state.currentLine} /></div>
       <div className="slider-range ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
           <div className="ui-slider-range ui-widget-header ui-corner-all" style={{left: '40%', width: '40%'}}></div>
           <a className="ui-slider-handle ui-state-default ui-corner-all" href="#" style={{left: '40%'}}></a>

    $("#movietitle").text(mediaObj.title)
    last_line = parseInt(mediaObj.last_line)

    @textBox.init($node, mediaObj, @getStartTime(mediaObj), @getEndTime(mediaObj))

    @textBox.currentID = @getStartTime(mediaObj)

    start = @getStartTime(mediaObj)
    stop  = @getEndTime(mediaObj)
    @textBox.redraw(start,stop, last_line)
    start = parseFloat($("#jp-"+start).data("start_timecode"))
    stop  = parseFloat($("#jp-"+stop).data("end_timecode"))

    console.log(mediaObj)

    $playerNode = $node.find(".jp-jplayer")
    $playerNode.jPlayer
      solution: "flash, html"
      ready: ->
        $playerNode.jPlayer "setMedia",
          rtmpv: path + mov
          m4v: path+mov
          poster: "assets/rglossa/speech/_6.6-%27T%27_ligo.skev.graa.jpg"
        $playerNode.jPlayer( "play", start)

      timeupdate: (event) =>
        ct = event.jPlayer.status.currentTime
        if ct > stop
          $playerNode = $node.find(".jp-jplayer")
          $playerNode.jPlayer("play", start)
          $playerNode.jPlayer( "pause" )
        else if ct > @textBox.currentEndTime
          @textBox.update(ct)

      ended: -> alert("ended!")

      swfPath: ""
      supplied: supplied

###* @jsx React.DOM ###

window.TextBox = React.createClass
  propTypes:
    mediaObj: React.PropTypes.object.isRequired
    startAtLine: React.PropTypes.number.isRequired
    endAtLine: React.PropTypes.number.isRequired

  renderWord: (line) ->
    att_string = ""
    for att of line
      if att is "pos"
        # pos tags contain multiple values seperated by colons
        line[att] = line[att].replace(/:/g,"/")
      att_string += att + " : " + line[att] + "<br>"
    `<a title={att_string} style={line.match ? {color: '#b00', fontWeight: 'bold', fontSize: '0.9em'} : {}}>{line[this.props.mediaObj.display_attribute]} </a>`

  renderAnnotation: (annotation, lineNo) ->
      timecode = annotation.from
      end_timecode = annotation.to
      speaker = annotation.speaker
      speaker_brev = speaker.replace(/^.*_/,"")
      segment = (@renderWord(annotation.line[i]) for i of annotation.line)
      getStyle = () =>
        if parseInt(lineNo) == parseInt(@props.highlightLine)
          { display: 'table-row', color: '#000', 'background-color': '#eea' }
        else if lineNo >= @props.startAtLine and lineNo <= @props.endAtLine
          { display: 'table-row', color: '#000' }
        else if annotation.from is @first_start or annotation.to is @last_end
          # ie, overlapping segments
          { display: 'table-row', color: '#ccc' }
        else
          { display: 'none' }

      `<div className={'textDiv ' + timecode.replace(/\./,"_")}
            id={'jp-' + lineNo}
            data-start_timecode={timecode}
            data-end_timecode={end_timecode}
            style={getStyle()}
            >
         <div className="speakerDiv"><a className="speaker" title={speaker}>{speaker_brev}</a></div>
         <div className="segmentDiv">{segment}</div>
       </div>`

  render: ->
    display_attribute = @props.mediaObj.display_attribute
    annotation = @props.mediaObj.divs.annotation
    @first_start = annotation[@props.startAtLine].from
    @last_end = annotation[@props.endAtLine].to

    annotations = (@renderAnnotation(annotation[n], n) for n of annotation)
    `<div>{annotations}</div>`


window.Jplayer = React.createClass
  propTypes:
    mediaObj: React.PropTypes.object.isRequired
    mediaType: React.PropTypes.string.isRequired

  getStartLine: (mediaObj) ->
    start_at = parseInt(mediaObj.start_at)
    min_start = parseInt(mediaObj.min_start)
    if !@props.ctx_lines
