context = window

@IndividualJamTrackPage = React.createClass({

  watchVideo: (e) ->
    e.preventDefault()
    window.open("/popups/youtube/player?id=askHvcCoNfw", 'What Are JamTracks?', 'scrollbars=yes,toolbar=no,status=no,height=540,width=960')

  render: () ->

    header = null
    if @props.instrument
      header = "We Have #{@props.instrument_count} JamTracks With #{@props.instrument} Parts - Play Along With Your Favorites!"
    else if @props.band
      header = "#{@props.jam_track.original_artist} Backing Tracks - Complete Multitracks"
    else if @props.generic?
      header = "Backing Tracks + Free Amazing App = Unmatched Experience"
    else
      header = "\"#{@props.jam_track.name}\" Backing Track by #{@props.jam_track.original_artist}"

    `<div className="one_by_two">
      <div className="row header">
        <h1>{header}</h1>
      </div>
      <div className="row">
        <div className="column">
          <h2>Here's Why 20,000 Musicians Love Our Backing Tracks</h2>
          <p>JamKazam gives you a better backing track experience:</p>
          <ul>
            <li>Full multitrack recordings with isolated track for each part</li>
            <li>Free JamKazam app to:
              <ul>
                <li>Hear just the part you want to play to learn it</li>
                <li>Mute the part you want to play, and play live with other parts</li>
                <li>Record and mix your live play with unmuted tracks</li>
              </ul>
            </li>
            <li>Free Internet Service to play this track live online with others</li>
          </ul>
          <a className="watch-video" onClick={this.watchVideo}>Watch A Video To See How It Works</a>
        </div>
        <div className="column">
          <h2>Preview "{this.props.jam_track.name}" Backing Track by {this.props.jam_track.original_artist}</h2>
          <p>Click the play buttons below to preview the master mix and fully isolated tracks of the professional backing track recording. All are included in your backing track.</p>
          <div className="previews"></div>
        </div>
        <br className="clearAll" />
      </div>
      <div className="row">
        <JamTrackCta {...this.props} />
      </div>
    </div>`
})