         removeEventListener el, event, handler
 
 class Tour
-  initialize: (@options={}) ->
+  constructor: (@options={}) ->
     @steps = @options.steps ? []
 
-  addStep: (step) ->
-    @steps.push step
-
-  next: ->
-    index = 0
+  addStep: (name, step) ->
+    step = extend {}, @options.defaults, step
+
+    if not step?
+      step = name
+    else
+      step.id = name
+
+    @steps.push new Step(@, step)
+
+  getById: (id) ->
+    for step in @steps when step.id is id
+      return step
+
+  next: =>
+    index = -1
     if @currentStep
       index = @steps.indexOf(@currentStep)
 
-    @currentStep = @steps[index]
-
-    @currentStep.show @
+    @show(index + 1)
+
+  show: (key=0) ->
+    if @currentStep
+      @currentStep.hide()
+
+    if typeof key is 'string'
+      next = @getById key
+    else
+      next = @steps[key]
+
+    console.log 'next', next
+    if next
+      @currentStep = next
+      next.show()
+
+  start: ->
+    @currentStep = null
+    @next()
 
 tour = new Tour
+  defaults:
+    classes: 'drop drop-open drop-theme-arrows'
+
 tour.addStep 'start',
   title: "Welcome to KaPow!"
   text: "KaPow is the ultimate comic book marketplace.  We supply over six
   hundred tons of comic books to the waste management industry each year.  The
   burning of these books supplies enough energy to power eight hundred American
   homes."
+  tetherOptions:
+    attachment: 'middle center'
+    targetAttachment: 'middle center'
   
 tour.addStep
   title: "Are you a seller, or a waste management professional?"

          i++

class Step extends Evented
  constructor: (options) ->
    @setOptions options

  setOptions: (@options={}) ->
    @destroy()

    @id = @options.id or @id or uniqueId()

    if @options.when
      for event, handler of @options.when
        @on event, handler, @

  bindAdvance: ->
    # An empty selector matches the step element

      @destroy()

    @el = createFromHTML "<div class='shepherd-step #{ @options.classes ? '' }' data-id='#{ @id }'></div>"
    console.log 'rendering', @el

    content = document.createElement 'div'
    content.className = 'drop-content'
    @el.appendChild content

    if @options.title?
      header = document.createElement 'header'
      header.innerHTML = "<h3 class='shepherd-title'>#{ @options.title }</h3>"
      content.appendChild header

    if @options.text?
      text = createFromHTML "<div class='shepherd-text'></div>"

      paragraphs = @options.text
      if typeof paragraphs is 'string'
        paragraphs = [paragraphs]

      for paragraph in paragraphs
        text.innerHTML += "<p>#{ paragraph }</p>"

      content.appendChild text

    footer = document.createElement 'footer'

    if @options.buttons
      buttons = createFromHTML "<ul class='shepherd-buttons'></ul>"

      for cfg in @options.buttons
        button = createFromHTML "<li><a class='shepherd-button #{ cfg.classes ? '' }'>#{ cfg.text }</a>"
        buttons.appendChild button

