var Slide = new Class({
    initialize: function(target, imgs, time){
		this.i = 0;
		this.Target = target;
		this.Imgs = imgs;
		this.time = (time!='') ? time : 5000;

		this.slideshow = this.runSlide.periodical(this.time,this,this);
		
		var myclass = this;

		$('SlidePrevious').addEvents({
			'click': function(){
				$clear(myclass.slideshow);
				myclass.i = (myclass.i<=1) ? (myclass.i==0) ? myclass.Imgs.length-2 : myclass.Imgs.length-1 : myclass.i-2;
				myclass.runSlide(myclass);
				$('SlideStop').setStyles({'display':'none'});
				$('SlidePlay').setStyles({'display':'block'});
			}
		})
		$('SlideNext').addEvents({
			'click': function(){
				$clear(myclass.slideshow);
				myclass.runSlide(myclass);
				$('SlideStop').setStyles({'display':'none'});
				$('SlidePlay').setStyles({'display':'block'});
			}
		})
		$('SlideStop').addEvents({
			'click': function(){
				$clear(myclass.slideshow);
				$('SlideStop').setStyles({'display':'none'});
				$('SlidePlay').setStyles({'display':'block'});
			}
		})
		$('SlidePlay').addEvents({
			'click': function(){
				myclass.runSlide(myclass);
				myclass.slideshow = myclass.runSlide.periodical(myclass.time,myclass,myclass);
				$('SlideStop').setStyles({'display':'block'});
				$('SlidePlay').setStyles({'display':'none'});
			}
		})
    },
	extSlide: function(){
		this.runSlide();
	},
	runSlide: function(myclass){
		this.Target.setStyle('background','#fff');
		(this.i==this.Imgs.length-1) ? this.i = 0 : this.i++;
		var ImgToLoad = this.Imgs[this.i];
		var OldImg = this.Target.getElement('img');
		var AllImgs = this.Target.getElements('img');
		AllImgs.each(function(imgs, n){
			if (n>0)
			var removedElement = imgs.dispose();
		});
		$('Loading').setStyles({'display':'block'});
		var img = new Element('img',{'src':ImgToLoad, 'styles':{'opacity':0}}).injectInside(this.Target);
		img.addEvents({
			'load': function(){
			$('Loading').setStyles({'display':'none'});
				// img.set({'opacity':0});
				var myFx = new Fx.Tween(OldImg,{
					duration: 400,
					transition: Fx.Transitions.Quart.easeIn,
					onComplete: function(){
						img.injectAfter(OldImg);
						$('SlideNum').set({'html':myclass.i+1+' - '+myclass.Imgs.length});
						var removedElement = OldImg.dispose();
						var myFx2 = new Fx.Tween(img,{
							duration: 400,
							transition: Fx.Transitions.Quart.easeOut,
							onComplete: function(){
							}
						}).start('opacity', 1);
					}
				}).start('opacity', 0);
			}
		})
	},
	loadImg: function(i){
		this.i = i-1;
		this.runSlide();
	}
});