ScrollableZone = new Class({
  $list_box: null,
  $scrollable_content: null,
  $scrollable_wrapper: null,
  $arrow_next: null,
  $arrow_prev: null,
  scroll_fx: null,

  initialize: function($container)
  {
    this.$list_box = $container;

    this.$scrollable_wrapper = this.$list_box.getElement('.list-wrapper');
    this.$scrollable_content = this.$list_box.getElement('.list-wrapper > ul');
    var $li = this.$scrollable_content.getFirst();
    var $width = $li.getSize().x + parseInt($li.getStyle('margin-left')) + parseInt($li.getStyle('margin-right'));

    this.$scrollable_content.setStyle('width', this.$scrollable_content.getChildren().length * $width);
    this.$arrow_prev = this.$list_box.getElement('.arrow.prev');
    this.$arrow_next = this.$list_box.getElement('.arrow.next');

    var _this = this;

    this.$arrow_prev.addEvent('click', function(e) {
      var prev_scroll = _this.getScroll();

      if (prev_scroll > 0)
        _this.scrollTo(prev_scroll - $width <= 0 ? 0 : prev_scroll - $width);

      e.preventDefault();
    });

    this.$arrow_next.addEvent('click', function(e) {
      var prev_scroll = _this.getScroll();

      if (prev_scroll < _this.getMaxScroll())
        _this.scrollTo(prev_scroll + $width >= _this.getMaxScroll() ? _this.getMaxScroll() :  prev_scroll + $width);

      e.preventDefault();
    });
  },

  getMaxScroll: function()
  {
    return (this.$scrollable_content.getSize().x - this.$scrollable_wrapper.getSize().x);
  },

  getScroll: function()
  {
    return parseInt(this.$scrollable_content.getStyle('margin-left')) * -1;
  },

  scrollTo: function(val, anim)
  {
    if (anim == undefined)
      anim = true;

    if (this.scroll_fx)
      this.scroll_fx.cancel();

    this.scroll_fx = new Fx.Tween(this.$scrollable_content, {
      'property': 'margin-left',
      'duration': 'short'
    });

    if (anim)
    {
      var _this = this;
      this.scroll_fx.addEvent('complete', function() { _this.checkScrollability();});
      this.scroll_fx.start(-val);
    }
    else
    {
      this.scroll_fx.set(-val);
      this.checkScrollability();
    }
  },

  checkScrollability: function()
  {
    if (this.getScroll() >= this.getMaxScroll())
      this.$arrow_next.addClass('disabled');
    else
      this.$arrow_next.removeClass('disabled');

    if (this.getScroll() <= 0)
      this.$arrow_prev.addClass('disabled');
    else
      this.$arrow_prev.removeClass('disabled');
  }
});