var GallerySlide= new Class({
    principalContainer:"container_all_info_module_slide",
    slides:null,
    assetss:null,
    carrucelItems:null,
    pointer:0,
    transicionImage:null,
    acordion:null,
    acordionAnimated:null,
    panelInfo:null,
    panelInfoItems:null,
    //variables carrucel
    mode:null,
    modes:null,
    box:null,
    button_event : 'click',
    handle_event : 'click',
    interval :null ,
    onWalk:null,
    initialize: function(element, options)
    {
        this.options = Object.extend({
            containerSlides:"module_slide_images",       
            infoSlideGallery:"up_down_slide_info",
            slideItemClass:"module_slide_image_item",
            arrayImages:null,
            slideCarrucelItems:"module_slide_carrucel_items",
            slideCarrucelClass:"module_slide_carrucel_item",
            up_down_slide_info:"up_down_slide_info",
            acordionInfo:"acordion_info",
            acordionInfoClass:"info_text_item",
            time:5000,
            loadingId:"module_slide_slides_loading",
            ancho:null,
            alto:null,
            //variables carrucel
            items:null,
            size:240,
            box:null,
            buttons:null,
            handles:null,
            fxOptions:null,
            onWalk:null,
            startItem:null,
            autoPlay:null


     
        }, options || {});
        
        if($defined($(element)) && $defined($(this.options.containerSlides)) && this.options.arrayImages!=null && this.options.arrayImages.length>0 )
        {      
            this.principalContainer=element;
            this.slides=$$("#"+this.options.containerSlides+" ."+this.options.slideItemClass);
            this.carrucelItems=$$("#"+this.options.slideCarrucelItems+" ."+this.options.slideCarrucelClass);
            this.acordion=$(this.options.up_down_slide_info);
            this.assetss=new Array();
            this.transicionImage=new Array();
            this.panelInfo=$(this.options.acordionInfo);
            this.panelInfoItems=$$("#"+this.options.acordionInfo+" ."+this.options.acordionInfoClass);
            this.loadImages();
            this.loadingInfo=$(this.options.loadingId);

            //inicializacion del carrucel
            this.items =this.options.items;
            
            this.mode =  'horizontal';
            this.modes = {
                horizontal:['left','width']
            };
            this.size = this.options.size;
            this.box = this.options.box.setStyle(this.modes[this.mode][1],(this.size*this.items.length)+'px');
            this.button_event = 'click';
            this.handle_event = 'click';
            this.interval = options.interval || 5000;
            this.buttons = {
                previous: [],
                next: [],
                play: [],
                playback: [],
                stop: []
            };
            if(this.options.buttons){
                for(var action in this.options.buttons){
                    this.addActionButtons(action, $type(this.options.buttons[action])=='array' ? this.options.buttons[action] : [options.buttons[action]]);
                }
            }
            this.handles = this.options.handles || null;
            if(this.handles){
                this.addHandleButtons(this.handles);
            }
            this.fx = new Fx.Style(this.box,this.modes[this.mode][0],this.options.fxOptions||{
                duration:500,
                wait:false
            });
            this.onWalk = this.options.onWalk || null;
            this.currentIndex = this.options.startItem || 0;
            this.previousIndex = null;
            this.nextIndex = null;
            this.autoPlay = this.options.autoPlay || false;
            this._auto = null;
            this.box.setStyle(this.modes[this.mode][0],(-this.currentIndex*this.size)+'px');
            if(this.options.autoPlay) this.play(this.interval,'next',true);

         
        }

    },
    loadImages:function()
    {
        var xl=this.options.arrayImages;
        var images=new Asset.images(xl, {
            onComplete: function()
            {
                this.nElements=images.length;
                this.asingPrincipalImages(images);
                this.makeAnimation();
            }.bind(this)

        });
    },
    showAllElements:function()
    {
        var imageContainer = this.loadingInfo.setStyles({
            display:'block',
            opacity: 1
        });
        new Fx.Style(imageContainer, 'opacity', {
            duration: 1000
        } ).start(0);
        this.hideLoding.delay(1010,this);
        
    },
    hideLoding:function()
    {
        this.loadingInfo.setStyles({display:"none"});
    },
    makeAnimation:function()
    {
        this.carrucelItems.each(function(el,indice){
            el.addEvent('click',this.nextItemButtom.bind(this,indice));
        }.bind(this));
       
        this.slides.each(function(el,i){
            this.transicionImage[i]=new Fx.Style(el.setStyles({
                display:'block',
                opacity: 0,
                visibility: "visible"
            }), 'opacity', {
                duration: 600
            });
        }.bind(this)
            );

        this.slides.setStyles({
            display:'none',
            opacity: 0

        });


        this.slides[this.pointer].setStyles({
            display:'block',
            opacity: 1
            
        });

        this.acordionAnimated=new Fx.Style(this.acordion.setStyles({
            top: 0
        } ), 'top', {
            duration: 400
        } ).start(0);
        if(this.nElements>1)
        {
            this.automatic=this.nextItem.periodical(this.options.time,this);

        }
        this.showAllElements();

    },
    nextItemButtom:function(indice)
    {
        this.automatic=$clear(this.automatic);
        this.reestartAutomatic.delay(this.options.time/2,this);
        this.goTo(indice,true);
    },
    nextItem:function()
    {
        var indice=0;
        if(this.pointer+1>=this.nElements)
            indice=0;
        else
            indice=this.pointer+1;

        this.goTo(indice,false);
    },

    goTo:function(indice,flag)
    {
        
        if(indice!=this.pointer)
        {
            this.prevItem=this.pointer;
            var carrucelItem=this.carrucelItems[this.pointer].getElement("div");
            this.acordionAnimated.stop();
            this.acordionAnimated.clearChain();
            this.acordionAnimated.start(200).chain(this.changeText.pass(indice,this));
            carrucelItem.removeClass("carrucel_item_active");
            carrucelItem.addClass("carrucel_item_unactive");
            this.pointer=indice;
            var dontMove=true;
            
            if((this.pointer+1)%3 ==0)
            {
                dontMove=false;
              
            }
            carrucelItem=this.carrucelItems[this.pointer].getElement("div")
            carrucelItem.addClass("carrucel_item_active");
            carrucelItem.removeClass("carrucel_item_unactive");
            this.fx.stop();
            if((this.pointer==0 || this.pointer>=3) && !flag && this.pointer+1<=this.nElements && dontMove)
            {
                this.next();
             
            }
            


        //this.pages[this.pointer].addClass('activePage');
        }
    },
    upAcordion:function(indice)
    {
        this.transicionImage[indice].clearChain();
        this.acordionAnimated.stop();
        this.acordionAnimated.start(0);

    },
    hidddeElment:function(indice)
    {
          this.slides[indice].setStyles({   display:'none'});
          
    },

    changeText:function(indice)
    {
        this.transicionImage[this.prevItem].clearChain();
        this.transicionImage[this.prevItem].stop();
        this.transicionImage[this.prevItem].start(1, 0).chain(this.hidddeElment.pass(this.prevItem,this));

        this.transicionImage[this.pointer].stop();
        this.slides[this.pointer].setStyles({display:'block'});
        this.transicionImage[this.pointer].start(0, 1).chain(this.upAcordion.pass(this.pointer,this));

        this.panelInfoItems.setStyles({
            "display":"none"
        });
        this.acordionAnimated.stop();
        this.panelInfoItems[indice].setStyles({
            "display":"block"
        });

        //this.InfoPaneElements.setStyles({display:'none',  visibility:'hidden', opacity: 0  });
        // this.InfoPaneElements[indice].setStyles({display:'block', visibility:'visible', opacity: 1 });
        //this.transicionImage[this.pointer].set(1);
        /*this.acordionAnimated.stop();
        this.acordionAnimated.start(0);*/
    },


    asingPrincipalImages:function(images)
    {
        //this.slides
        images.each(function(el,i)
        {
            if($defined(this.slides[i].getElement("a")))
            {
                var containerImage=this.slides[i].getElement("a")
                containerImage.adopt(el);
                if(this.options.ancho!=null && parseInt(this.options.ancho)>0)
                    el.setStyle('width', this.options.ancho+'px');

               if(this.options.alto!=null && parseInt(this.options.alto)>0)
                    el.setStyle('height', this.options.alto+'px');

                if(i>0){
                    this.slides[i].setStyles({
                        opacity: 0,
                        "display":"none"
                    });
                    this.panelInfoItems[i].setStyles({
                        "display":"none"

                    });
                    
                }

                
            }
            this.assetss[i]=this.slides[i];
          
        }.bind(this));
    },
    reestartAutomatic:function()
    {
        this.automatic=$clear(this.automatic);
        this.automatic=this.nextItem.periodical(this.options.time,this);
    },
    //funciones del carrucel
    previous: function(manual){
        this.currentIndex += this.currentIndex>0 ? -1 : this.items.length-3;
        this.walk(null,manual);
    },

    next: function(manual){
        this.currentIndex += this.currentIndex<this.items.length-3 ? 1 : 3-this.items.length;
        this.walk(null,manual);
    },

    play: function(delay,direction,wait){
        this.stop();
        if(!wait){
            this[direction](false);
        }
        this._auto = this[direction].periodical(delay,this,false);
    },

    stop: function(){
        $clear(this._auto);
    },

    walk: function(item,manual){
        this.automatic=$clear(this.automatic);
        this.reestartAutomatic();


        if($defined(item)){
            if(item==this.currentIndex) return;
            this.currentIndex=item;
        }
        

        this.previousIndex = this.currentIndex + (this.currentIndex>0 ? -1 : this.items.length-1);
        this.nextIndex = this.currentIndex + (this.currentIndex<this.items.length-1 ? 1 : 1-this.items.length);
        if(manual){
            this.stop();
        }
    
        this.fx.start(-this.currentIndex*this.size);
        if(this.onWalk){
            this.onWalk(this.items[this.currentIndex],(this.handles?this.handles[this.currentIndex]:null));
        }
        if(manual && this.autoPlay){
            this.play(this.interval,'next',true);
        }
    },

    addHandleButtons: function(handles){
        for(var i=0;i<handles.length;i++){
            handles[i].addEvent(this.handle_event,this.walk.pass([i,true],this));
        }
    },

    addActionButtons: function(action,buttons){
        for(var i=0; i<buttons.length; i++){
            switch(action){
                case 'previous':
                    buttons[i].addEvent(this.button_event,this.previous.pass([true],this));
                    break;
                case 'next':
                    buttons[i].addEvent(this.button_event,this.next.pass([true],this));
                    break;
                case 'play':
                    buttons[i].addEvent(this.button_event,this.play.pass([this.interval,'next',false],this));
                    break;
                case 'playback':
                    buttons[i].addEvent(this.button_event,this.play.pass([this.interval,'previous',false],this));
                    break;
                case 'stop':
                    buttons[i].addEvent(this.button_event,this.stop.create({
                        bind:this
                    }));
                    break;
            }
            this.buttons[action].push(buttons[i]);
        }
    }


    
});