var Carrousel = new Class({
        Implements: [Options, Events],
        options: {
			container: false,
			slides: false
        },
        initialize: function(options){

				// set the initial options
                this.setOptions(options);
				this.container = $(this.options.container);
				this.slides = this.options.slides;
				this.buttonContainer = new Element('div',{'id':'buttons'}).inject(this.container);
				this.buttons = [];
				
				// hide all the slides, and create a button for them
				this.slides.each(function(slide,index){
					slide.set({'opacity':'0'});
					var button = new Element('div',{'class':'feature_inactive'}).inject(this.buttonContainer);
					button.addEvent('click',function(){ this.showSlide(index)}.bind(this));
					this.buttons[index] = button;
				},this);
				
				// reveal the first slide
				this.slides[0].set({'opacity':1});
				this.buttons[0].set({'class':'feature_active'});
				this.activeSlide = 0;
				// and start the clock
				this.counter = this.showNext.periodical(10000,this); 
        },
		showSlide: function(number) {
			if(number != this.activeSlide)	{
				this.slides[this.activeSlide].fade('out');
				this.slides[number].fade('in');
				this.buttons[this.activeSlide].set({'class':'feature_inactive'});
				this.buttons[number].set({'class':'feature_active'});
				this.activeSlide = number;
			}
			$clear(this.counter);
			this.counter = this.showNext.periodical(10000,this); 
		},
		showNext: function(){
			if(this.activeSlide + 1 == this.slides.length){
				this.showSlide(0);
			} else {
				this.showSlide(this.activeSlide + 1);
			}
		}
	});