var SEF_SlideShow = new Class({

    options: {
		container		: null,
		duration		: 2000,
		interval		: 3000,
		folder			: "",
		forcePosition	: true,
		images			: []
		
	},
	
	initialize: function(options){
		this.setOptions(options)
	
		this.morphFx1		= null;
		this.morphFx2		= null;
		this.container 		= $(this.options.container) || null;
		this.duration		= this.options.duration;
		this.interval		= this.options.interval;
		this.images			= this.options.images;
		this.folder			= this.options.folder;
		this.forcePosition	= (this.options.forcePosition);
		this.img1ID			= "SEF_SS_image1";
		this.img2ID			= "SEF_SS_image2";
		this.el_img1		= null;
		this.el_img2 		= null;
		this.index 			= 0;
		this.counter		= 0;
//		this.maskWidth 		= 0;
//		this.maskHeight		= 0;
		this.intervalID		= 0;
		this.numItems 		= this.images.length;
		this.overflow		= "hidden"
		
		if (this.container != null && this.numItems > 0) {
			/*
			this.maskWidth 			= this.container.getSize().x;
			this.maskHeight			= this.container.getSize().y;
			*/
			this.container.setStyle("position","relative")
			this.container.setStyle("overflow",this.overflow)

			// create first image
			this.el_img1 = new Asset.image(this.folder + this.images[this.index], {"id":this.img1ID,'onload': function(){
				this.store("ready",true);
			}});
			
			this.el_img1.store("ready",false);
			if (this.forcePosition) this.el_img1.setStyle("position","absolute");			

			this.container.adopt(this.el_img1);
			
			// if I have more images to display, create the second one
			if (this.numItems > 1) {
				this.index++;
				this.el_img2 = new Asset.image(this.folder + this.images[this.index], {"id":this.img2ID,'onload': function(){
					this.store("ready",true);
				}});
				
				if (this.forcePosition) this.el_img2.setStyle("position","absolute");

				this.el_img2.store("ready",false);
				this.el_img2.set({"opacity":0});
				this.container.adopt(this.el_img2);

			
				// wait for all images in the div to be ready, then start Application
				this.intervalID = (function(){
										var collection = this.container.getChildren();
										var ready = true;
										for (var i=0;i<collection.length;i++) {
											if (!collection[i].retrieve("ready")) ready = false;
										}
										
										if (ready) this.startApplication();
										}).periodical(200, this);
			}
		}
	},
	
	startApplication:function(){
		$clear(this.intervalID)
		this.counter = this.index;
		this.startTimer();
	},
	
	fade:function(){
		this.morphFx1 			= new Fx.Morph(this.el_img1,{duration:this.duration});
		this.morphFx2 			= new Fx.Morph(this.el_img2,{duration:this.duration,onComplete:function(){this.host.prepareNextImage()}});
		this.morphFx2.host		= this;
		
		fromOpacity = this.el_img1.get("opacity") * 1;
		toOpacity	= !fromOpacity * 1;

		this.morphFx1.start({"opacity":[fromOpacity,toOpacity]});
		
		fromOpacity = !fromOpacity * 1;
		toOpacity	= !fromOpacity * 1;	
		this.morphFx2.start({"opacity":[fromOpacity,toOpacity]});
	},
	
	prepareNextImage:function(){
		this.index 		= (this.index+1 >= this.numItems) ? 0 : this.index+1;
		this.counter++;
		var targetImage = (this.counter%2 == 0) ? $(this.el_img1.get("id")) : $(this.el_img2.get("id"));
		this.preloadImage(targetImage,this.index);
	},
	
	preloadImage:function(targetImage,index){		
//		$("debug").set("html",
//					   		$("debug").get("html")+"\n i= "+ this.index + " "+
//							targetImage.get("id")+".src = " +targetImage.get("src")+" / " + this.images[index])
		
		if (targetImage.get("src") != this.images[index]) {
//				$("debug").set("html",
//											$("debug").get("html")+"\n"+
//											"precarico "+this.images[this.index])
			this.preloader = new Asset.image(this.folder+this.images[index], {
					'target' : targetImage.get("id"),
					'onload': function(){
						this.host.setNewSrc(this.get("target"),this.get("src"));
						this.host.startTimer();
					}
			});	
			this.preloader.host = this;
		} else this.startTimer();
	},
	
	setNewSrc: function(imageID,src){
		var image = $(imageID)
		image.set("src",src);
	},
	
	startTimer: function(){
//		$("debug").set("html",$("debug").get("html")+"\nTimer Partito")
		this.intervalID = this.fade.delay(this.interval, this);
	}
});
SEF_SlideShow.implement(new Options, new Events);