var Visor=new Class({
         options:{
            slides:[],//selector CSS de los elementos a mostrar $$('string')
            startIndex:0,
            onShow:Class.empty,//function(){alert('ooop')},
            wrap:true,
            nav: Class.empty
         },
         initialize: function(options){
			this.setOptions(options);
            this.slides=[];
            this.effects=[];
            this.addSlides(this.options.slides);

            $each(this.slides, function(slide){
               slide.setStyles({
                  display:'none',
                  opacity:0
               });
            });
            if(this.slides.length) this.showSlide(this.options.startIndex);
         },
         setControl: function(nav){
            this.nav=nav;
         },
         addSlides: function(slide){//almacena en los arrays THIS.SLIDES y THIS.EFFECTS los slides y sus efectos correspondientes

            $$(slide).each(function(slide){
               this.slides.include($(slide));//$ da a slide las propiedades de element
               this.effects[this.slides.indexOf(slide)]= new Fx.Style(slide,'opacity');
              slide.addEvent('click', this.cycleForward.bind(this));//añade 'onclick'
            },this)
         },
         addSlide: function(slide){
            this.addSlides([slide]);
         },
         cycleForward: function(){
            if($chk(this.now)&&this.now<this.slides.length-1) this.showSlide(this.now+1)//si está definido this.now
            else if(this.now&&this.options.wrap) this.showSlide(0)// si está definido y ha llegado al final
            else if(!$defined(this.now)) this.showSlide(this.options.startIndex) //si no está definido comienza en startIndex
         },
         cycleBack: function(){
            if(this.now>0) this.showSlide(this.now-1)
            else if(this.options.wrap) this.showSlide(this.slides.length-1)
         },
         showSlide: function(iToShow){
            var now=this.now;
            var currentSlide= this.slides[now];
            var slide=this.slides[iToShow];
            function fadeIn(s){//sitúa y da visibilidad a la img pero mantiene la opacidad en 0
               s.setStyles({
                  display:'block',
                  visibility:'visible',
                  opacity:0
               });
               this.effects[this.slides.indexOf(s)].start(1);
               this.fireEvent('onShow',[slide,iToShow]);
            };
            if(slide){
               if($chk(now)&&now!=iToShow){//si existe NOW y!= iToShow
                  this.effects[now].start(0).chain(function(){//oculta la img actual
                        this.slides[now].setStyle('display','none');//le aplica display:none
                       fadeIn.apply(this,[slide]);//hace aparecer la nueva img
                     }.bind(this));
               }else fadeIn.apply(this,[slide]);//si no existe NOW, simplemente hace aparecer la IMG
               this.now=iToShow;
            }
         }
      });
      Visor.implement(new Options, new Events);

      Visor.implement({
         tempor: function(int){
            this.period=this.cycleForward.periodical(int,this);
         },
       	detener: function(){
			$each(this.slides, function(slide){								
			  slide.visor= this;
			  slide.addEvent('mouseover', function(){
				 $clear(this.visor.period);
               }, this)
            }, this);
			$each(this.slides, function(slide){								
			  slide.visor= this;
			  slide.addEvent('mouseout', function(){
				 this.visor.tempor(5000);
               }, this)
            }, this)
         }
		 
      });
       
      var Navegador= new Class({
         options:{
            elms: Class.empty,//selector CSS de los elementos del NAVEGADOR
            visor: Class.empty,//visor al que controla b
            marca: {backgroundColor:'#3FB101'}//estilo del elemento activo
         },
         initialize: function(options){
            this.setOptions(options);
            this.visor= this.options.visor;
            this.visor.nav=this;
            this.elms=[];
            this.addElms(this.options.elms);
         },
         addElms: function(selCSS){
            $$(selCSS).each(function(elm){
               this.elms.include($(elm));//añade los elms al array THIS.ELMS
               elm.setStyles({            //estilo cursor
                  cursor:'pointer'
               })
               elm.act=false;
               elm.addEvent('click',function(){//evento ONCLICK ejecuta VISOR.SHOWSLIDE()
                              this.visor.showSlide(this.elms.indexOf(elm));
                              }.bind(this));
            },this)
         },
         actuMarca: function(ind){//recorre THIS.ELMS y aplica un estilo en funcion de MARCA=TRUE/FALSE
            this.elms.each(function(elm){
									elm.marca=false
									})
            this.elms[ind].marca=true;

            this.elms.each(function(elm){
                                             if(elm.marca==true)elm.setStyles(this.options.marca);
                                             else elm.setStyles(elm.setStyles({backgroundColor:'#F7F3F2',
																			  color:'#000000'}))
                                          },this)
         }
      })
      Navegador.implement(new Options, new Events);