       @canvasGraph.enableMarking()
       @zoomRanges = [@canvasGraph.largestX, 10, 2]
       @magnification = [ '1x (all days)', '10 days', '2 days' ]
-      # update ui elements
       @showZoomMessage(@magnification[@zoomLevel])
       @el.find("#ui-slider").noUiSlider
         start: 0

    @el.find('#notification-message').html(message).fadeIn(100).delay(2000).fadeOut( 400, 'swing', =>
      @el.find('#notification').removeClass('notifying') )

  onToggleFav: ->
    @classification.favorite = !@classification.favorite
    favButton = @el.find("#toggle-fav")[0]
    if @isFaved
      @isFaved = false
      @el.find("#toggle-fav").removeClass("toggled")
      @notify('Removed from Favorites.')
    else
      @isFaved = true
      @el.find("#toggle-fav").addClass("toggled")
      @notify('Added to Favorites.')

  onClickHelp: ->
    # @el.find('#notification-message').hide() # get any notification out of the way
    # @course.showPrompt() # DEBUG ONLY
    
  onClickTutorial: ->
    clickEvent = { event: 'tutorialClicked', timestamp: (new Date).toUTCString() }
    @recordedClickEvents.push clickEvent
    @launchTutorial()

  launchTutorial: ->
    if $('#graph-container').hasClass 'loading-lightcurve'
      @notify 'Please wait until current lightcurve is loaded.'
      return
    # load training subject
    @notify('Loading tutorial...')
    tutorialSubject = @createTutorialSubject()
    tutorialSubject.select()
    # do stuff after tutorial complete/aborted
    addEventListener "zootorial-end", =>
      $('.tutorial-annotations.x-axis').removeClass('visible')
      $('.tutorial-annotations.y-axis').removeClass('visible')
      $('.mark').fadeIn()
    @initialTutorial.start()

  createTutorialSubject: ->
    # create tutorial subject
    tutorialSubject = new Subject
      id: 'TUTORIAL_SUBJECT'
      zooniverse_id: 'APH0000009'
      metadata:
        kepler_id: "1431599"
        logg: "4.673"
        magnitudes:
          kepler: "12.320"
        mass: "0.57"
        radius: "0.577"
        teff: "4056"
      selected_light_curve: 
        location: 'https://s3.amazonaws.com/demo.zooniverse.org/planet_hunter/beta_subjects/1873513_15-3.json'
    tutorialSubject

  updateButtons: ->
    # console.log 'updateButtons()'
    if @canvasGraph.marks.all.length > 0
      @noTransitsButton.hide()
      @finishedMarkingButton.show()
    else
      @finishedMarkingButton.hide()
      @noTransitsButton.show()

  onClickNoTransits: ->
    # console.log 'onClickNoTransits()'
    # giveFeedback() 
    @finishSubject()

  onClickFinishedMarking: ->
    # console.log 'onClickFinishedMarking()'

    @finishSubject() # TODO: remove this line when displaying known lightcurves

    # # DISPLAY KNOWN LIGHTCURVES
    # @canvasGraph.zoomOut() # first make sure graph is zoomed out
    # @finishedMarkingButton.hide()
    # @el.find('#zoom-button').attr('disabled',true)
    # @giveFeedback()
  
  giveFeedback: ->
    # console.log 'giveFeedback()'

    @finishedFeedbackButton.show()
    @canvasGraph.disableMarking()
    @canvasGraph.showFakePrevMarks()
    # numMarksGenerated = @canvasGraph.showFakePrevMarks()
    # console.log 'found ', numMarksGenerated, ' previous marks'
    # if numMarksGenerated <= 0 # no marks generated
    #   @notify('Loading summary page...')
    #   @finishedFeedbackButton.hide()
    #   @finishSubject()
    # else
    #   @notify('Here\'s what others have marked...')
    #   @el.find(".mark").fadeOut(1000)
    @notify('<a style="color: rgb(20,100,200)">Here are the locations of known transits and/or simulalations...</a>')
    @el.find(".mark").fadeOut(1000)

  onClickFinishedFeedback: ->
    # console.log 'onClickFinishedFeedback()'
    # @finishedFeedbackButton.hide()

    # keep drawing highlighted points while displaying previous data
    # TODO: fix, kindda cluegy
    $("#graph-container").removeClass('showing-prev-data')    

    @finishSubject()

  onClickNextSubject: ->
    # console.log 'onClickNextSubject()'
    # @noTransitsButton.show()
    @classifySummary.fadeOut(150)
    @nextSubjectButton.hide()
    # @canvasGraph.marks.destroyAll() #clear old marks
    # @canvas.outerHTML = ""
    @resetTalkComment @talkComment
    @resetTalkComment @altTalkComment
    # show courses

    # # switch to verify mode
    # if @course.count % @verifyRate is 0
    #   location.hash = "#/verify"

    # if @course.getPref() isnt 'never' and @course.count % @course.rate is 0 and @course.coursesAvailable() and @course.count isnt 0
    #   @el.find('#notification-message').hide() # get any notification out of the way
    #   @course.showPrompt() 

    if @course.getPref() is "yes" and @course.count % @course.rate is 0 and @course.coursesAvailable() and @course.count isnt 0
      @notify 'Loading mini-course...'
      @course.displayCourse()

    # display supplemental tutorial
    for classification_count in @whenToDisplayTips
      if @course.count is classification_count
        # console.log "*** DISPLAY SUPPLEMENTAL TUTOTIAL # #{classification_count} *** "
        @supplementalTutorial.first = "displayOn_" + classification_count.toString()
        @supplementalTutorial.start()

        # prompt user to opt in/out of mini course
        if @course.count is 7
          newElement = document.createElement('div')
          newElement.setAttribute 'class', "supplemental-tutorial-option-container"
          newElement.setAttribute 'style', "padding: 20px;"
          newElement.innerHTML = """
            <input class=\"mini-course-option\" name=\"mini-course-option\" type=\"checkbox\"></input>
            <div id=\"course-opt-in-label\" style=\"float: left; font-style: italic; font-weight: 500;\"></div>
          """
          # inject custom element into zootorial
          @supplementalTutorial.container.getElementsByClassName('zootorial-content')[0].appendChild(newElement)
          
          if @allowCustomCourseInterval
            $('#course-opt-in-label').html """
              <!--<div id="course-interval-setter">-->
                <div class="course-interval-text">Launch mini-course every </div>
                <input type="number" id="course-interval-sup-tut" class="course-interval" name="course-interval-sup-tut" value="5"></input>
                <div class="course-interval-text"> classifications!</div>
              <!--</div>-->
            """
          else
            $('#course-opt-in-label').html "Yes, I want to learn more!"

          # check box only if mini-course enabled
          $('.mini-course-option').prop 'checked', @courseEnabled
        
    # SEND CLASSIFICATION
    @course.incrementCount()
    # console.log 'YOU\'VE MARKED ', @course.count, ' LIGHT CURVES!'

    @classification.annotate
      classification_type: 'light_curve'
      selected_id:          @subject.selected_light_curve._id
      location:             @subject.selected_light_curve.location
    
    for mark in [@canvasGraph.marks.all...]
      @classification.annotate
        timestamp: mark.timestamp
        zoomLevel: mark.zoomLevelAtCreation
        xMinRelative: mark.dataXMinRel
        xMaxRelative: mark.dataXMaxRel
        xMinGlobal: mark.dataXMinGlobal
        xMaxGlobal: mark.dataXMaxGlobal

    # dump all recorded click events to classification
    @classification.set 'recordedClickEvents', [@recordedClickEvents...]
    
    # # DEBUG CODE
    # console.log JSON.stringify( @classification )
    # console.log '********************************************'
    
    # send classification (except for tutorial subject)
    unless @classification.subject.id is 'TUTORIAL_SUBJECT'
      @classification.send()

    @canvasGraph.marks.destroyAll() #clear old marks
    @recordedClickEvents = []
    @Subject.next()

  finishSubject: ->
    # console.log 'finishSubject()'
    @finishedFeedbackButton.hide()
    
    # re-enable zoom button (after feedback)
    @el.find('#zoom-button').attr('disabled',false)

    # disable buttons until next lightcurve is loaded
    @el.find('#no-transits').hide() #prop('disabled',true)
    @el.find('#finished-marking').hide() #prop('disabled',true)
    @el.find('#finished-feedback').hide() #prop('disabled',true)

    # show summary
    @el.find('.do-you-see-a-transit').fadeOut()
    @el.find('.star-id').fadeIn()
    @classifySummary.fadeIn(150)
    @nextSubjectButton.show()
    @planetNum.html @canvasGraph.marks.all.length # number of marks
    # @noTransitsButton.hide()
    @finishedMarkingButton.hide()

    # reset zoom parameters
    @zoomReset()
    
  onClickJoinConvo: -> @joinConvoBtn.hide().siblings().show()
  onClickAltJoinConvo: -> @altJoinConvoBtn.hide().siblings().show()

  onClickSubmitTalk: ->
    console.log "SEND THIS TO MAIN TALK DISCUSSION", @talkComment.val()
    @appendComment(@talkComment, @comments)

  onClickSubmitTalkAlt: ->
    console.log "SEND THIS TO ANOTHER TALK DISCUSSION", @altTalkComment.val()
    @appendComment(@altTalkComment, @altComments)

  resetTalkComment: (talkComment) -> talkComment.val("").parent().hide().siblings().show()

  appendComment: (comment, container) ->
    container.append("""
      <div class="formatted-comment">
        <p>#{comment.val()}</p>
        <p>by <strong>#{'currentUser'}</strong> 0 minutes ago</p>
      </div>
    """).animate({ scrollTop: container[0].scrollHeight}, 1000)
    @resetTalkComment comment

module.exports = LightcurveViewer

BaseController             = require 'zooniverse/controllers/base-controller'
User                       = require 'zooniverse/models/user'
Subject                    = require 'zooniverse/models/subject'
NoUiSlider                 = require '../lib/jquery.nouislider.min'
translate                  = require 't7e'
{CanvasGraph, Marks, Mark} = require "../lib/canvas-graph"
$ = window.jQuery

