/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
var Carrusel = new Class({
    Implements:[Events, Options],
    options:{
        //images:['./../imagenes/imagen1.jpg','./../imagenes/imagen2.jpg','./../imagenes/imagen4.jpg'],
        images:[],
        width: 140,
        height: 100,
        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',textAlign:'center',width:100+'%',height:this.options.height+'px'}}).inject(this.el);
        var img1;
        var img2;
        if (navigator.appName=="Microsoft Internet Explorer") {
            img1 = new Element('div',{id:this.id+'_img1',styles:{position:'absolute',bottom:0,left:0.9+'em',width:this.options.width+'px',height:this.options.height+'px'}}).inject(content);
            img2 = new Element('div',{id:this.id+'_img2',styles:{position:'absolute',bottom:0,left:0.9+'em',width:this.options.width+'px',height:this.options.height+'px'}}).inject(content);
        } else {
        //2.- Crear un div para la imagen1 e inyectarlo al contenedor anterior
            img1 = new Element('div',{id:this.id+'_img1',styles:{position:'absolute',bottom:0,margin:0.9+'em',width:this.options.width+'px',height:this.options.height+'px'}}).inject(content);
        //3.- Crear un div para la imagen2 e inyectarlo al contenedor anterior
            img2 = new Element('div',{id:this.id+'_img2',styles:{position:'absolute',bottom:0,margin:0.9+'em',width:this.options.width+'px',height:this.options.height+'px'}}).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();
    }
});