var SEF_SlideShow = new Class({

    options: {
		container		: null,
		duration		: 2000,
		interval		: 3000,
		folder			: "",
		forcePosition	: true,
		autosize		: false,
		images			: [],
		size			: []
		
	},
	
	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.maskWidth 		= this.options.size[0] || null;
		this.maskHeight		= this.options.size[1] || null;
		this.img1ID			= "SS1_"+(new Date().getTime()*Math.random());
		this.img2ID			= "SS2_"+(new Date().getTime()*Math.random());
		this.overflow		= "hidden"
		this.el_img1		= null;
		this.el_img2 		= null;
		this.index 			= 0;
		this.counter		= 0;
		this.intervalID		= 0;
		this.numItems 		= this.images.length;
		
		if (this.container != null && this.numItems > 0) {

			this.container.setStyle("position","relative");
			this.container.setStyle("overflow",this.overflow);
			
			// if container has childnodes removes them
			this.container.getChildren().each(function(item){
				item.dispose();
			});

			// 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);

				// check if both images are ready (or just the first if the second one hasn't been created)
				this.intervalID = (function(){
										if (this.el_img1.retrieve("ready") && (!$chk(this.el_img2) || this.el_img2.retrieve("ready"))) this.startApplication();
										}).periodical(200, this);
			}
		}
	},
	reset:function(){
		$clear(this.intervalID);
		this.images 		= [];
		this.index 			= 0;
		this.counter		= 0;
		this.intervalID		= 0;
		this.numItems 		= this.images.length;
	},
	startApplication:function(){
		$clear(this.intervalID);

		if (this.options.autosize) {
			this.container.setStyle("width",this.el_img1.getSize().x);
			this.container.setStyle("height",this.el_img1.getSize().y);
		}
		else if(this.maskWidth != null && this.maskHeight != null){
			this.container.setStyle("width",this.maskWidth);
			this.container.setStyle("height",this.maskHeight);
		}
		
		
		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);