var CarTypeSlider = new Class({
  
  position: 0,
  
  initialize: function(offset) {
    
    this.carBoxes = $$('#ofctscroller div.offeredcartype a');
    this.scroller = $('ofctscroller');
    this.arrowRight = $('ofctright');
    this.arrowLeft = $('ofctleft');
    
    this.scroller.setStyle('width', (this.carBoxes.length * 840).toString() + 'px');
    
    $('offeredcartypes').addClass('visible');
    
    this.arrowRight.setProperty('href','javascript:void(0);');
    this.arrowLeft.setProperty('href','javascript:void(0);');
    
    if (this.position == 0) {
      this.arrowLeft.setStyle('visibility','hidden');
    }

    if (-this.position >= (this.carBoxes.length - 21)) {
      this.arrowRight.setStyle('visibility','hidden');
    }
        
    this.scrollerEffect = this.scroller.effect('margin-left',{duration: 500, transition: Fx.Transitions.sineInOut});
    
    this.arrowLeft.onclick = function() {
        if (-this.position >= (this.carBoxes.length - 21)) {
          this.arrowRight.setStyle('visibility','visible');
        }
        
        this.scrollerEffect.clearTimer();
        var ml = this.scroller.getStyle('margin-left');
        var curMarginLeft = ml == undefined ? 0 : parseInt(ml.substr(0,ml.length-2));
        this.position += 1;
        if(window.ActiveXObject && !window.XMLHttpRequest){
          var to = this.position * 40;
        } else {
          var to = this.position * 40;
        }
        
        this.scrollerEffect.custom(curMarginLeft,to);
        
        if (this.position == 0) {
          this.arrowLeft.setStyle('visibility','hidden');
        }
    }.bind(this);
    
    this.arrowRight.onclick = function() {
        if (this.position >= 0) {
          this.arrowLeft.setStyle('visibility','visible');
        }
        
        this.scrollerEffect.clearTimer();
        var ml = this.scroller.getStyle('margin-left');
        var curMarginLeft = ml == undefined ? 0 : parseInt(ml.substr(0,ml.length-2));
        this.position -= 1;
        if(window.ActiveXObject && !window.XMLHttpRequest){
          var to = this.position * 40;
        } else {
          var to = this.position * 40;
        }
        
        this.scrollerEffect.custom(curMarginLeft,to);
        
        if (-this.position >= (this.carBoxes.length - 21)) {
          this.arrowRight.setStyle('visibility','hidden');
        }
    }.bind(this);
    
  }
  
});