$(document).ready(function(){
	
	$("#proyectos").draggable();
	
	/*
	 * Titles de iconos principales
	 */
	$('#carpeta_on').hover(function(event){
		event.preventDefault();
		$('#carpeta_on a').removeAttr("title");
		$('#title_proyectos').css({display: 'inline', top: event.pageX, left: event.pageY - 200});
	},
	function(){
		$('#title_proyectos').css({display: 'none'});
	});
	
	$('#josico_on').hover(function(event){
		event.preventDefault();
		$('#josico_on a').removeAttr("title");
		$('#title_info').css({display: 'inline', top: event.pageX + 150, left: event.pageY - 275});
	},
	function(){
		$('#title_info').css({display: 'none'});
	});
	
	
	/*
	 * Animación de las flechas
	 */
	$("#arrow_right").hover(
	function() {
		$(this).animate({paddingLeft: '+=10px'}, 200);
	}, 
	function(){
		$(this).animate({paddingLeft: '-=10px'}, 200);
	})
	
	$("#arrow_left").hover(
	function() {
		$(this).animate({backgroundPosition: '-=10px'}, 200);
	}, 
	function(){
		$(this).animate({backgroundPosition: '+=10px'}, 200);
	});
	/*
	 * Fin animación de las flechas
	 */
	
	/*
	 * Animación tira logos y ajax con prevencion de varios clicks
	 */
	var clicks=0;
	
	function animate_tira_logos(direc, pas){
		var count=pas;
		var duration=1500;
		
		if(count==0){return false;}
		
		if(direc == 'derecha'){
			var interval = setInterval(
				function(){
							
					var posicion = $("#logos li:last").attr('id').split("-")[1];
			
					var src_ulti = $("#logos li:last a img").attr('src').split("-")[0];
					var src_prime = $("#logos li:first a img").attr('src').split("-")[0];
			
					$("#tira_logos").animate({left: '+=100px'}, { duration: 1000/pas, complete: 
						function(){
							$('#logos li:last').animate({opacity: 0}, {duration:500/pas, complete: 
								function(){
									$('#logos li:first').before('<li id="logo-' + posicion + '"><a href="proyectos.php?posicion=' + posicion + '"><img border=0 src="' + src_ulti + '-on.png">' + '</a></li>');
									$('#logos li:last').remove();
									$("#tira_logos").animate({left: '-=100px'}, 1); //feo, revisar
									$("#logos li:nth-child(2) a img").attr('src', src_prime + '-off.png');
								}});
						}});
					count--;
					if(!count){clearTimeout(interval)}
				}, duration);
						
		} else { //direccion izquierda
			var interval = setInterval(
				function(){
					var posicion1 = $("#logos li:first").attr('id').split("-")[1];
					var posicion = $("#logos li:nth-child(2)").attr('id').split("-")[1];
						
					var src_prime = $("#logos li:first a img").attr('src').split("-")[0];
					var src_segun = $("#logos li:nth-child(2) a img").attr('src').split("-")[0];
						
					$("#tira_logos").animate({left: '-=100px'}, 1000/pas, 
						function(){
							$('#logos li:first').animate({opacity: 0}, 500/pas, 
								function(){
									$('#logos li:last').after('<li id="logo-' + posicion1 + '"><a href="proyectos.php?posicion=' + posicion1 + '">' + '<img border=0 src="' + src_prime + '-off.png">' + '</a></li>');
									$('#logos li:first').remove();
									$("#tira_logos").animate({left: '+=100px'}, 1); //feo, revisar
									$('#logos li:first img').attr('src', src_segun + '-on.png');
								});
						});
					count--;
					if(!count){clearTimeout(interval)}
				}, duration);
		} //fin if
	}// Fin de funcion
	
	function animated_ajax(posicion){
		
		var productX 		= $("#ficha_proyecto").offset().left;
		var productY 		= $("#ficha_proyecto").offset().top;
		
		var folderX 		= $("#carpeta_on").offset().left;
		var folderY 		= $("#carpeta_on").offset().top;
						
		var gotoX 			= folderX - productX;
		var gotoY 			= folderY - productY;
		
		var backtoX			= productX - folderX;
		var backtoY			= productY - folderY;
		
		var proyectoWidth 	= $("#ficha_proyecto").width();
		var proyectoHeight	= $("#ficha_proyecto").height();
		
		var finalWidth = 10;
		var finalHeight = 10;
		
		var clon = $("#ficha_proyecto").clone().attr('id', '#ficha_proyecto_clon');
		$("#ficha_proyecto").html('');
		$(clon).prependTo("#proyectos");
		$(clon).css({'z-index': '10'});
		$(clon).animate({opacity: 0, marginLeft: gotoX, marginTop: gotoY, width: finalWidth, height: finalHeight}, 1400,
				function(){
					$(clon).load("ajax/ajax_proyectos.php", {'posicion': posicion}, 
					function(){
						$(clon).animate({opacity: 1, left: backtoX, top: backtoY, width: proyectoWidth, height: proyectoHeight}, 1400,
						function(){
							$("#ficha_proyecto").html($(clon).html());
							$(clon).remove();
							clicks=0;
						});
					});
				});
	}
	
	$("#arrow_right").click(function(){
		
		clicks++;
		if(clicks>1){return false;}
		else{
			
			animate_tira_logos('izquierda', 1);
			
			//AJAX
			var posicion = $("#logos li:nth-child(2)").attr('id').split("-")[1];
			animated_ajax(posicion);
			//AJAX
		}
	});
	
	$("#arrow_left").click(function(){
		
		clicks++;
		if(clicks>1){return false;}
		else{
			
			animate_tira_logos('derecha', 1);
			
			//AJAX
			var posicion = $("#logos li:last").attr('id').split("-")[1];
			animated_ajax(posicion);
			//AJAX
		}
	});
	
	$('#logos li a').live('click', function(event){
		
		event.preventDefault();
		
		clicks++;
		if(clicks>1){return false;}
		else{
			
			var posicion = $(this).attr('href').split('=')[1];
			
			//total elementos vector ul: logos
			var total_v = $('#logos li').length;
			
			//Encontrar la posicion_v en el vector ul: logos
			var posicion_v;
			$('#logos li').each(function(index){
				if($(this).attr('id') == 'logo-' + posicion){
					posicion_v = index;
					return false;
				}
			});
			
			//primer elemento de vector ul a off si se ha pulsado otro
			if(posicion_v !=0){
				var src_prime = $('#logos li:first a img').attr('src').split('-')[0];
				$('#logos li:first a img').attr('src', src_prime + '-off.png');
			}
			
			//Elegir direccion de la animacion: posicion_v <= tira_logos.length/2, izquierda, else, derecha
			var direccion;
			(posicion_v) <= (total_v/2) ? direccion = 'izquierda' : direccion= 'derecha';
			
			//pasos en esa direccion
			var pasos;
			direccion == 'derecha' ? pasos = (total_v - posicion_v) : pasos = posicion_v;
			
			//animacion
			animate_tira_logos(direccion, pasos);
			
			if(posicion_v != 0){
				//AJAX
				animated_ajax(posicion);																																																																							  			
				//AJAX
			} else {
				clicks = 0;
			}
		}
	});
	/*
	 * Fin animación tira logos
	 */
	
	/*
	 * Animación luz
	 */
	/*
	$(document).mousemove(function(mouse){
		
		//posicion del raton en tiempo real
		mouseX = mouse.pageX;
		mouseY = mouse.pageY;
		
		//medidas de la pantalla practicable
		screenX = $(window).width();
		screenY = $(window).height();
		
		
		//indice de transformación de las sombras
		//sombraX = (100 * mouseX)/screenX;
		//sombraY = (100 * mouseY)/screenY;
		
		
		//razón de movimiento (pixeles recorridos sombra / pixeles recorridos por el ratón) = distancia del foco(?)
		var ramo = 1/10;
		
		
		var logox = $("#logo_sombra").offset().left;
		var logoy = $("#logo_sombra").offset().top;
		
		var carpetax = $("#carpeta_sombra").offset().left;
		var carpetay = $("#carpeta_sombra").offset().top;
		
		var josicox = $("#josico_sombra").offset().left;
		var josicoy = $("#josico_sombra").offset().top;
		
		//Caso especial: sombra de proyectos
		var proyectoW = $('#sombra_proyecto img').width();
		var proyectoH = $('#sombra_proyecto img').height();
		
		var proyecto2W = $('#sombra_proyecto2 img').width();
		var proyecto2H = $('#sombra_proyecto2 img').height();
		
		if(mouseX > (screenX / 2)){
			$('#logo_sombra').animate({left: ((logox - (mouseX-(screenX/2))) * ramo)}, 1);
			
			$('#carpeta_sombra').animate({left: ((carpetax - (mouseX-(screenX/2))) * ramo)}, 1);
			
			$('#josico_sombra').animate({left: ((josicox - (mouseX-(screenX/2))) * ramo)}, 1);
			
			$('#sombra_proyecto').hide();
			$('#sombra_proyecto2').show();
			$('#sombra_proyecto2 img').animate({width: ((proyecto2W + (mouseX-(screenX/2))) * ramo * 2.18)}, 1, function(){
			$('#sombra_proyecto2').animate({top: (550 - proyecto2H - 215)}, 1);
			$('#sombra_proyecto2').animate({left: (((1*screenX)/100)-proyecto2W)}, 1);
			});
			$('#sombra_proyecto2 img').animate({height: ((mouseY * ramo * 3))}, 1);
		} else {
			$('#logo_sombra').animate({left: ((logox + ((screenX/2)-mouseX)) * ramo)}, 1);
			
			$('#carpeta_sombra').animate({left: ((logox + ((screenX/2)-mouseX)) * ramo)}, 1);
			
			$('#josico_sombra').animate({left: ((josicox + ((screenX/2)-mouseX)) * ramo)}, 1);
			
			$('#sombra_proyecto2').hide();
			$('#sombra_proyecto').show();
			$('#sombra_proyecto img').animate({width: ((proyectoW + ((screenX/2)-mouseX)) * ramo * 2.18)}, 1, function(){
			$('#sombra_proyecto').animate({top: (550 - proyectoH - 218)}, 1);
			});
			$('#sombra_proyecto img').animate({height: ((mouseY * ramo * 3))}, 1);
		}
		
		if(mouseY > (screenY / 2)){
			$('#logo_sombra').animate({top: ((logoy - (mouseY-(screenY/2))) * ramo)}, 1);
			$('#carpeta_sombra').animate({top: ((carpetay - (mouseY-(screenY/2))) * ramo)}, 1);
			$('#josico_sombra').animate({top: (((josicoy - (mouseY-(screenY/2))) * ramo)+130)}, 1);
		} else {
			$('#logo_sombra').animate({top: ((logoy + ((screenY/2)-mouseY)) * ramo)}, 1);
			$('#carpeta_sombra').animate({top: ((carpetay + ((screenY/2)-mouseY)) * ramo)}, 1);
			$('#josico_sombra').animate({top: (((josicoy + ((screenY/2)-mouseY)) * ramo)+130)}, 1);
		}
		
		
		
		
	});
	*/
	/*
	 * Fin animacion luz
	 */
	
	//Cerrar proyecto
	$('#cerrar_proyecto a').live('click', function(event){
		
		event.preventDefault();
		
		var productX 		= $("#proyectos").offset().left;
		var productY 		= $("#proyectos").offset().top;
		
		var folderX 		= $("#carpeta_on").offset().left;
		var folderY 		= $("#carpeta_on").offset().top;
						
		var gotoX 			= folderX - productX;
		var gotoY 			= folderY - productY;
		
		var backtoX 		= productX - folderX;
		var backtoY 		= productY - folderY;
		
		var productoW		= $("#proyectos").width();
		var productoH		= $("#proyectos").height();
		
		var finalWidth 		= 10;
		var finalHeight 	= 10;
		
		$('#proyectos').animate({opacity: 0, marginLeft: gotoX, marginTop: gotoY, width: finalWidth, height: finalHeight}, 1400,
			function(){
				$(this).css('display', 'none');
				$(this).css({'marginLeft': backtoX + 'px', 'marginTop': backtoY + 'px', 'width': productoW + 'px', 'height': productoH + 'px', 'opacity': '0'});
			});
	});
	
	
	//Abrir proyecto
	$('#carpeta_on a').live('click', function(event){
			
		event.preventDefault();
		
		if($('#info_contacto').css('display') == 'block'){
			$('#info_contacto').css({'display': 'none'});
		}
		
		if($('#proyectos').css('display') == 'none'){
				
			var productX 		= $("#proyectos").offset().left +75;
			var productY 		= $("#proyectos").offset().top +210;
			
			var folderX 		= $("#carpeta_on").offset().left;
			var folderY 		= $("#carpeta_on").offset().top;
							
			var gotoX 			= folderX - productX;
			var gotoY 			= folderY - productY;
			
			//var backtoX 		= productX - folderX;
			//var backtoY 		= productY - folderY;
			var backtoX 		= 0;
			var backtoY 		= 10;
			
			var productoW		= $("#proyectos").width();
			var productoH		= $("#proyectos").height();
			
			var finalWidth 		= 10;
			var finalHeight 	= 10;
			
			$('#proyectos').css({'display': 'block'});
			$('#proyectos').css({'marginLeft': gotoX + 'px', 'marginTop': gotoY + 'px', 'width': finalWidth + 'px', 'height': finalHeight + 'px'});
			$('#proyectos').animate({opacity: 1, marginLeft: backtoX, marginTop: backtoY, width: 550, height: 1050}, 1400, function(){
			//$('#proyectos').animate({opacity: 1, Left: 200, Top: 50, width: 550, height: 1050}, 1400, function(){
				//if($.browser.msie) {$('#proyectos').css('filter', "alpha(enabled='false')");}
			});
		}
	});
	
	//Abrir josico
	$('#josico_on a').live('click', function(event){
		
		event.preventDefault();
		
		if($('#proyectos').css('display') == 'block'){
			$('#proyectos').css({'display': 'none'});
		}
				
			var productX 		= $("#info_contacto").offset().left +75;
			var productY 		= $("#info_contacto").offset().top +210;
			
			var folderX 		= $("#info_contacto").offset().left;
			var folderY 		= $("#info_contacto").offset().top;
							
			var gotoX 			= folderX - productX;
			var gotoY 			= folderY - productY;
			
			//var backtoX 		= productX - folderX;
			//var backtoY 		= productY - folderY;
			var backtoX 		= 0;
			var backtoY 		= 10;
			
			var productoW		= $("#info_contacto").width();
			var productoH		= $("#info_contacto").height();
			
			var finalWidth 		= 10;
			var finalHeight 	= 10;
			
			$('#info_contacto').css({'display': 'block'});
			$('#info_contacto').css({'marginLeft': gotoX + 'px', 'marginTop': gotoY + 'px', 'width': finalWidth + 'px', 'height': finalHeight + 'px'});
			$('#info_contacto').animate({opacity: 1, marginLeft: backtoX, marginTop: backtoY, width: 550, height: 1050}, 1400, function(){
			//$('#proyectos').animate({opacity: 1, Left: 200, Top: 50, width: 550, height: 1050}, 1400, function(){
				//if($.browser.msie) {$('#proyectos').css('filter', "alpha(enabled='false')");}
			});
	});
	
});
