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

    # mixer can be a single item or array
    mixer = @state.mixers?.mixer
    if mixer && $.isArray(mixer)
      mixer = mixer[0]

    mixerId = 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")

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


    # Initialize panposition
    mixer = @state.mixers?.mixer
    if mixer && $.isArray(mixer)
      mixer = mixer[0]

    MixerActions.initPan(mixer)

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

})