// Funcion para crear el carrusel de imagenes.
function carruselgaleria (move_by, frame_left, frame_no, start_middle, start_frame, time){

	$(document).ready(function(){
	
		// Inicializo las variables.
		$move_by = move_by; // Cantidad de pixeles a recorrer.
		$time = time; // Cantidad de pixeles a recorrer.		
		$frame_left = frame_left; // Cantidad actual de pixeles a recorridos.
		$frame_no = frame_no; // Frame actual.
		$start_middle = start_middle; // Si se va a mostrar en algun punto especificado.
		$start_frame = start_frame - 1; // Punto especificado.
		
		// Cantidad de imagenes de la galeria.
		$max_clicks = $(".image_container").children().size(); 	
		
		// Oculto el link de anterior.
		$(".prev").fadeOut();
		
		// Tamano de la galeria en pixeles.
		$imgCont = $move_by * $max_clicks;
		
		// Si nada mas hay una imagen, oculto los links.
		if($max_clicks == 1){
			$(".gallery a").hide();
		}	
		
		// Muesto el texto de en que imagen me encuentro.
		$("#result_pagination").html($frame_no + " of " + $max_clicks);
		
		// Asigno la cantidad de pixeles de la galeria.
		$(".image_container").css({width : $imgCont}); 
		
		// Si se inicia de una imagen en particular.
		if($start_middle == 1){
			
			// Obtengo el frame al que se quiere remitir.
			$new_frame_no = $start_frame;

			// Ajusto la posicion del frame.
			$new_left = -($new_frame_no * $move_by);						
			$new_left_attr = $new_left + "px";
			
			// Oculto la paginacion.
			$("#result_pagination, #fullscreen, #mosaic_view").fadeOut(200);			
			
			// Muevo la galeria al frame indicado.
			$("#image_container").animate({left: $new_left_attr}, $time, function() {
				
				// Una vez terminada la animacion muestro el texto de la imagen en la que me encuentro.
				$("#result_pagination").html($frame_no + " of " + $max_clicks).fadeIn(200);
				
				// Construyo los links iniciales con respecto al tamano de la imagen.				
				var tamanio_link_width = Math.round($(".image_container .img").eq($frame_no - 1).find("img").width() / 2);
				var tamanio_link_height = Math.round($(".image_container .img").eq($frame_no - 1).find("img").height());	
				
				// Establezco las posiciones de los links.				
				var offset_left = (($move_by - (tamanio_link_width * 2)) / 2) - 1;
				var offset_right = offset_left + tamanio_link_width;	
				
				// Establezco los fondos para cada link de acuerdo al tamano de este.				
				var bg_position_top_center = "" + (tamanio_link_height / 2) - 30 + "px";
				var bg_position_right_center = "" + (tamanio_link_width) - 58 + "px";
				var bg_position_left_center = "" + 10 + "px";					
				
				// Asigno estilos a los links.				
				$(".prev").css({"width": ""+ tamanio_link_width + "px", "height": ""+ tamanio_link_height + "px", marginLeft: ""+ (offset_left) + "px", "background-position": bg_position_left_center + " " + bg_position_top_center +""});
				$(".next").css({"width": ""+ tamanio_link_width + "px", "height": ""+ tamanio_link_height + "px", marginLeft: ""+ (offset_right) + "px", "background-position": bg_position_right_center + " " + bg_position_top_center +""});
				
				// Asigno eventos al link.				
				$(".gallery a.prev").hover(function(){
					$(this).css({"background":"url(img/btn/back.png) no-repeat", "background-position": bg_position_left_center + " " + bg_position_top_center +""});								  													
				}, function(){
					$(this).css({"background":"url(img/btn/fix.png) repeat"});								  													
				});
				
				// Asigno eventos al link.				
				$(".gallery a.next").hover(function(){
					$(this).css({"background":"url(img/btn/next.png) no-repeat", "background-position": bg_position_right_center + " " + bg_position_top_center +""});								  													
				}, function(){
					$(this).css({"background":"url(img/btn/fix.png) repeat"});								  													
				});				
				
				// Muestro el link anterior.
				$(".prev").show();			
				
				// Si estoy en la ultima imagen oculto el link de siguiente.
				if(($new_frame_no + 1) == $max_clicks){
					$(".next").hide();
				} else {
					$(".next").show();					
				}
				
				// Si estoy en la primera imagen oculto el link de anterior.				
				if($new_frame_no == 0){
					$(".prev").hide();
				} else {
					$(".prev").show();					
				}					
				
				// Obento la imagen actual.
			var img_actual = $(".image_container .img").eq($frame_no - 1).find("p").html();
			var id_img_actual = $(".image_container .img").eq($frame_no - 1).find("b").html();			
			$("#fullscreen").fadeIn(200);
			$("#fullscreen span").html('<p>' + img_actual + '</p><b>' + id_img_actual + '</b>');
			$("#fullscreen span").find("img").removeAttr("style");
				
				// Obtengo el ID de la imagen actual.
				$("#mosaic_view").fadeIn(200);
				$("#mosaic_view span").html($frame_no);							
				
				// Actualizo el estado para el mosaico.
				$("ul#mosaic li img").removeClass('active_mosaic');					
				$("ul#mosaic li img").eq($frame_no - 1).addClass('active_mosaic');					
				
  			});
			
			// Guardo los nuevos valores.
			$frame_left = $new_left;
			$frame_no = ($new_frame_no/1 + 1);
						
		}		
	
	});

}

