@JamClassStudentLandingMiddlePage = React.createClass({

  avatar: (name = 'your choice', photo_url = '/assets/shared/avatar_generic.png') ->
    `<div className="avatar-header">
      <div className="avatar">
        <img src={photo_url}/>
      </div>
      <div className="username">
        {name}
        </div>
    </div>`

  getInitialState: () ->
    {
      modified: false
      package_type: null
      teachers: null
    }

  selector: (count, e) ->
    e.preventDefault()

    # cheesy way to pass the page data to the dialog
    window.page_data = @props

    window.JK.app.layout.showDialog('test-drive-package-dialog', {d1: count.toString()}).one(window.JK.EVENTS.DIALOG_CLOSED, (e, data) =>
      #... code
      if !data.canceled
        # dialog wasn't cancelled, so let's check the value of our result:
        @setState(data.result)
        @setState({modified: true})

        window.teacherModifications = data.result.teachers

        $ctaBox = $('.preview-area.jam-class')
        $.scrollTo($ctaBox, {duration: 500, offset: 0})

        setTimeout((() => window.JK.HelpBubbleHelper.testDrivePackageGo($ctaBox, 'body', data.result.package_type)), 2500)
      )

  componentDidMount: () ->
    @root = $(@getDOMNode())
    @root.find('.bio p').dotdotdot()

  componentDidUpdate:( ) ->

    @root.find('.bio p').dotdotdot()
  render: () ->

    if this.props.package?

      package_type = this.state.package_type || this.props.package.package_type

      if package_type == '4'
        description =
          `<div>
            <p>The single most important factor in the success of your music lessons is your teacher. You wouldn't marry
              the first person you date, right?</p>

            <p>Take full 30-minute lessons from each of these 4 amazing teachers for just $12.50 each - a total of
              $49.99. Then you can pick the one who is best for you to continue your musical journey, with the
              confidence that your investment in lessons will deliver maximum growth!</p>
          </div>`

        options =
          `<div className="other-options">
            <p>Like the TestDrive concept, but 4 teachers is too many for you?</p>
            <ul>
              <li>Get a special offer of <a className="pick-two" onClick={this.selector.bind(this, 2)}>2 of these teachers for a total of $29.99</a>.</li>
              <li>Or <a className="pick-one" onClick={this.selector.bind(this, 1)}>1 teacher for $14.99</a>.</li>
              <li>Or you can <a href="/client#/jamclass/searchOptions">search all of our teachers</a> and then book a TestDrive package.</li>
            </ul>
          </div>`
      else if package_type == '2'
        description =
          `<div>
            <p>The single most important factor in the success of your music lessons is your teacher. You wouldn't marry
              the first person you date, right?</p>

            <p className="price-explain">Take full 30-minute lessons from each of these 2 amazing teachers for just $14.99 each - a total of
              $29.99. Then you can pick the one who is best for you to continue your musical journey, with the
              confidence that your investment in lessons will deliver maximum growth!</p>
          </div>`

        options =
          `<div className="other-options">
            <p>Like the TestDrive concept, but prefer not to try 2 different teachers?</p>
            <ul>
              <li>Get a special offer of <a className="pick-one" onClick={this.selector.bind(this, 1)}>1 of these teachers for just $14.99</a>. </li>
              <li>Or you can <a href="/client#/jamclass/searchOptions">search all of our teachers</a> and then book a TestDrive package.</li>
            </ul>
          </div>`
      else
        description =
          `<div>
            <p>Take a full 30-minute lesson from this great teacher for just $14.99 - half the cost of a typical music
              lesson. You can make sure everything is working great, and then continue your musical journey with the
              confidence that your investment in lessons will deliver maximum growth!</p>
          </div>`
        options =
          `<div className="other-options">
            <p>You can book a TestDrive lesson with this awesome teacher now!</p>
            <p>Or you can <a href="/client#/jamclass/searchOptions">search all of our teachers</a> and then book a TestDrive package.</p>
          </div>`

      teacherList = @state.teachers || this.props.package.teachers

      if @state.modified
        options = null

      teachers = []
      for teacher in teacherList
        biography = teacher.biography
        biography = biography.replace(/\n/g, "<br/>")
        teachers.push(
          `<div key={teacher.id} className="teacher-option">
            {this.avatar(teacher.name, teacher.photo_url)}
            <div className="bio">
              <p dangerouslySetInnerHTML={{__html: biography}}></p>
            </div>
          </div>`)

      `<div className="row cta-row packaged">
        <h2>SIGN UP FOR TESTDRIVE NOW!</h2>
        {description}

        {teachers}

        {options}
      </div>`
    else
      `<div className="row cta-row">
        <h2>SIGN UP FOR TESTDRIVE NOW!</h2>

        <p>The single most important factor in the success of your music lessons is your teacher. You wouldn't marry the
          first person you date, right? Our TestDrive program lets you:</p>
        <ul>
          <li>Take a full lesson from 4 different teachers for just $12.49 each, or</li>
          <li>Take a full lesson from 2 different teachers for just $14.99 each, or</li>
          <li>Take a full lesson from 1 teacher for just $14.99</li>
        </ul>

        <p className="bump">Then continue your lessons with the best teacher for you!</p>

        <p className="bump">Join 40,000+ other musicians in the JamKazam community. Sign up for TestDrive today, and
          you'll be eligible for any of the three special offers above!</p>

        <p className="cta-text">Not sure if this is for you? Scroll down to learn more...</p>
      </div>`
})