var Carousel = Class.create({
    initialize: function(carousel, pagewidth, perPage) {
       this.carousel = carousel;
        this.perPage = perPage;
        // get total products listed
        this.products = $$('#'+carousel+' > li').length;

        // paginate
        this.pages = this.products - this.perPage;
        this.current = 0;
        this.pageWidth = pagewidth;

        // set correct width
        if($(this.carousel) && !Prototype.Browser.IE6){
        	$(this.carousel).setStyle({width: (this.products * this.pageWidth) + 'px'});
    	}

        // setup buttons
        this.rightBtn = $(carousel+'-right-btn');
        if (this.rightBtn) {
            this.rightBtn.observe('click',function(e) {
                Event.stop(e);
                if (this.current < this.pages) {
                    this.spinCarousel(-this.pageWidth);
                    this.current++;
                    this.setButtonStates();
                }
            }.bind(this));
        }

        this.leftBtn = $(carousel+'-left-btn');
        if (this.leftBtn) {
            this.leftBtn.addClassName('left_off');
            this.leftBtn.observe('click',
            function(e) {
                Event.stop(e);
                if (this.current > 0) {
                    this.spinCarousel(this.pageWidth);
                    this.current--;
                    this.setButtonStates();
                }
            }.bind(this));
        }
	this.setButtonStates();
    },
    spinCarousel: function(where) {
        new Effect.MoveBy(this.carousel, 0, where, {
            duration: 0.2,
            transition: Effect.Transitions.sinoidal,
            queue: 'end'
        });
    },
    setButtonStates: function() {
        if (this.pages == 0) {
            this.rightBtn.addClassName('right_off').removeClassName('right_on');
            this.leftBtn.addClassName('left_off').removeClassName('left_on');
        } else if (this.current == 0) {
            this.rightBtn.addClassName('right_on').removeClassName('right_off');
            this.leftBtn.addClassName('left_off').removeClassName('left_on');
        } else if (this.current == this.pages) {
            this.rightBtn.addClassName('right_off').removeClassName('right_on');
            this.leftBtn.addClassName('left_on').removeClassName('left_off');
        } else {
            this.rightBtn.addClassName('right_on').removeClassName('right_off');
            this.leftBtn.addClassName('left_on').removeClassName('left_off');
        }
    }
});