var SlideShow = Class.create();
SlideShow.prototype = {
    
    options: {
    	fxDuration : 1, // temps de l'animation en second
	period : 6, // temps entre chaque changement d'image en second
	magnifyCoef: 1.05, // coeff de grossissement de l'image
	delay: 0.65, // delai entre l'animation out et l'animation in en second
	bgColor: "#ffffff", // la couleur du background une fois les images chargées
	brandImageUrl: "/js/slideshow/zekeseven_baseline.png",
	brandImageDuration: 2,
	brandImageHeight: 32,
	brandImageWidth: 126,
	brandImageRight: 59,
	brandImageFromRight: 45,
	brandImageBottom: 30,
	brandImageDelay: 2 // temps en second avant l'apparition du logo
    },

    initialize : function(container, imageURLs, options) {
	this.container = $(container);
	this.setOptions(options);
	
	var position = this.container.getStyle("position");
	if(position != "absolute" || position!= "relative") {
	    this.container.setStyle({
		"position": "relative"
	    });
	}
	this.container.setStyle({
	    "overflow": "hidden"
	});
	
	this.selectedPicIndex = 0;
	// load the images
	this.images = [];
	
	this.loadImages(imageURLs, function() {
	    (function() {
		this.container.setStyle({
		    "background": this.options.bgColor
		});
	    }).bind(this).delay(this.options.fxDuration);
	    for(var i=0; i<this.images.length; i++) {
		var pic = this.images[i];
		pic.setStyle({
		    "position": "absolute",
		    "zIndex": 1,
		    "opacity": 0
		});
		this.container.appendChild(pic);
		pic.originalSize = pic.getDimensions();
		pic.magnifySize = {
		    width: Math.round(pic.originalSize.width * this.options.magnifyCoef),
		    height: Math.round(pic.originalSize.height * this.options.magnifyCoef)
		};
		pic.coordsDiff = {
		    top: Math.round((pic.magnifySize.height - pic.originalSize.height) / 2),
		    left: Math.round((pic.magnifySize.width - pic.originalSize.width) / 2)
		};
	    }
	    this.showPic(0);
	    if (this.images.length > 1) {
	    	new PeriodicalExecuter(this.startSlideShow.bind(this), this.options.period);
	    }
	});
	
	this.showBrandImage();

    },    

    showBrandImage: function() {
	var img = new Element('img');
	img.setStyle({
	    "position": "absolute",
	    "overflow": "hidden",
	    "zIndex": 2,
	    "right": this.options.brandImageFromRight + "px",
	    "bottom": this.options.brandImageBottom + "px",
	    "height": this.options.brandImageHeight + "px",
	    "width": this.options.brandImageWidth + "px"
	});
	if(window.pngFix == undefined) {
	    img.setStyle({
		"opacity": 0
	    });
	}
	img.observe('load', function(el) {
	    (function() {
    	    	this.container.appendChild(el);
    	    	var style = "right:" + this.options.brandImageRight + "px;";
    	    	if(window.pngFix == undefined) {
    	    	    style += "opacity:1;";
        	} else {
        	    pngFix.fixElement(el);
        	}
    	    	new Effect.Morph(el, {
    	    	    duration: this.options.brandImageDuration,
    	    	    style: style
    	    	});
	    }).bind(this, el).delay(this.options.brandImageDelay);
	}.bind(this, img));
	img.src = this.options.brandImageUrl;
    },
    
    loadImages: function(urls, callback) {
	for(var i=0; i<urls.length; i++) {
	    var img = new Element('img');
	    img.observe('load', function(el) {
		this.images.push(el);
		if(urls.length == this.images.length) {
		    callback.call(this);
		}
	    }.bind(this, img));
	    img.src = urls[i];
	}
    },
    
    setOptions: function(options) {
	for(var opt in options) {
	    if(this.options[opt]) {
		this.options[opt] = options[opt];
	    }
	}
    },
    
    startSlideShow : function() {
	this.hidePic(this.selectedPicIndex);
	this.selectedPicIndex = (this.selectedPicIndex == this.images.length - 1 ? 0 : this.selectedPicIndex + 1);
	this.showPic.bind(this).delay(this.options.delay, this.selectedPicIndex);
    },
    
    showPic : function(index) {
	var img = this.images[index];
	img.setStyle({
	    "opacity": 0,
	    "top": -img.coordsDiff.top + "px",
	    "left": -img.coordsDiff.left + "px",
	    "height": img.magnifySize.height + "px",
	    "width": img.magnifySize.width + "px"
	});
	new Effect.Morph(img, {
	    duration: this.options.fxDuration,
	    style: "opacity:1;top:0px;left:0px;width:"+img.originalSize.width+"px;height:"+img.originalSize.height+"px;"
	});
    },

    hidePic : function(index) {
	var img = this.images[index];
	new Effect.Morph(img, {
	    duration: this.options.fxDuration,
	    style: "opacity:0;top:"+(-img.coordsDiff.top)+"px;left:"+(-img.coordsDiff.left)+"px;width:"+img.magnifySize.width+"px;height:"+img.magnifySize.height+"px;"
	});
    }
};