//visor de imagenes
var imagenes= new Class({
	imagen_activa:0,
	imagenes_totales:0,	
	imagenes:new Array(),
	textos:new Array(),
	array_img:new Array(),
	config:{
		duracion:'normal',
		transicion:'sine:out',
		fijo:true,
		alfa:0.3
	},

	initialize: function(objeto,contenedor,opciones){
	  var padre=this;
	
	  padre.config=$merge(padre.config,opciones);
	
		
		//marco=this.marco;
		objeto.each(function(dato,indice){
			padre.imagenes[indice]=dato.imagen;
			padre.textos[indice]=dato.texto;
			padre.imagenes_totales++;			
		});
		
		var dimensiones_marco=$(contenedor).getCoordinates();
		this.ancho=dimensiones_marco.width;
		this.alto=dimensiones_marco.height;
		this.contenedor=contenedor;

 		//creamos el marco
       	var marco = new Element('div', {		
       		'styles':{
       			'position':'relative',
       			'top':0,
       			'right':0,
       			'height':padre.alto,
       			'width':padre.ancho,
       			'overflow':'hidden'
       		},
			id:'marco'
		});

		marco.inject($(contenedor));

 		//creamos el contador
       	var contador = new Element('div', {		
       		'styles':{
       			'position':'relative',
       			'top':'50%',
       			'text-align':'center',
				'margin-top':'-0.5em',
       			'overflow':'hidden',
				'background-color':'transparent',
       			'height':'1em'
       		},
			id:'contador'
		});		

		contador.inject($('marco'));
				
		this.array_img = new Asset.images(this.imagenes, {
   		 	onComplete: function(){
   		 		
   		 		//creamos el boton derecho
	        	var derecha = new Element('div', {		
	        		'styles':{
	        			'position':'absolute',
	        			'top':0,
	        			'right':0,
	        			'height':'100%',
	        			'width':(padre.ancho/4).round()
	        		},	
 					'events': {
        					'click': function(){
        						if(padre.imagen_activa < (padre.imagenes.length))
        						{
        							$('derecha').setStyle('width',0);
        							$('izquierda').setStyle('width',0);
        							
        							padre.imagen_activa++;
        							if(padre.config.fijo)
        							{
	            						var dim=$('tira').getCoordinates($('marco'));
	            						var desplaza=dim.left-padre.ancho;
	            						
										padre.efecto_tira.start({
											'left':desplaza
										}).chain(
											function(){
												$('derecha').setStyle('width',(padre.ancho/4).round());
        										$('izquierda').setStyle('width',(padre.ancho/4).round());
											}
										);
	            						
        							}
        							else
        							{
        								var myEffect = new Fx.Morph(padre.array_img[padre.imagen_activa-1],{duration:'long'});
										myEffect.start({
											'opacity':0
										}).chain(
											function(){
												padre.array_img[padre.imagen_activa-1].destroy();
												padre.aparece(padre.imagen_activa);	
											})
        								
        								
        							}
            						//si es el ultimo oscurecemos el panel
            						if(padre.imagen_activa==padre.imagenes.length)
            						{
            							$('derecha').morph({ 'opacity': 0.01});
            						}
            						            			
        						}
        					},
        					'mouseenter': function(element){
        						if(padre.imagen_activa < (padre.imagenes.length))
        						{
            						$('derecha').morph({ 'opacity': padre.config.alfa});
        						}
        					},
        					'mouseleave': function(element){
            						$('derecha').morph({ 'opacity': 0.01});
        					}
    					},
					id:'derecha'
				});

   		 		//creamos el boton izquierdo
	        	var izquierda = new Element('div', {		
	        		'styles':{
	        			'position':'absolute',
	        			'top':0,
	        			'left':0,
	        			'height':'100%',
	        			'width':(padre.ancho/4).round()
	        		},	
 					'events': {
        					'click': function(){
        						if(padre.imagen_activa>=0)
        						{
        							padre.imagen_activa--;
        							
        							$('derecha').setStyle('width',0);
        							$('izquierda').setStyle('width',0);
        							
        							if(padre.config.fijo)
        							{        							
	            						var dim=$('tira').getCoordinates($('marco'));
	            						var desplaza=dim.left+padre.ancho;
	            						
										padre.efecto_tira.start({
											'left':desplaza
										}).chain(
											function(){
												$('derecha').setStyle('width',(padre.ancho/4).round());
        										$('izquierda').setStyle('width',(padre.ancho/4).round());
											}
										);
        							}
        							else
        							{
        								var myEffect = new Fx.Morph(padre.array_img[padre.imagen_activa+1],{duration:'long'});
										myEffect.start({
											'opacity':0
										}).chain(
											function(){
												padre.array_img[padre.imagen_activa+1].destroy();
												padre.aparece(padre.imagen_activa);	
											})        								
        							}
            						//si es el ultimo oscurecemos el panel
            						if(padre.imagen_activa<0)
            						{
            							$('izquierda').morph({ 'opacity': 0.01});
            						}
        						}
        					},
        					'mouseenter': function(element){
        						if(padre.imagen_activa>=0)
        						{
            						$('izquierda').morph({ 'opacity': padre.config.alfa});
        						}
        					},
        					'mouseleave': function(element){
            						$('izquierda').morph({ 'opacity': 0.01});
        					}
    					},
					id:'izquierda'
				});

   		 		//creamos el boton centro
	        	var centro = new Element('div', {		
	        		'styles':{
	        			'position':'absolute',
	        			'top':0,
	        			'left':(padre.ancho/4).round(),
	        			'height':'100%',
	        			'width':(padre.ancho/2).round()
	        		},	
 					'events': {
        					'click': function(){
        						if(padre.textos[padre.imagen_activa]!="")
        						{
        							
	            			    	$('textos').set('html',padre.textos[padre.imagen_activa]);
       								$('textos').morph({
       									'height':padre.alto
       								});        							
        						}
        					},
        					'mouseenter': function(element){
        						if(padre.textos[padre.imagen_activa]!="" )
        						{
            						$('centro').morph({ 'opacity': padre.config.alfa});
        						}
        					},
        					'mouseleave': function(element){
        						if($('centro').getStyle('left')!='0px')
        						{
            						$('centro').morph({ 'opacity': 0.01});
        						}
        					}
    					},
					id:'centro'
				});

   		 		//creamos el panel textos
	        	var textos = new Element('div', {		
	        		'styles':{
	        			'position':'absolute',
	        			'bottom':0,
	        			'left':0,
	        			'height':0,
	        			'width':'100%',
	        			'overflow':'hidden'
	        		},	
 					'events': {
        					'click': function(){
        						if(padre.textos[padre.imagen_activa]!="")
        						{
        								//$('textos').set('text','');
        								$('textos').morph({
        									'height':0
        									});       								
        						}
        					}
    					},
					id:'textos'
				});

				$(marco).set('text','');
				
				//si es un visor con dimensiones fijas
				if(padre.config.fijo)
				{
					//creamos la tira de imagenes
			       	var tira = new Element('div', {		
			       		'styles':{
			       			'position':'relative',
			       			'left':0,
			       			'width':padre.ancho*padre.imagenes.length,
			       			'opacity':0
			       		},
						id:'tira'
					});
				
					tira.inject($(marco));
				
					padre.efecto_tira=new Fx.Morph('tira',{
					  duration: padre.config.duracion,
					  transition: padre.config.transicion,
					  'link':'chain'
					 });
				 
					padre.array_img.each(function(dato,indice){
				       	var elemento = new Element('div', {		
				       		'styles':{
				       			'position':'relative',
				       			'float':'left',
				       			'width':padre.ancho,
				       			'height':padre.alto,
				       			'background':'url('+dato.src+') no-repeat center center',
				       			'overflow':'hidden'
				       		},
							id:'imagen'+indice
						});					
						elemento.inject($(tira));
					});
					
					padre.efecto_tira.start({'opacity':1});
				}
				else
				{
					padre.efecto_marco=new Fx.Morph('marco',{
					  duration: padre.config.duracion,
					  transition: padre.config.transicion,
					  'link':'chain'
					 });
					padre.aparece(0);					
				}
				
				izquierda.setStyle('opacity',0.01);
				izquierda.inject($(marco));
											
				derecha.setStyle('opacity',0.01);
				derecha.inject($(marco));

				centro.setStyle('opacity',0.01);
				centro.inject($(marco));	
			
				
				textos.inject($(marco));	
				textos.setStyle('opacity',0.8);
				
				//reversa
				if(padre.config.inverso)
					padre.final();

			},
			onProgress:function(contador,index){
				$('contador').set('text',(contador+1)+'/'+padre.imagenes.length);
			}
		});

	},
	final:function(){
		//var dim=$('tira').getCoordinates($('marco'));
	    var desplaza=-this.ancho*(this.imagenes_totales-1);
		$('tira').setStyles({'left':desplaza});
		this.imagen_activa=this.imagenes_totales-1;
	},
	aparece:function(foto){
		var padre=this;
		
		padre.array_img[foto].inject($('marco'));
		
		padre.array_img[foto].setStyle('opacity',0);
		
		var ancho_marco=$('marco').getStyle('border-left-width').toInt();
		
		//creamos la caja que contendrá la primera imagen
		var dim=padre.array_img[foto].getCoordinates();
		var dim2=$('marco').getCoordinates(padre.contenedor);
		var ancho=dim.width
		var alto=dim.height;

		padre.efecto_marco.start({
			'width':ancho,
			'left':(dim2.left-((ancho-dim2.width+(ancho_marco*2))/2)).round()
		}).chain(
			function(){
				padre.efecto_marco.start({
					'height':alto
				});
			},
			function(){
				$('derecha').setStyle('width',(ancho/4).round());	
				$('izquierda').setStyle('width',(ancho/4).round());
				$('centro').setStyle('width',(ancho/2).round());
				$('centro').setStyle('left',(ancho/4).round());	
				padre.array_img[foto].morph({'opacity':1});
			}
		);
	}	
});