var Diaporama = Class.create({
	options:{},
	container:null,
	images:[],
	plan1:null,
	plan2:null,
	index:0,
	delay:8000,
	increment:0,
	isPaused:false,
	maxWidth:0,
	maxHeight:0,
	opacityConfig:{
		appear:{
			duration:.5, 
			from:0, 
			to:1, 
			transition:Effect.Transitions.sinoidal
		}, 
		fade:{
			duration:.5, 
			from:1, 
			to:0, 
			transition:Effect.Transitions.sinoidal
		}
	},
	initialize:function(container, images, options) {
		var self = this;
		self.container = container;
		self.images = images;
		self.options = options;
		self.plan1 = new Element('div', {});
		self.plan2 = new Element('div', {});
		self.container.style.position = 'relative';
		self.plan1.style.position = 'absolute';
		self.plan2.style.position = 'absolute';
		self.container.insert({top:self.plan1});
		self.container.insert({top:self.plan2});
		self.images.each(function(image) {
			self.maxWidth = Math.max(self.maxWidth, Math.round(Number(image.width)) || 0);
			self.maxHeight = Math.max(self.maxHeight, Math.round(Number(image.height)) || 0);
		});
		if (self.maxWidth != 0 && self.maxHeight != 0) {
			self.container.style.top = '0px';
			self.container.style.left = '0px';
			self.container.style.width = self.maxWidth + 'px';
			self.container.style.height = self.maxHeight + 'px';   
		}
		if (self.options.next && self.options.prev && self.options.play && self.options.pause) {
			self.options.next.observe('click', function(event) {
				self.isPaused = true;
				self.index = ((self.index + 1 > self.images.length - 1) ? 0 : ++self.index);
				self.displayImage();
				self.options.pause.hide();
				self.options.play.show();
			});
			self.options.prev.observe('click', function(event) {
				self.isPaused = true;
				self.index = ((self.index - 1 < 0) ? self.images.length - 1 : --self.index);
				self.displayImage();
				self.options.pause.hide();
				self.options.play.show();
			});
			self.options.play.observe('click', function(event) {
				self.isPaused = false;
				self.index = ((self.index + 1 > self.images.length - 1) ? 0 : ++self.index);
				self.displayImage();
				self.options.play.hide();
				self.options.pause.show();
			});
			self.options.pause.observe('click', function(event) {
				self.isPaused = true;
				self.options.pause.hide();
				self.options.play.show();
			});
		}
		self.isPaused = !self.options.autoStart; 
		if (self.isPaused) {
			self.options.play.show();
			self.options.pause.hide();
		} else {
			self.options.play.hide();
			self.options.pause.show();
		}
	},
	start:function() {
		var self = this;
		if (self.images[self.index].image == undefined) {
			var image = new Image();
			self.images[self.index].image = image;
			Event.observe(image, 'load', function(event) {
				self.displayImage();
			});
			image.src = self.images[self.index].src;
		} else {
			self.displayImage();
		}
	},
	getImageHtml:function(value) {
		var imgHtml = "<img";
		for (var s in value) {
			if (typeof value[s] != 'object')
				imgHtml += " " + s + "=\"" + value[s] + "\"";  
		}
		imgHtml += " />";
		return imgHtml;
	},
	displayImage:function() {
		var self = this;
		self[((self.increment % 2 == 0) ? 'plan2' : 'plan1')].fade(self.opacityConfig.fade);
		self[((self.increment % 2 == 0) ? 'plan1' : 'plan2')].update(self.getImageHtml(self.images[self.index])).appear(self.opacityConfig.appear);
		var image = $(self[((self.increment % 2 == 0) ? 'plan1' : 'plan2')].select('img')[0]);
		if (image) {
			image.style.marginLeft = self.maxWidth/2 - com.croisi.Tools.toNumber(image.getStyle('width'))/2 + 'px';
			image.style.marginTop = self.maxHeight/2 - com.croisi.Tools.toNumber(image.getStyle('height'))/2 + 'px';
		}
		self.increment++;
		if (!self.isPaused) {
			self.index = ((self.index + 1 > self.images.length - 1) ? 0 : ++self.index);
			setTimeout(self.start.bind(self), self.delay);
		}
	}
});