var SlideShow = new Class({
	
	Implements : [Events, Options],
	options: {
			duration: 2000,
			transition: Fx.Transitions.linear,
			wait: 5000,
			loop: false,
			thumbnails: false,
			thumbnailCls: 'outline',
			loadingCls: 'loading'
	},

	initialize: function(divID, container, images, options){
		this.setOptions(options);
		
		this.container = $(container);
		this.container.setStyles({
			position: 'relative',
			overflow: 'hidden'
		});

		this.imagesHolder = new Element('div').setStyles({
			position: 'absolute',
			overflow: 'hidden',
			top: this.container.getStyle('height'),
			left: 0,
			width: '0px',
			height: '0px',
			display: 'none'
		}).inject(this.container,'inside');
		
   		var imageList = [];
   		var srcList = [];
	
   		if( !this.options.thumbnails ){
			$(images).getElements('img').each(function(el){
				imageList.push(el.src);
				el.inject(this.imagesHolder);
			},this);
			this.images = imageList;
			
		}else{
		
   			this.thumbnails = $(images).getElements('a');
			this.thumbnails.each(function(el,i){
				srcList.push(el.href);
				imageList.push(el.getElement('img'));
				el.href = '#';
				el.addEvent('click',function(){
					this.arret();
					this.play(i);				 
				}.bind(this,el,i));
			},this);
			this.images = srcList;
			this.thumbnailImages = imageList;
			
			this.bgSlider = new BackgroundSlider(this.thumbnails,{duration: this.options.duration/3, divContainer: divID, className: this.options.thumbnailCls, padding:{top:0,right:-2,bottom:-2,left:0}});
			this.bgSlider.set(this.thumbnails[0]);
		
		}
		
		this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({
			position: 'absolute',
			top: 0,
			left: 0,
			zIndex: 3,
			display: 'none',
			width: this.container.getStyle('width'),
			height: this.container.getStyle('height')
		}).inject(this.container,'inside');
		
		this.oldImage = new Element('div').setStyles({
			position: 'absolute',
			overflow: 'hidden',
			top: 0,
			left: 0,
			opacity: 0,
			width: this.container.getStyle('width'),
			height: this.container.getStyle('height')
		}).inject(this.container,'inside');
		
		this.newImage = new Element('div').setStyles({
			position: 'absolute',
			overflow: 'hidden',
			top: 0,
			left: 0,
			opacity: 0,
			width: this.container.getStyle('width'),
			height: this.container.getStyle('height')
		}).inject(this.container,'inside');
	
		this.imageObj ='';
	
		this.timer = 0;
		this.image = -1;
		this.imageLoaded = 0;
		this.stopped = true;
		this.started = false;
		this.animating = false;
	},
	
	load: function(){
		
		$clear(this.timer);
		this.loading.setStyle('display','block');
		this.image++;
		var img = this.images[this.image];
		delete this.imageObj;

		var doLoad = true;

		this.imagesHolder.getElements('img').each(function(el){
			var src = this.images[this.image];
			if(el.src == src){
				this.imageObj = el;
				doLoad = false;
				this.add = false;
				this.show();
			}
		},this);

		if(doLoad){
			this.add = true;
			this.imageObj = new Asset.image(img, {
				onload: this.show.bind(this)
			});
		}

	},

	show: function(add){

		if(this.add){
			this.imageObj.inject(this.imagesHolder,'inside');
		}
		
		this.newImage.setStyles({
			zIndex: 1,
			opacity: 0
		});
		var img = this.newImage.getElement('img');

		if(img){
			this.imageObj.clone().replaces(img);
		}else{
			var obj = this.imageObj.clone();
			obj.inject(this.newImage,'inside');
		}
		this.imageLoaded = this.image;
		this.loading.setStyle('display','none');

		if(this.options.thumbnails){
			var elT = this.thumbnailImages[this.image];
			this.bgSlider.move(elT);
			this.bgSlider.setStart(elT);
		}
				
		this.animating = true;
		
		this.newImage.fade('1');
		
		this.resetAnimation.delay(this.options.duration+90,this);
		
		if(!this.stopped){
		this.next.delay(this.options.duration+100,this,true);
		}
		
	},
	
	wait: function(){
		this.timer = this.load.delay(this.options.wait,this);
	},
	
	play: function(num){ 
		
		if(this.stopped){
			if(num > -1){this.image = num-1};
			if(this.image < this.images.length){
				this.stopped = false;
				if(this.started){
					this.next();
				}else{
					this.load();
				}
				this.started = true;
			}
		}
	},
	
	arret: function(){
		$clear(this.timer);
		this.stopped = true;
	},
	
	next: function(wait){
	
		var doNext = true;
		if(wait && this.stopped){
			doNext = false;
		}
		if(this.animating){
			doNext = false;
		}
		if(doNext){
			this.cloneImage();
			$clear(this.timer);
			if(this.image < this.images.length-1){
				if(wait){
					this.wait();
				}else{
					this.load();	
				}
			}else{
				if(this.options.loop){
					this.image = -1;
					if(wait){
						this.wait();
					}else{
						this.load();	
					}
				}else{
					this.stopped = true;
				}
			}
		}
	},
	
	previous: function(){
		if(this.imageLoaded == 0){
			this.image = this.images.length-2;	
		}else{
			this.image = this.imageLoaded-2;
		}
		this.next();
	},
	
	cloneImage: function(){
		var img = this.oldImage.getElement('img');

		if(img){
			this.imageObj.clone().replaces(img);
		}else{
			var obj = this.imageObj.clone();
			obj.inject(this.oldImage,'inside');
		}
		
		this.oldImage.setStyles({
			zIndex: 0,
			top: 0,
			left: 0,
			opacity: 1
		});
		
		this.newImage.setStyles({opacity:0});
	},
	
	resetAnimation: function(){
		this.animating = false;
	}
	
});