var Navigation= new JS.Class({
  initialize: function(parent, total_slices, track_width) {
    this.total_slices= total_slices
    this.track_width= track_width
    this.html= $(innerShiv('<nav class="ss-nav"/>', false))
    this.html.data('decorator', this)
    this.create_buttons(parent)
    this.create_display(total_slices)
    this.create_scroller()
  },

  create_buttons: function(parent) {
    this.prev= $('<a href="#" class="ss-prev">Previous</a>').data('this', parent)
    this.next= $('<a href="#" class="ss-next">Next</a>').data('this', parent)

    this.prev.enable= this.enable_button
    this.next.enable= this.enable_button

    this.prev.disable= this.disable_button
    this.next.disable= this.disable_button

    this.prev.click(function() {
      $(this).trigger('prev_slice');
      return false
    })

    this.next.click(function() {
      $(this).trigger('next_slice');
      return false
    })

    this.html.append(this.next)
    this.html.append(this.prev)
  },

  create_display: function(total_slices) {
    this.display= new Display(total_slices)
    this.html.append(this.display.html)
  },

  enable_button: function(event, fn) {
    this.bind(event, fn)
  },

  disable_button: function(event) {
    this.unbind(event)
  },

  append: function(node) {
    this.html.append(node)
  },

  bind: function(event, handler) {
    this.html.bind(event, handler)
  },

  trigger: function(event) {
    this.html.trigger(event)
  },

  create_scroller: function() {
    this.scroller= new Scroller(this)
    this.html.append(this.scroller.html)
  }
})