var SlideShow = new Class({
	
	Implements: [Options, Events],
	
	options: {
		delay: 5000
	},
	
	initialize: function(container,options) {
		this.container = container;
		this.items = $(this.container).getElements('a');
		this.setOptions(options);
		this.preloadImages();
	},
	
	preloadImages: function() {
		$(this.container).startWaiting();
		this.images = new Array();
		this.items.each(function(el) {
			this.images.push(el.get('rel'));
		},this);
		var loader = new Asset.images(this.images,{
			onComplete: (function() {
				$(this.container).stopWaiting();
				this.start();
			}).bind(this)
		});
	},
	
	start: function() {
		this.items.each(function(el,index) {
			el.set('opacity',0);
			el.setStyle('display','block');
			el.setStyle('background','url('+this.images[index]+')');
		},this);
		this.show(false,0);
	},
	
	show: function(previtem,index) {
		if(this.items[previtem]) {
			this.items[previtem].fade('out');
		}
		$$('a.pager').removeClass('active');
		$('btn_'+(index+1)).addClass('active');
		this.items[index].fade('in');
		if(index==3) {
			var nextitem = 0;
		} else {
			var nextitem = index + 1;
		}
		this.show.delay(this.options.delay,this,[index,nextitem]);
	}
	
});

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