context = window
logger = context.JK.logger

@SessionTrackPan = React.createClass({

  getInitialState: () ->
    {
    mixers: this.props.mixers,
    behaviors: this.props.behaviors || {}
    }

  panChanged: (e, data) ->
    $target = $(this)
    groupId = $target.data('groupId')
    mixers = [@state.mixers.mixer]

    MixerActions.panChanged(data, mixers, groupId)

  render: () ->

    mixerId = this.state.mixers?.mixer?.id

    `<div className="track-pan">
      <div className="left-label">Left</div>
      <div className="right-label">Right</div>
      <div className="fader horizontal" data-control="fader" data-fader-id={mixerId} data-orientation="horizontal">
        <div className="handle" data-control="fader-handle">
          <div className="floater"></div>
          <img src="/assets/content/slider_gain_horiz.png" width="11" height="28"/>
        </div>
      </div>
    </div>`

  componentDidMount: () ->
    $root = jQuery(this.getDOMNode())
    if !$root.is('.track-pan')
      logger.error("unknown root node")

    $fader = $root.attr('data-mixer-id', this.state.mixers.mixer.id).data('groupId', this.state.mixers.mixer.groupId).data('mixer', this.state.mixers.mixer).data('opposite-mixer', this.state.mixers.oppositeMixer)

    if this.state.behaviors.mediaControlsDisabled
      $fader.data('media-controls-disabled', true).data('media-track-opener', this.state.behaviors.mediaTrackOpener) # this we be applied later to the fader handle $element

    $fader.data('showHelpAboutMediaMixers', this.state.behaviors.showHelpAboutMediaMixers)

    context.JK.FaderHelpers.renderFader2($fader, {faderType: 'horizontal', snap:true}, context.JK.PanHelpers.convertPercentToPanForDisplay)

    # Initialize gain position
    MixerActions.initPan(this.state.mixers.mixer)

    # watch for fader change events
    $fader.on('fader_change', this.panChanged)

})