var Carrusel = new Class({
        Implements:[Events, Options],
        options:{
                images:[],
                width: 802,
                height: 162,
                durationFx:1000,
                durationDelay: 3000 //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();
        }
});