var timer;
  	function pasar(){
					
					//si el que está marcado es el último
					if($('#lista_menu_puntos li:last').hasClass("marcado")){
						//nos vamos al inicio del todo 
							$(".marcado").removeClass("marcado");
							$('#lista_menu_puntos li:first').addClass("marcado");
							//Hacemos el slide al principio del todo
							$(".AllTabs").animate({
								left: + 0 + "px"
							},1000);
					}else{//si no lo es pasamos al siquiente
					
						var actual=$('#lista_menu_puntos li.marcado');
						$('#lista_menu_puntos li.marcado').removeClass("marcado");
						
						actual.next('li').addClass("marcado");
						
							//Busco el ancho de las miniaturas de proyectos
						var TabWidth = $(".TabContent:first").width();
					
						//le sumamos el margen izquierdo al ancho del pimer TabContent 
						if(parseInt($(".TabContent:first").css("margin-left")) > 0)
							TabWidth += parseInt($(".TabContent:first").css("margin-left"));
						
						//le sumamos el margen derecho al ancho del pimer TabContent 
						if(parseInt($(".TabContent:first").css("margin-right")) >0)
							TabWidth += parseInt($(".TabContent:first").css("margin-right"));
							
						//Calculamos la nueva posicion
						var newLeft =  -1*($("#lista_menu_puntos li").index(actual)+1) * TabWidth;
						
						
					
						//Hacemos el slide hasta la posición a la que queremos ir
						$(".AllTabs").animate({
							left: + newLeft + "px"
						},1000);
				
					}
					
				}
 
//FUNCIÓN MENU GENERAL
//gestiona el menu general de la web (opciones de navegacion principal)
function efectos_menu(navigation_id, pad_out, pad_in, time, multiplier)
{
	// creamos el "path" de los elementosz que buscamos (los li)
	var list_elements = navigation_id + " li";
	// Inicializamos una variable para el control del tiempo "timer"
	var timer = 0;
	// creamos el efecto para todos los elementos del "path" que habíamos especificado antes		
	$(list_elements).each(function(i){
		//recogemos el evento desde el el elemento "li" y sacamos el enlace del vinculo
		//cogemos el valor del vínculo del enlace que hay dentro del "Li", y abrimos el enlace en la misma ventana (atributo "_self")
		$(this).fadeTo('slow', 0.4);
		
		$(this).click(function(){
			var launch=$('a', this);	
			 if (launch.size() > 0)  
        		{  
         			 //abrimos el enlace usando el código del li
					 window.open( launch[0] , '_self');
        		} 
		});
	
		//HOVER
		//función de hover (función al pasar por encima del botón)	
		$(this).hover( function(){
			//cambiamos la clase del objeto para que se marque	
			$(this).addClass("hovering");
			//aplicamos el efecto de fade al texto inferior del botón (al span)
			$('.hovering').fadeTo(200, 1); 
		//lo animamos bajando un poco el botón
	  	//$('.hovering a').animate({ marginLeft: '0px' }, 20);
		$('.hovering span').animate({
    		left: '+=5'	
  			}, 350, function() {
    // Animation complete.
  			});
		},	
		
		//HOVER
		//función al salir del hover 	
		function(){	
			$('.hovering ').fadeTo('slow', 0.4);
			//animamos el objeto moviendo el "paddingTop"
				$('.hovering span').animate({
    		left: '-=5'
  			}, 170, function() {
    // Animation complete.
  			});
			$(this).removeClass("hovering");
		});
		
	});
}



