$("#menu-about").click(function(){
	
	$("#info-container").fadeOut(500);

	$.ajax({
			type: "GET",
			url: "about.php",
			success: function(html){
				$("#content").hide().html(html).fadeIn("slow");
				Cufon.refresh(); 
			}
	});
	
});

$("#menu-links").click(function(){
	
	$("#info-container").fadeOut(500);

	$.ajax({
			type: "GET",
			url: "links.php",
			success: function(html){
				$("#content").hide().html(html).fadeIn("slow");
				Cufon.refresh(); 
			}
	});
	
});

$(".proyecto-link").click(function(){

	//Pillamos la ID del proyecto mediante la ID del título
	var project_id = ($(this).attr("id")).replace("proyecto-", "");

	//Quitamos el atributo selected del anterior título y se lo metemos al nuevo
	$(".proyecto-link.selected").removeClass("selected");
	$(this).addClass("selected");
	
	//Hacemos una llamada para conseguir la información del proyecto y las imágenes del proyecto.
	//Esto serán dos elementos JSON con la información. 
	var infoProyecto = getInfoProyecto (project_id);
		
	var imagenesProyecto = getImagenesProyecto (project_id);
		
	var closeContent = "<div id='close-content'>";
	closeContent += "<img src='imgs/close.png' />";
	closeContent += "</div>";
	
	var descripcionWrap = "<div id='descr-proyecto'>";
	descripcionWrap += "<p>" + infoProyecto.descripcion + "</p>";
	descripcionWrap += "</div>";
	
	var imageWrap = "<div id='imgs-proyectos-wrap'>";
	
	for (var i=0; i < imagenesProyecto.length; i++)
	{
		imageWrap += '<div class="img-container" style="width: ' + imagenesProyecto[i].anchura + 'px; height:' + imagenesProyecto[i].altura + 'px;">';
		imageWrap += '<img src="files/gimgs/' + imagenesProyecto[i].nombre_archivo + '" />';
		imageWrap += '</div>';
		
		if (imagenesProyecto[i].descripcion != "")
		{
			imageWrap += '<p class="image-footer">';
			imageWrap += imagenesProyecto[i].descripcion;
			imageWrap += '</p>';
		}
	}
	
	imageWrap += '</div>';
	
	$("#content").fadeOut(300, function()
	{
		$(this).empty().append(closeContent).append(descripcionWrap).append(imageWrap).fadeIn(300);
		
		//Refrescamos Cufon para que los cambios tengan efecto
		Cufon.refresh();
		
		$(".img-container img").load( function(){
			$(this).delay(500).fadeIn(200);
		});
	
	});
	
	location.hash = infoProyecto.url;
	
});

$(".project-thumbnail").live("click", function(){
	
	//Pillamos la ID del proyecto mediante la ID del título
	var project_id = ($(this).attr("id")).replace("thumbnail-", "");
	
	//Hacemos una llamada para conseguir la información del proyecto y las imágenes del proyecto.
	//Esto serán dos elementos JSON con la información. 
	var infoProyecto = getInfoProyecto (project_id);
	
	var imagenesProyecto = getImagenesProyecto (project_id);
		
	var closeContent = "<div id='close-content'>";
	closeContent += "<img src='imgs/close.png' />";
	closeContent += "</div>";
	
	var descripcionWrap = "<div id='descr-proyecto'>";
	descripcionWrap += "<p>" + infoProyecto.descripcion + "</p>";
	descripcionWrap += "</div>";
	
	var imageWrap = "<div id='imgs-proyectos-wrap'>";
	
	for (var i=0; i < imagenesProyecto.length; i++)
	{
		imageWrap += '<div class="img-container" style="width: ' + imagenesProyecto[i].anchura + 'px; height:' + imagenesProyecto[i].altura + 'px;">';
		imageWrap += '<img src="files/gimgs/' + imagenesProyecto[i].nombre_archivo + '" />';
		imageWrap += '</div>';
		
		if (imagenesProyecto[i].descripcion != "")
		{
			imageWrap += '<p class="image-footer">';
			imageWrap += imagenesProyecto[i].descripcion;
			imageWrap += '</p>';
		}
	}
	
	imageWrap += '</div>';
	
	$("#content").fadeOut(300, function()
	{
		$(this).empty().append(closeContent).append(descripcionWrap).append(imageWrap).fadeIn(300);
		
		//Refrescamos Cufon para que los cambios tengan efecto
		Cufon.refresh();
		
		$(".img-container img").load( function(){
			$(this).delay(500).fadeIn(200);
		});
	
	});
	
	location.hash = infoProyecto.url;
		
});


