       backdrop: 'static'
       keyboard: false
       show: false
+
     @initSteps()
+
     @nextStepIndex = 0
+
     html = '<div id="tutorial-window" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-header">
                 <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>-->

        $('.tutorial-next-button').unbind "click"
        $('.tutorial-next-button').click (=> @doStep())
      @nextStepIndex++ until @steps[@nextStepIndex]? or @nextStepIndex is @steps.length

  @doStepWhenScreen: (className, stepId) ->
    if typeof className is "function"
      thisReference = this

      checker()
      

  ###*
   * Shows the tutorial modal box (bootstrap) window
  ###
  @show: -> $(@window).modal('show')

  ###*
   * Hides the tutorial modal box (bootstrap) window
  ###
  @hide: -> $(@window).modal('hide')

  ###*
   * Toggles the tutorial modal box (bootstrap) window
  ###
  @toggle: -> $(@window).modal('toggle')


  ###*
   * Displays a qTip2 tip on the given selector.
   * @param  {String} tipselector The css selector to add a bubble tip to.
   * @param  {String} tipmessage  The message the tip will have
   * @param  {String} tipheading  The html heading the tip will have
   * @param  {Boolean} tipnext    Whether or not we want a next button in the tip.
  ###
  @displayTip: (tipselector, tipmessage, tipheading, tipnext) ->
    nextHtml = if tipnext then '<span class="grey-button tutorial-next-button">Next &rarr;</span>' else ''
    theHtml = tipmessage+nextHtml
    $(tipselector).qtip 
      content: theHtml
      position: 
        my: 'top center'
        at: 'bottom center'
        viewport: $(window)
      show:
        event: false
        ready: true  
      hide: false
      events: 
        render: (event, api) ->
          if tipnext then $('.tutorial-next-button').bind 'click', ->
            api.hide()
            Tutorial.doStep()

  ###*
   * Returns whether or not the window exists
   * @return {Boolean} True if the window exists.
  ###
  @isValid: -> @window? and @window.length > 0

  ###*
   * Changes the content part of the window
   * @param  {String} content The html that would go into the content
  ###
  @changeContent: (content) -> if @isValid then $('#tutorial-window-content').html(content)

  ###*
   * Changes the header part of the window
   * @param  {String} header The html that would go into the header
  ###
  @changeHeader: (header) -> if @isValid then $('#tutorial-window-header').html(header)

  ###*
   * Changes the content and header parts of the window
   * @param  {String} content The html that would go into the content
   * @param {String} header The html that would go into the header
  ###
  @changeWindow: (header, content) -> @changeHeader(header); @changeContent(content)




#####################################################################################
#                         The actual steps of the tutorial.                         #
#####################################################################################

  ###*
   * Adds all the steps of the tutorial system. These steps are added *in order*
  ###
  @initSteps: ->
    @addStep
      header: 'Welcome to the Equations Tutorial!'
      content: 'Why hello there young chap. Welcome to Equations! In no time, you\'ll be up and running and ready to play'
      modal: true

    @addStep 
      header: "The Lobby"
      content: "We're now in the Lobby. Here, we get to see what games are available to join, or we could create our own game."

    @addStep 
      header: "Join a game"
      content: "Let's get started! So there's a game that is available to join right now."
      modal: true

    @addStep 
      modal: false
      tipselector: 'tr[data-gamenumber="0"] td:first-child'
      tipheading: 'Join this game'
      tipmessage: 'Click here to join the game!'

    @addStep 
      id: "goal"
      modal: true
      header: "Goal setting"
      content: "Great, we're in a game! You've been chosen to be the goal setter. Let's make the goal '1+2'."

    @doStepWhenScreen GoalScreen, "goal"

    @addStep
      modal: false
      tipselector: 'li.dice[data-index="0"]'
      tipmessage: 'Let\'s make the goal "1+2". Click this dice to add it to the goal.'

    @addStep
      modal: false
      tipselector: 'li.dice[data-index="4"]'
      tipmessage: 'Cool, we can see that "1" has been added below. Now let\'s add "+".'

    @addStep
      modal: false
      tipselector: 'li.dice[data-index="19"]'
      tipmessage: 'Finally, add the number "2" to the goal.'

    @addStep
      modal: false
      tipselector: '#sendgoal'
      tipmessage: 'Great, now click here to submit the goal and start the game.'

    @addStep
      id: "game"
      modal: true
      header: "We're in!"
      content: "We've finally started playing the game. Let me now show you around."
    @doStepWhenScreen GameScreen, "game"

    @addStep
      modal: false
      tipselector: '#goal-ctnr'
      tipmessage: 'This is the goal.'
      tipnext: true

    @addStep
      tipselector: '#dice_container'
      tipmessage: 'These are the dice. We must use these to either prove that the goal is possible to achieve using these dice or impossible.'
      tipnext: true

    @addStep
      tipselector: '#player-list'
      tipmessage: 'This shows you the players who are in the game. The player highlighted in orange is the player whose turn it currently is.'
      tipnext: true

    @addStep
      tipselector: '#timer-knob-ctnr'
      tipmessage: 'This is the turn timer. A player must make a move on the dice within this time if it is their turn.'
      tipnext: true

    @addStep
      tipselector: '#rough-area-board'
      tipmessage: 'This is your personal rough area. Feel free to take notes and do rough working here.'
      tipnext: true

    @addStep
      modal: true
      header: "It's your turn"
      content: "We must now make a move. Try clicking on one of the dice to move it to another area of the mat."

    @addStep
      modal: false

    @addStep
      modal: true
      header: "Forbidden, required and optional"
      content: "As you can see, in a move, you can move a die to one of three areas of the board:
      <ul>
      <li>Forbidden: The forbidden section includes all dice that can not be used when forming a solution to the goal.</li> 
      <li>Optional: You can use any number of optional dice to form the goal.</li>
      <li>Required: You must use ALL of these dice when forming the goal.</li>
      The idea is that when someone makes a 'challenge', you must use a combination of NONE of the forbidden dice, ANY of the optional dice and ALL of the required dice to form your solution to the goal.
      </ul>
      "

    @addStep
      modal: false
      