context = window

@SessionMusicMixer = React.createClass({

  handleMute: (e) ->
    e.preventDefault()

    unless @props.mixers.mixer
      logger.debug("ignoring mute; no mixer")
      return

    muting = $(e.currentTarget).is('.enabled')

    MixerActions.mute(@props.mixers.mixer, muting)

  render: () ->

    muteMixer = @props.mixers.muteMixer[0]
    muteMixerId = muteMixer?.id

    classes = classNames({
      'track-icon-mute': true
      'enabled' : !muteMixer?.mute
      'muted' : muteMixer?.mute
    })

    pan = if @props.mixers.mixer? && @props.mixers.mixer.length > 0 then @props.mixers.mixer[0].pan else 0

    panStyle = {
      transform: "rotate(#{pan}deg)"
      WebkitTransform: "rotate(#{pan}deg)"
    }

    `<div className="session-track music-mixer">
      <div className="disabled-track-overlay" />
      <div className="session-track-contents">
        <div className="name">Session Music Output</div>
        <div className="track-instrument"><img height="45" src="/assets/content/icon_instrument_voice45.png" width="45" /></div>
        <div className="track-controls">
          <SessionTrackVU orientation="horizontal" lightCount={4} lightWidth={17} lightHeight={3} side="best" mixers={this.props.mixers} />
          <div className="track-buttons">
            <div className={classes} data-control="mute" data-mixer-id={muteMixerId} onClick={this.handleMute}/>
            <div className="track-icon-pan" style={panStyle}/>
          </div>
          <br className="clearall"/>
        </div>
        <br className="clearall"/>
      </div>
    </div>`

  componentDidMount: () ->

    $root = $(this.getDOMNode())
    $mute = $root.find('.track-icon-mute')
    $pan  = $root.find('.track-icon-pan')

    context.JK.interactReactBubble(
      $mute,
      'SessionTrackVolumeHover',
      () =>
        {mixers:@props.mixers, gainType : 'music'}
    ,
      {width:235, positions:['right', 'left'], offsetParent:$root.closest('.top-parent')})

    context.JK.interactReactBubble(
      $pan,
      'SessionTrackPanHover',
      () =>
        {mixers:@props.mixers}
    ,
      {width:331, positions:['right', 'left'], offsetParent:$root.closest('.top-parent')})


})