var Carrusel = new Class({
    Implements:[Events, Options],
    options:{
        images:[],
        width: Varwidth,
        height: Varheight,
        durationFx:VardurationFx,
        durationDelay: VardurationDelay, //3 segundos
		urls:[],
	    clienteId:"carruselCorporatePromocion"
    },
    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:{cursor:'pointer',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
		
		//4.- Para el link...
		var ix=0;
			ix=this.index;
			ix--;
			if(ix<0)
				ix=this.options.images.length-1;
		
        if(this.isImg1OnTop)
			{
			
            $(this.id+'_img2').setStyle('background-image','url('+this.options.images[this.index]+')');
			
			$(this.clienteId).value=this.options.urls[ix];
			
			}
        else
			{
			
            $(this.id+'_img1').setStyle('background-image','url('+this.options.images[this.index]+')');
			$(this.clienteId).value=this.options.urls[ix];
			
			}
			
			
    },
    newImages:function(images){
        this.options.images = images;
    },
    addImages:function(images){
        this.options.images.merge(images);
		//this.options.urls.merge(url);
    },
	addUrls:function(urls){
        //this.options.images.merge(images);
		this.options.urls.merge(urls);
    },
    addImage:function(image,url,clienteId,width,height,durationFx,durationDelay){
        this.addImages([image]);
		this.addUrls([url]);
		this.clienteId=clienteId;
		this.width=width;
		this.height=height;
		this.durationFx=durationFx;
		this.durationDelay=durationDelay;
    },
    deleteImages:function(){
        this.stop();
        this.options.images.empty();
    }
});