var Carrusel = new Class({
    Implements:[Events, Options],
    options:{
        images:[],
        width: 560,
        height: 420,
        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});*/
          this.imgFx1 = new Fx.Tween(img1, {
						property: 'opacity',
                        duration:this.options.durationFx,
                        onComplete:function(){
                        this.nextImage();
                    }.bind(this)
                });
        this.imgFx2 = new Fx.Tween(img2, {property: '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();
    }
});