// Quiz Module
// ===========
// On the homepage.  All content comes from the CMS as html.
//
//
;(function () {
  var ie, quiz, fadeTime = 200

  $(function () {
    // We don't use fades for oldie
    ie = $('html').hasClass('oldie')
    quiz = new Quiz($('div.homepage-quiz'))
  })
  

    
  function Quiz (el) {
      var active, question, personality, self = this

      // Grab elements
      intro = el.find('.intro')
      results = el.find('.results')
      quiz = el.find('.quiz')
      questions = quiz.find('.question')

      // Store elements
      this.els = {
        intro: intro, 
        results: results,
        quiz: quiz,
        questions: questions,
        progressCount: quiz.find('.progress .count')
      }

      // Delegate events
      bind('.intro .btn', 'click', 'startQuiz')
      bind('.situation .btn', 'click', 'showResponsesForCurrentQuestion')
      bind('.responses .btn', 'click', 'respondToQuestion')

       // Initialize state
      this.current = { 
        screen: intro,
        question: null,
        score: { smooth: 0, frothy: 0 }
      }

      // Override state based on an active class in the markup
      // By default, just show the intro slide
      active = el.find('.active:first')
      if (!active.length)  return intro.addClass('active')
      
      // Maybe show the results screen
      if (active.closest('.results').length) {
        console.log("initializing on results screen")
        personality = active.is('.smooth') ? 'smooth' :
                      active.is('.frothy') ? 'frothy' :
                                             'inconclusive'
        this.current.score[personality] += 1
        this.finishQuiz()
      }
      // Maybe show a question
      else if (question = active.closest('.question').or(null)) {
        console.log("initializing on question")
        this.showScreen('quiz')
        this.showQuestion(question)
        if (active.hasClass('responses'))  this.showResponsesForCurrentQuestion()
      }

      function bind (selector, event, fnName) {
        $(el).delegate(selector, event, $.proxy(self[fnName], self))
      }
    }


  Quiz.prototype = {

    startQuiz: function (e) {
      e.preventDefault()
      this.showScreen('quiz')
      this.showQuestion(this.els.questions.first())
    },

    finishQuiz: function () {
      var personality, score = this.current.score

      // Determine their personality
      personality = score.smooth > score.frothy ? 'smooth' :
                    score.frothy > score.smooth ? 'frothy' :
                                                  'inconclusive'

      // Show results screen, with content for their personality
      this.els.results.find('.'+personality).addClass('active')
      this.showScreen('results')
    },     

    respondToQuestion: function (e) {
      e.preventDefault()
      var smooth, nextQuestion, score = this.current.score

      // Record answer
      smooth = $(e.currentTarget).hasClass('smooth')
      score[smooth ? 'smooth' : 'frothy'] += 1
      console.log("score: %s smooth, %s frothy", score.smooth, score.frothy)

      // Move to next question or results page
      if (nextQuestion = this.current.question.next().or(null))  {
        this.showQuestion(nextQuestion)
        this.incrementProgressCount()         
      }
      else this.finishQuiz()
    },       

    showScreen: function (name) {
      var screen = this.els[name]
      activateFade(this.current.screen, screen)
      this.current.screen = screen
    },

    showQuestion: function (questionEl) {
      questionEl.find('.situation').addClass('active')
      activateFade(this.current.question, questionEl)
      this.current.question = questionEl
    },

    showResponsesForCurrentQuestion: function (e) {
      e && e.preventDefault()
      var el = this.current.question
      activateFade(el.find('.situation'), el.find('.responses'))
    },

    incrementProgressCount: function () {
      this.els.progressCount.text(function (i, current) {
        return +current + 1
      })
    }
  }


  
  // Helper to fades out `current` and fade in `now`, while toggling the `active` classes on both.
  // This works for screens, questions, etc.
  // Old ie's just hide/show
  function activateFade (current, now) {
    if (ie) {
      if (current)  current.removeClass('active')
      now.addClass('active')
    }

    if (!current)  return fadeIn()

    current.fadeOut(fadeTime, function () {
      current.removeClass('active')
      fadeIn(fadeTime)
    })

    function fadeIn () {
      now.fadeIn(fadeTime, function () { now.addClass('active') })
    }
  }

})();