var Carrusel = new Class({
	Implements:[Events, Options],
	options:{
		images:[],
		width: 550,
		height: 548,
		durationFx:1000,
		durationDelay: 4000 //3 segundos
	},
	initialize:function(el,options){
		this.setOptions(options || {});
		this.el = $(el);
		this.id = this.el.get('id');
		this.build();
		this.start();
	},
	build:function(){
		//1.- Crear un div contenedor e inyectarlo dentro del elemento principal.
		var content = new Element('div',{id:this.id+'_content',styles:{position:'relative',width:this.options.width+'px',height:this.options.height+'px'}}).inject(this.el);
		//2.- Crear un div para la imagen1 e inyectarlo al contenedor anterior
		var img1 = new Element('div',{id:this.id+'_img1',styles:{width:'100%',height:'100%'}}).inject(content);
		//3.- Crear un div para la imagen2 e inyectarlo al contenedor anterior
		var img2 = new Element('div',{id:this.id+'_img2',styles:{position:'absolute',width:this.options.width+'px',height:this.options.height+'px',top:0,left:0}}).inject(content);
		//4.- Crear las los efectos sobre los divs que contenedores de las imagenes
		this.imgFx1 = new Fx.Tween(img1, 'opacity',{
						duration:this.options.durationFx,
						onComplete:function(){
						this.nextImage();
					}.bind(this)
				});
		this.imgFx2 = new Fx.Tween(img2, 'opacity',{duration:this.options.durationFx});
		//5.- Iniciar con opacidad al 0%
		this.imgFx1.set(0);
		this.imgFx2.set(0);
	},
	start:function(){
		//1.- Revisar si hay imagenes para poder comenzar el carrusel
		if(this.options.images.length==0)
			return;
		//2.- Disparar el evento onStart
		this.fireEvent('onStart');
		this.index = -1;
		this.isImg1OnTop = false;
		//3.- Solicitar imagen
		this.nextImage();
		//4.- Hacer la trancision inicial
		this.transition();
		//5.- Crear un temporizador para ejecutar la transición periodicamente
		this.timer = this.transition.periodical(this.options.durationDelay,this);
	},
	stop:function(){
		this.fireEvent('onStop');
		$clear(this.timer);
	},
	transition:function(){
		this.fireEvent('onTransition');
		this.imgFx1.start(this.isImg1OnTop?0:1);
		this.imgFx2.start(this.isImg1OnTop?1:0);
		this.isImg1OnTop = !this.isImg1OnTop;
	},
	nextImage: function(){
		//1.- Se incrementa el contador
		this.index++;
		//2.- Se verifica la dimension del arreglo de imagenes, si llego al limite iniciar desde el principio
		if(this.index>=this.options.images.length)
			this.index = 0;
		//3.- Se verifica si la imagen uno esta actualmente viendose, de esta forma se sabe a donde posicionar la siguietne imagen
		if(this.isImg1OnTop)
			$(this.id+'_img2').setStyle('background-image','url('+this.options.images[this.index]+')');
		else
			$(this.id+'_img1').setStyle('background-image','url('+this.options.images[this.index]+')');
	},
	newImages:function(images){
		this.options.images = images;
	},
	addImages:function(images){
		this.options.images.merge(images);
	},
	addImage:function(image){
		this.addImages([image]);
	},
	deleteImages:function(){
		this.stop();
		this.options.images.empty();
	}
});