function animar_titulos()
{
	// creamos el "path" de los elementosz que buscamos (los li)
	var list_elements = ".TabContent";
	// creamos el efecto para todos los elementos del "path" que habíamos especificado antes		
	$(list_elements).each(function(i){
					
			$(this).children( ".titulo").animate({
   				top: '300'						
			})			   
	
								   
	//HOVER
	//función de hover (función al pasar por encima del botón)	
		$(this).hover( function(){
			
			//sacamos el título
			$(this).children( ".titulo").animate({
   				top: '140'						
			})
			
			//interrumpimos el ciclo de transiciones de imagen
			clearInterval(timer);
		
			
		}, function(){
			
			//ocultamos el título
			$(this).children( ".titulo").animate({
   				top: '300'						
			})
			//reiniciamos el ciclo de transiciones de imagen
			timer = setInterval("pasar()", 5000);
		}
		
		);
	
	}); // cierra el each(function(i)
		

} //cierra el animar_titulos



			
$(document).ready(function(){
				//Initialize
				
				efectos_menu("#menu_principal",7, 3, 150, .8);
				
				//establecemos una función para que pasen automáticamente las fotos
				timer = setInterval("pasar()", 5000);
				
				
				
				
				animar_titulos();
				
				
				//aL inicializar. A la primera de las tabs le ponemos una clase que llamamos "marcado"
				$('#lista_menu_puntos li:first').addClass("marcado");

				$('#flecha_izquierda').click(function(){
				
					$(".marcado").removeClass("marcado");
					$('#lista_menu_puntos li:first').addClass("marcado");
					//Hacemos el slide al principio del todo
					$(".AllTabs").animate({
						left: + 0 + "px"
					},1000);
					
				});
				
				$('#flecha_derecha').click(function(){
				
					$(".marcado").removeClass("marcado");
					$('#lista_menu_puntos li:last').addClass("marcado");
					//Busco el ancho de las miniaturas de proyectos
					var TabWidth = $(".TabContent:first").width();
				
					//le sumamos el margen izquierdo al ancho del pimer TabContent 
					if(parseInt($(".TabContent:first").css("margin-left")) > 0)
						TabWidth += parseInt($(".TabContent:first").css("margin-left"));
					
					//le sumamos el margen derecho al ancho del pimer TabContent 
					if(parseInt($(".TabContent:first").css("margin-right")) >0)
						TabWidth += parseInt($(".TabContent:first").css("margin-right"));
						
					//Calculamos la nueva posicion
					var newLeft =  -1*($("#lista_menu_puntos li").last().index()) * TabWidth;
					
					
				
					//Hacemos el slide hasta la posición a la que queremos ir
					$(".AllTabs").animate({
						left: + newLeft + "px"
					},1000);
					
				});
				
			
				//Ahora le damos acción al menú. Para ello necesitamos que al hacer click pase lo siguiente
				$('#lista_menu_puntos li').click(function(){
			
					
					//Primero elimino el selector de clase que identifica el proyecto actual
					$(".marcado").removeClass("marcado");
					//Añado el selector al botón recién pulsado
					$(this).addClass("marcado");
					
					//Busco el ancho de las miniaturas de proyectos
					var TabWidth = $(".TabContent:first").width();
				
					//le sumamos el margen izquierdo al ancho del pimer TabContent 
					if(parseInt($(".TabContent:first").css("margin-left")) > 0)
						TabWidth += parseInt($(".TabContent:first").css("margin-left"));
					
					//le sumamos el margen derecho al ancho del pimer TabContent 
					if(parseInt($(".TabContent:first").css("margin-right")) >0)
						TabWidth += parseInt($(".TabContent:first").css("margin-right"));
						
					//Calculamos la nueva posicion
					var newLeft =  -1*$("#lista_menu_puntos li").index(this) * TabWidth;
					
					
				
					//Hacemos el slide hasta la posición a la que queremos ir
					$(".AllTabs").animate({
						left: + newLeft + "px"
					},1000);
				});
				
			
				
				
				
				
				
			
	  $(".fadefoto").fadeTo(1, 0.3);
  $(".fadefoto").hover(
    function () {
      $(this).fadeTo("fast", 1);
    },
    function () {
      $(this).fadeTo("normal", 0.3);
    }
  );
  

				

				
				
				
				
});