$(document).ready(function(){
					   
	// Asigno evento al link de anterior.					   
	$(".prev").click(function(){
			
		// Obtengo la posicion y el nuevo numero de frame.
		$new_frame_no = (($frame_no / 1) - 1);
		$new_left = (($frame_left / 1 ) + $move_by);
		
		// Oculto los links.
		$(".gallery a").hide();
					
		// Si me muevo un frame anterior al primero, te manda al ultimo. 
		if($new_frame_no <= 0){
			
			// Muevo todas las imagenes.
			$new_left = -($move_by * $max_clicks) + $move_by;
			$new_frame_no = $max_clicks;
		}
		
		// Guardo los nuevos valores.
		$new_left_attr = $new_left+"px";
		$frame_left = $new_left;
		$frame_no = $new_frame_no;	
		
		// Oculto la paginacion.
		$("#result_pagination, #fullscreen, #mosaic_view").fadeOut(200);		
		
		// Muevo la galeria al frame indicado.			
		$(".image_container").animate({left: $new_left_attr}, 800, function() {
															
			// Una vez terminada la animacion muestro el texto de la imagen en la que me encuentro.																
			$("#result_pagination").html($frame_no + " of " + $max_clicks).fadeIn(200);
			
			// Construyo los links iniciales con respecto al tamano de la imagen.				
			var tamanio_link_width = Math.round($(".image_container .img").eq($frame_no - 1).find("img").width() / 2);
			var tamanio_link_height = Math.round($(".image_container .img").eq($frame_no - 1).find("img").height());								
			
			// Establezco las posiciones de los links.				
			var offset_left = ((move_by_pixels - (tamanio_link_width * 2)) / 2) - 1;
			var offset_right = offset_left + tamanio_link_width;	
			
			// Establezco los fondos para cada link de acuerdo al tamano de este.								
			var bg_position_top_center = "" + (tamanio_link_height / 2) - 30 + "px";
			var bg_position_right_center = "" + (tamanio_link_width) - 58 + "px";
			var bg_position_left_center = "" + 10 + "px";					
			
			// Asigno estilos a los links.								
			$(".prev").css({"width": ""+ tamanio_link_width + "px", "height": ""+ tamanio_link_height + "px", marginLeft: ""+ (offset_left) + "px", "background-position": bg_position_left_center + " " + bg_position_top_center +""});
			$(".next").css({"width": ""+ tamanio_link_width + "px", "height": ""+ tamanio_link_height + "px", marginLeft: ""+ (offset_right) + "px", "background-position": bg_position_right_center + " " + bg_position_top_center +""});	
			
			// Asigno eventos al link.								
			$(".gallery a.prev").css({"background":"url(img/btn/fix.png) repeat"});								  																					
			$(".gallery a.prev").hover(function(){
				$(this).css({"background":"url(img/btn/back.png) no-repeat", "background-position": bg_position_left_center + " " + bg_position_top_center +""});								  													
			}, function(){
				$(this).css({"background":"url(img/btn/fix.png) repeat"});								  													
			});
			
			// Asigno eventos al link.								
			$(".gallery a.next").css({"background":"url(img/btn/fix.png) repeat"});								  																	
			$(".gallery a.next").hover(function(){
				$(this).css({"background":"url(img/btn/next.png) no-repeat", "background-position": bg_position_right_center + " " + bg_position_top_center +""});								  													
			}, function(){
				$(this).css({"background":"url(img/btn/fix.png) repeat"});								  													
			});						
			
			// Muestro el link de siguiente y valido la posicion actual de la imagen para mostrar u ocultar el link anterior.								
			$(".next").show();									
			if($frame_no == 1){
				$(".prev").hide();
			} else {
				$(".prev").show();					
			}	
			
			// Obento la imagen actual
			var img_actual = $(".image_container .img").eq($frame_no - 1).find("p").html();
			var id_img_actual = $(".image_container .img").eq($frame_no - 1).find("b").html();			
			$("#fullscreen").fadeIn(200);
			$("#fullscreen span").html('<p>' + img_actual + '</p><b>' + id_img_actual + '</b>');
			$("#fullscreen span").find("img").removeAttr("style");
							  
			// Obtengo el ID de la imagen actual.
			$("#mosaic_view").fadeIn(200);			
			$("#mosaic_view span").html($frame_no);			
							  
			// Actualizo el estado para el mosaico.
			$("ul#mosaic li img").removeClass('active_mosaic');					
			$("ul#mosaic li img").eq($frame_no - 1).addClass('active_mosaic');			
			
		});
		
	});
	
	// Asigno evento al link de siguiente.					   	
	$(".next").click(function(){
							  
		// Obtengo la posicion y el nuevo numero de frame.
		$new_frame_no = (($frame_no / 1) + 1);
		$new_left = (($frame_left / 1) - $move_by);
		
		// Oculto los links.			
		$(".gallery a").hide();

		// Si me muevo un frame despues del ultimo, te manda al primero. 
		if($new_frame_no > $max_clicks){		
			
			// Muevo todas las imagenes.
			$new_left = 0;
			$new_frame_no = 1;
		
		}
		
		// Guardo los nuevos valores.		
		$new_left_attr = $new_left+"px";
		$frame_left = $new_left;
		$frame_no = $new_frame_no;	
		
		// Oculto la paginacion.
		$("#result_pagination, #fullscreen, #mosaic_view").fadeOut(200);
		
		// Muevo la galeria al frame indicado.					
		$(".image_container").animate({left: $new_left_attr}, 800, function() {
																			
			// Una vez terminada la animacion muestro el texto de la imagen en la que me encuentro.																																			
			$("#result_pagination").html($frame_no + " of " + $max_clicks).fadeIn(200);
			
			// Construyo los links iniciales con respecto al tamano de la imagen.							
			var tamanio_link_width = Math.round($(".image_container .img").eq($frame_no - 1).find("img").width() / 2);
			var tamanio_link_height = Math.round($(".image_container .img").eq($frame_no - 1).find("img").height());								
			
			// Establezco las posiciones de los links.							
			var offset_left = ((move_by_pixels - (tamanio_link_width * 2)) / 2) - 1;
			var offset_right = offset_left + tamanio_link_width;	
			
			// Establezco los fondos para cada link de acuerdo al tamano de este.								
			var bg_position_top_center = "" + (tamanio_link_height / 2) - 30 + "px";
			var bg_position_right_center = "" + (tamanio_link_width) - 58 + "px";
			var bg_position_left_center = "" + 10 + "px";
			
			// Asigno estilos a los links.								
			$(".prev").css({"width": ""+ tamanio_link_width + "px", "height": ""+ tamanio_link_height + "px", marginLeft: ""+ (offset_left) + "px", "background-position": bg_position_left_center + " " + bg_position_top_center +""});
			$(".next").css({"width": ""+ tamanio_link_width + "px", "height": ""+ tamanio_link_height + "px", marginLeft: ""+ (offset_right) + "px", "background-position": bg_position_right_center + " " + bg_position_top_center +""});
			
			// Asigno eventos al link.								
			$(".gallery a.prev").css({"background":"url(img/btn/fix.png) repeat"});								  																					
			$(".gallery a.prev").hover(function(){
				$(this).css({"background":"url(img/btn/back.png) no-repeat", "background-position": bg_position_left_center + " " + bg_position_top_center +""});								  													
			}, function(){
				$(this).css({"background":"url(img/btn/fix.png) repeat"});								  													
			});
			
			// Asigno eventos al link.								
			$(".gallery a.next").hover(function(){
				$(this).css({"background":"url(img/btn/next.png) no-repeat", "background-position": bg_position_right_center + " " + bg_position_top_center +""});								  													
			}, function(){
				$(this).css({"background":"url(img/btn/fix.png) repeat"});								  													
			});				

			// Muestro el link de anterior y valido la posicion actual de la imagen para mostrar u ocultar el link anterior.								
			$(".prev").show();									
			if($frame_no == $max_clicks){
				$(".next").hide();
			} else {
				$(".next").show();					
			}
			
			// Obento la imagen actual
			var img_actual = $(".image_container .img").eq($frame_no - 1).find("p").html();
			var id_img_actual = $(".image_container .img").eq($frame_no - 1).find("b").html();			
			$("#fullscreen").fadeIn(200);
			$("#fullscreen span").html('<p>' + img_actual + '</p><b>' + id_img_actual + '</b>');
			$("#fullscreen span").find("img").removeAttr("style");
			
			// Obtengo el ID de la imagen actual.
			$("#mosaic_view").fadeIn(200);			
			$("#mosaic_view span").html($frame_no);					
			
			// Actualizo el estado para el mosaico.
			$("ul#mosaic li img").removeClass('active_mosaic');					
			$("ul#mosaic li img").eq($frame_no - 1).addClass('active_mosaic');			
			
		});
		
	});							   

});