var Scroller= new JS.Class({
  initialize: function(parent){
    this.nav= parent
    var track_width= Math.round(this.nav.track_width / this.nav.total_slices) * this.nav.total_slices;
    this.html=$('<div class="ss-track"/>').css('width', track_width).data('decorator', this);

    this.create_thumb()

    this.nav.bind('next_slice', this.next_slice)
    this.nav.bind('prev_slice', this.prev_slice)
  },

  create_thumb: function() {
    var width= Math.round(this.nav.track_width / this.nav.total_slices);
    this.thumb= $('<div class="ss-thumb"/>').css({left: 0, width: width + 'px'})
    this.html.append(this.thumb)
  },

  next_slice: function(event) {
    var nav= $(this).unbind(event).data('decorator')
    var thumb= nav.scroller.thumb
    var x=  thumb.css('left').to_f()
    var target_x= x + thumb.width()

    thumb.animate({ left: target_x}, function(){
      nav.bind('next_slice', nav.scroller.next_slice)
    })
  },

  prev_slice: function (event) {
    var nav= $(this).unbind(event).data('decorator')
    var thumb= nav.scroller.thumb
    var x=  thumb.css('left').to_i()
    var target_x= x - thumb.width()

    thumb.animate({ left: target_x}, function(){
      nav.bind('prev_slice', nav.scroller.prev_slice)
    })
  }
})