$(".foto-proyecto-link").click(function(){

	

	//Pillamos la ID del proyecto mediante la ID del título
	var project_id = ($(this).attr("id")).replace("proyecto-", "");

	//Quitamos el atributo selected del anterior título y se lo metemos al nuevo
	$(".proyecto-link.selected").removeClass("selected");
	$(this).addClass("selected");
	
	//Hacemos una llamada para conseguir la información del proyecto y las imágenes del proyecto.
	//Esto serán dos elementos JSON con la información. 
	var infoProyecto = getInfoProyecto (project_id);
	var imagenesProyecto = getImagenesProyecto (project_id);
	
	var leftColumn = "<div id='left-column' style='height: 10000px; width: auto; position: absolute; left: 30px; top: 30px;'>";
	leftColumn += "<div id='left-tunnel' style='width: 800px; height: 10000px;'></div>";
	leftColumn += "</div>";
	
	var rightColumn = "<div id='right-column' style='height: 10000px; position: absolute; top: 500px; right: 30px;'>";
	rightColumn += "<div id='right-tunnel' style='width: 800px; height: 10000px;'></div>";
	rightColumn += "</div>";
	
	var upColumn = "<div id='up-column' style='width: 10000px; position: fixed; top: 30px; left: 30px;'>";
	upColumn += "<div id='up-tunnel' style='height: 800px; width: 10000px;'></div>";
	upColumn += "</div>";
	
	var downColumn = "<div id='down-column' style='width: 10000px; position: fixed; bottom: 30px; right: 0px;'>";
	downColumn += "<div id='down-tunnel' style='height: 800px; width: 10000px;'></div>";
	downColumn += "</div>";
	
	$("#content").fadeOut(300, function()
	{
		$(this).empty().append(leftColumn).append(rightColumn).append(upColumn).append(downColumn).fadeIn(300);
		
		//Refrescamos Cufon para que los cambios tengan efecto
		Cufon.refresh();
		
		for (var i=0; i < imagenesProyecto.length; i++)
		{
			var imageWrap = "";
			
			if ((i+1) % 4 == 1)
			{
				imageWrap = '<img style="position: absolute; top:' + i*800 + 'px;" src="files/gimgs/' + imagenesProyecto[i].nombre_archivo + '" />';
				$("#left-tunnel").append(imageWrap);
			}
			else if ((i+1) % 4 == 2)
			{
				imageWrap = '<img style="position: absolute; left:' + i*800 + 'px;" src="files/gimgs/' + imagenesProyecto[i].nombre_archivo + '" />';
				$("#up-tunnel").append(imageWrap);
			}
			else if ((i+1) % 4 == 3)
			{
				imageWrap = '<img style="position: absolute; top:' + i*800 + 'px;" src="files/gimgs/' + imagenesProyecto[i].nombre_archivo + '" />';
				$("#right-tunnel").append(imageWrap);
			}
			else if ((i+1) % 4 == 0)
			{
				imageWrap = '<img style="position: absolute; right:' + i*800 + 'px;" src="files/gimgs/' + imagenesProyecto[i].nombre_archivo + '" />';
				$("#down-tunnel").append(imageWrap);
			}
		}
	
	});
	
});


function getImagenesProyecto (id)
{
	var imagenes = $.ajax({
			type: "POST",
			url: "project.php",
			async: false,
			data: "id=" + id + "&getImagenes=yes"
	}).responseText;
	
	var data = jQuery.parseJSON (imagenes);
	return data;
}

function getInfoProyecto (id)
{
	var info = $.ajax({
			type: "POST",
			url: "project.php",
			async: false,
			data: "id=" + id + "&getInfo=yes"
	}).responseText;
		
	var data = $.parseJSON (info);
	return data;
}

$(document).ready( function(){
	
	$("#content").load("home.php", function(){
		$(".project-thumbnail img").load( function(){
			$(this).fadeIn(500);
		});
	});
	
	$("#close-content").live('click', function() {
		
		if ($("#descr-proyecto").is(":visible"))
		{
			$(this).fadeOut(150, function(){
				$(this).children("img").attr("src", "imgs/mas_content.png").end().fadeIn(150);
			});
			$("#descr-proyecto").slideToggle(300);
		}
		else
		{
			$(this).fadeOut(150, function(){
				$(this).children("img").attr("src", "imgs/close.png").end().fadeIn(150);
			});
			$("#descr-proyecto").slideToggle(300);
		}
		
	});
	
	$("#menu li").not("#nav").hover(function(){
		$(this).css("color", "#ccc");
		Cufon.refresh();
	}, function() {
		$(this).css("color", "black");
		Cufon.refresh();
	});

});