var pos 
var offset 											 // HOW MUCH TO SLIDE WITH EACH CLICK
var currentslide									// CURRENT SLIDE IS THE FIRST SLIDE
var inspector 					   // WHERE THE LARGE IMAGES WILL BE PLACE	
var fx 
var fx2 
var activo 
var imgscrol
var auto 
var delay = 3000
window.addEvent('domready', function() {
		
				
		pos = 0;
		offset = 588;												 // HOW MUCH TO SLIDE WITH EACH CLICK
		currentslide = 1;											// CURRENT SLIDE IS THE FIRST SLIDE
		$('moveleft').set('opacity' , 0) 
		inspector = $('fullimg');								   // WHERE THE LARGE IMAGES WILL BE PLACE	
		auto = true 
		fx = new Fx.Morph(inspector, {duration: 300, transition: Fx.Transitions.Sine.easeOut});
 		fx2 = new Fx.Morph(inspector, {duration: 200, transition: Fx.Transitions.Sine.easeOut});
		activo = $('imagen_activa') 
		$('imagen_' + imagen_actual ).set('opacity' , 1) 
		/* THUMBNAIL IMAGE SCROLL */
		imgscroll = new Fx.Scroll('wrapper', {
   			offset: {'x': 0, 'y': 0},
   			transition: Fx.Transitions.Cubic.easeOut  				// HOW THE SCROLLER SCROLLS
		}).toLeft();

	
		/* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */
		$('moveleft').addEvent('click', function(event) { event = new Event(event).stop();
			
			if(currentslide == 1) { 	
				return;
			}
			currentslide--;																	// CURRENT SLIDE IS ONE LESS
			pos += -(offset);															   // CHANGE SCROLL POSITION
			imgscroll.start(pos);
			if(currentslide == 1) { 
				$('moveleft').set('opacity' , 0) 	
			}
			if(currentslide < slides)
				$('moveright').set('opacity' , 1)
			
		});

		$('moveright').addEvent('click', function(event) { event = new Event(event).stop();
			if(currentslide >= slides) return;
			currentslide++;
			pos += offset;
			imgscroll.start(pos);
			if(currentslide > 1) { 
				$('moveleft').set('opacity' , 1) 	
			}
			if(currentslide >= slides)
				$('moveright').set('opacity' , 0) 
		});

		$('moveleft_2').addEvent('click', function(event) { event = new Event(event).stop();
			
			para() ; 
			if( imagen_actual > 0  ) { 
				$('imagen_' + imagen_actual ).set('opacity' , 0.5)  
				carga_imagen( imagenes[--imagen_actual] )	
				$('imagen_' + imagen_actual ).set('opacity' , 1) 
				}
			mueveSlide()
		});

		$('moveright_2').addEvent('click', function(event) { event = new Event(event).stop();
			para() ; 
			if( imagen_actual + 1 < imagenes.length ) { 
				
				$('imagen_' + imagen_actual ).set('opacity' , 0.5)  
				carga_imagen( imagenes[++imagen_actual] )	
				$('imagen_' + imagen_actual ).set('opacity' , 1) 

			}
			mueveSlide()
		});

		$('play').addEvent('click', function(event) { event = new Event(event).stop();
			continua() ; 
		});

		$('stop').addEvent('click', function(event) { event = new Event(event).stop();
			para() ; 
		});

		/* WHEN AN ITEM IS CLICKED, IT INSERTS THE IMAGE INTO THE FULL VIEW DIV */
		$$('.item').each(function(item){ 
			item.cargado = false  ;
			item.addEvent('click', function(e) { 
				e = new Event(e).stop();
				/// para slideshow si esta en marcha y marca la imagen actual 
				para() 
				$('imagen_' + imagen_actual ).set('opacity' , 0.5)  
				imagen_actual = item.rel
				$('imagen_' + imagen_actual ).set('opacity' , 1) 
				if( activo == item )
					return 
				activo = item ;
				carga_imagen( imagenes[imagen_actual] )
				return ; 
				
			});
		});
})

function carga_imagen( item ){
				thumb_actual = $('imagen_' + imagen_actual ) ; 
				item.cargado = true 
					fx2.start({ 
					'opacity' : 0													
				}).chain(function(){
				
					inspector.empty();						// Empty Stage
					var loadimg = 'images/ajax-loader.gif';	   // Reference to load gif
					var load = new Element('img', { 'src': loadimg, 'class': 'loading' }).inject(inspector); 
					fx2.start({ 'opacity' : 1 });
					//var largeImage = new Element('img', { 'src': item.href }); // create large image
					
					
					var largeImage = new Asset.image("upload/imagenes/"  + item.imagen  );
					largeImage.carga  = function(){ 
						
						fx.start({ 
							'opacity' : 0													
						}).chain(function(){
							inspector.empty();	           							// empty stage
							/*var description = item.getElement('span'); 			   // see if there is a description
							
							if(description)					   
								var des = new Element('p').set('text', description.get('text')).inject(inspector);*/
									
							largeImage.inject(inspector); // insert new image
							fx.start({'opacity': 1});	 // then bring opacity of elements back to visible	
							if( auto )
								timeoutID = slide_show.delay( delay );
						});
					};
					/* When the large image is loaded, fade out, fade in with new image */
					if( item.cargado )
						largeImage.carga() ;
					else 
						largeImage.onload = largeImage.carga ;
					

					
					
				});
					
					
}
window.addEvent('domready', function() {

		timeoutID = slide_show.delay( delay );
} ) 
function slide_show() { 
	///alert(imagenes[imagen_actual])
	
	$('imagen_' + imagen_actual ).set('opacity' , 0.5)  
	imagen_actual++ 
	if( imagen_actual == imagenes.length )
		imagen_actual = 0 
	$('imagen_' + imagen_actual ).set('opacity' , 1) 
	carga_imagen( imagenes[imagen_actual] )
	

		mueveSlide()
	
	

		
}

function para() { 
	$clear( timeoutID )
	auto = false ; 
}

function continua() { 
	$clear( timeoutID )
	auto = true  ;
	slide_show()
}

function mueveSlide() { 
	//alert( imagen_actual + " "  )
	//alert( ( parseInt(imagen_actual) + 1 ) / 7  )
	
	num_slide_imagenes = Math.ceil( ( parseInt(imagen_actual) + 1 ) / 7 ) 
	//alert( imagen_actual + " " + num_slide_imagenes )
	if(  num_slide_imagenes != currentslide  ) {
			//alert( slide_imagenes + " " + currentslide )
			pos += offset*( num_slide_imagenes  - currentslide );
			currentslide = num_slide_imagenes ;
			imgscroll.start(pos);
			if(currentslide > 1) { 
				$('moveleft').set('opacity' , 1) 	
			}
			if(currentslide >= slides)
						$('moveright').set('opacity' , 0) 
			if(currentslide == 1) { 
						$('moveleft').set('opacity' , 0) 	
					}
			if(currentslide < slides)
						$('moveright').set('opacity' , 1)

	}
	
}