var Scroller = function(container) {
  this.container = container;
  this.duration = 500;
  this.delta = 167;

  if (this.container.scrollWidth > this.container.clientWidth) this.setup();
}
Scroller.prototype = {
  setup: function() {
    var self = this;
    self.$arrL = $("<div class='arrow-l' />").appendTo(self.container.parentNode)
                                             .click(function() { self.scroll(-1); });
    self.$arrR = $("<div class='arrow-r' />").appendTo(self.container.parentNode)
                                             .click(function() { self.scroll(1); });
    self._checkArrows();
  },
  scroll: function(k) {
    var self = this;
    var newValue = self.container.scrollLeft + k*self.delta;
    if (newValue < 0) newValue = 0;
    if (newValue > self.container.scrollWidth - self.container.clientWidth) newValue = self.container.scrollWidth - self.container.clientWidth;
    $(self.container).animate({scrollLeft: newValue}, {duration: self.duration, complete: function() { self._checkArrows(); }});
    return self;
  },
  _checkArrows: function() {
    var self = this;
    if (self.container.scrollLeft == 0) self.$arrL.hide()
    else self.$arrL.show();
    if (self.container.scrollLeft == this.container.scrollWidth - this.container.clientWidth) self.$arrR.hide()
    else self.$arrR.show();
  }
}