       backdrop: false
       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>-->


  @changeWindow: (header, content) -> @changeHeader(header); @changeContent(content)

  @show: -> $(@window).modal('show')
  @hide: -> $(@window).modal('hide')
  @toggle: -> $(@window).modal('toggle')

  @addStep: ({id, header, content, tipselector, tipmessage, modal}) ->
    index = @steps.push {id: id, header: header, content: content, tipselector: tipselector, tipmessage: tipmessage, modal: modal}
    if id? then @stepIds[id] = index - 1

  @doStep: (stepId) ->
    nextIndex = if stepId? then @stepIds[stepId] else @nextStepIndex
    theStep = @steps[nextIndex]
    if theStep?
      {id, header, content, tipselector, tipmessage, modal} = theStep
      if header? then @changeHeader(header)
      if content? then @changeContent(content)
      if tipselector?
        # TODO: The element needs to be selected
        $(tipselector).addClass('glow')
        # TODO: The message needs to be displayed
        if tipmessage? then alert tipmessage
      if modal?
        if modal then @show() else @hide()
      @steps[nextIndex] = undefined

              </div>
              <div class="modal-footer">
                <!--<span class="grey-button" data-dismiss="modal" aria-hidden="true">Close</span>-->
                <span class="grey-button" id="tutorial-next-button">Next &rarr;</span>
              </div>
            </div>'

    @window = $(html).prependTo('body')
    $('#tutorial-next-button').click (=> @doStep())
    $(@window).modal(@windowOptions)

  @isValid: -> @window? and @window.length > 0
