context = window

MixerActions = @MixerActions

@SessionTrackPanHover = React.createClass({

  mixins: [Reflux.listenTo(@SessionMyTracksStore, "onInputsChanged")]

  closeHover: (e) ->
    e.preventDefault()
    $container = $(this.getDOMNode()).closest('.react-holder')
    $container.data('bt').btOff()

  onInputsChanged: (sessionMixers) ->
    mixers = sessionMixers.mixers
    newMixers = mixers.refreshMixer(@state.mixers)

    this.setState({mixers: newMixers})


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

  render: () ->

    `<div className="track-pan-hover">
      <div className="textual-help">
        <p>
          Use this slider to pan the audio of this track left or right in your personal mix.
          This will not pan audio for other musicians in the session.
          To pan audio in the master mix for recordings and broadcasts, use the Mixer button in the toolbar.
        </p>
      </div>

      <div className="session-pan">
        <SessionTrackPan mixers={this.state.mixers}  />
      </div>
      <div className="close-window">
        <a onClick={this.closeHover}>close</a>
      </div>
    </div>`

  componentWillUpdate: (nextProps, nextState) ->
    $root = jQuery(this.getDOMNode())

    # if the mixers go dead, whack our selves out of existence
    unless nextState.mixers?
      $container = $root.closest('.react-holder')
      $container.data('bt').btOff()
      return
})