addLoadEvent(function() { 
	var carousel = new CarouselTabs('carousel');
  carousel.update(0);
});

var CarouselTabs = Class.create();
Object.extend(CarouselTabs.prototype, TabBar.prototype);
Object.extend(CarouselTabs.prototype, {
  scroller: [],
  offset: [],
  pages: [],
  
	initialize: function(name) {
		TabBar.prototype.initialize.call(this, name);
		
		for (var i=0; panel = this.panel(i); i++) {
      this.scroller[i] = new SimpleScroller(panel);
      this.offset[i] = 0;
      this.pages[i] = Math.ceil(panel.getElementsByTagName('li').length / 5);
		}
    
    var _this = this;
    this.prev = $(name + '-pagination-prev');
    this.next = $(name + '-pagination-next');
	
    var pagination_handler = function(offset_amt) {
      return function(evt) {
        var tab_id = _this.current_id;
        _this.offset[tab_id] += offset_amt;
        if (_this.offset[tab_id] < 0)
          _this.offset[tab_id] = 0;
        if (_this.offset[tab_id] >= _this.pages[tab_id])
          _this.offset[tab_id] = _this.pages[tab_id] - 1;
        
        _this.scroller[tab_id].scrollTo({x: _this.offset[tab_id] * 495}, 500, _this.update_arrows.bind(_this, tab_id));
        return cancelEvent(evt);
      }
    }
    
    if (this.prev) this.prev.getElementsByTagName('a')[0].onclick = pagination_handler(-1);
    if (this.next) this.next.getElementsByTagName('a')[0].onclick = pagination_handler(1);
    
    this.onchange = function(id) {
      _this.update_arrows(id);
      return true;
    }
	},
  
  update_arrows: function(tab_id) {
    var has_prev = (this.offset[tab_id] > 0);
    var has_next = (this.offset[tab_id] < this.pages[tab_id] - 1);
    
    Element[has_prev ? 'removeClassName' : 'addClassName'](this.prev, 'disabled');
    Element[has_next ? 'removeClassName' : 'addClassName'](this.next, 'disabled');
  }
});