var Slides = new Class({
	
	interval: null,
	current: 0,
	elements: [],
	effects: [],
	buttons: [],
	
	initialize: function(){
		this.elements = $('slides').getElements('a.slide');
		this.buttons = $('slides').getElements('div.buttons a');
		
		this.elements.each(function(el, i){
			
			el.setStyles({
				'opacity': 0,
				'visibility': 'visible'
			});
			
			this.effects[i] = el.effects({
				onComplete: function(el){
					$('slides').getElements('a.slide').each(function(el2){
						if (el !== el2) {
							el2.setStyle('opacity', 0);
						}
					});
				}
			});
		}.bind(this));
		
		this.buttons.each(function(el, i){
			el.setStyle('visibility', 'visible');
			el.addEvent('click', function(evt){
				new Event(evt).stop();
				this.interval = $clear(this.interval);
				this.changeSlide(i);
			}.bind(this));
		}.bind(this));
		
		this.effects[this.current].start({
			'opacity': 1
		});
		
		this.buttons[this.current].addClass('active');
		
		this.interval = this.changeSlide.periodical(7000, this);
	},
	
	changeSlide: function(slide){
		var prev = this.elements[this.current];
		prev.setStyle('z-index', 0);
		
		this.buttons[this.current].removeClass('active');
		
		if (!$defined(slide)) {
			this.current = (this.current + 1 < this.elements.length) ? this.current + 1 : 0;
		} else {
			this.current = slide;
		}
		
		var next = this.elements[this.current];
		next.setStyle('z-index', 1);
		
		this.buttons[this.current].addClass('active');
		
		this.effects[this.current].start({
			'opacity': 1
		});
	}
	
});


window.addEvent('domready', function(){
	
	new Slides();
	
});