var closingProject = false;
var currentProjectId = -1;
var projectImagesApi;

function updateMenu(menu)
{
	if (menu == 'info')
		$("#liInfo").html("<b>Alter Sinergies</b>");
	else
		$("#liInfo").html("<a href=\"javascript:show('info')\">Alter Sinergies</a>");
		
	if (menu == 'serveis')
		$("#liServeis").html("<b>Serveis</b>");
	else
		$("#liServeis").html("<a href=\"javascript:show('serveis')\">Serveis</a>");
	
	if (menu == 'projectes')
		$("#liProjectes").html("<b>Projectes</b>");
	else
		$("#liProjectes").html("<a href=\"javascript:show('projectes', updateProjectes)\">Projectes</a>");
		
	if (menu == 'contacte')
		$("#liContacte").html("<b>Contacte</b>");
	else
		$("#liContacte").html("<a href=\"javascript:show('contacte')\">Contacte</a>");
		
}

function updateProjectes()
{
	var $projectesContent = $("#content").children('div.scrollable');
	$projectesContent.attr("id", "browsable");
	var divs = $("#browsable div.items").children('a');
	var currentTop = 0;
	var i = 0;
	var currentTop = 0;
	var currentLeft = 0;
	var $newHtml = $('<div/>');
	var $newPage = $('<div class="itemsPage"/>');
	var numOfPages = 1;
	divs.each(function() {
		if (currentTop + $(this).height() > 165 )
		{
			currentTop = 0;
			currentLeft += 180;
			if (currentLeft % 720 == 0 && currentLeft != 0)
			{
				$newHtml.append($newPage);
				$newPage = $('<div class="itemsPage"/>');
				numOfPages++;
			}
		}
		
		$(this).css({top: currentTop+"px", left: currentLeft+"px"});
		currentTop += $(this).height() + 8;
		$newPage.append($(this));
	});
	$newHtml.append($newPage);
	$("#browsable div.items").html($newHtml.html());
	if (numOfPages > 1)
	{
		$("#browsable").scrollable({keyboard:false, speed: 1500}).navigator();
	}
}

function selectProject(id)
{
	$("#content .projecte").each(function()
	{
		if ($(this).attr('id') == id)
		{
			$(this).attr('href', "javascript:");
			$(this).removeClass('link');
			$(this).addClass('senselink');
		}
		else
		{
			$(this).removeClass('senselink');
			$(this).addClass('link');
			$(this).attr('href', "javascript:openProject("+$(this).attr('id')+")");
		}
	});
}

function openProject(id)
{
	currentProjectId = id; 
	
	selectProject(id);
	
	var el = $("#loadingProject");
	el.stop(true);
	$("#projectInfo").stop(true);
	if (projectImagesApi != undefined)
	{
		projectImagesApi.stop();
	}
	el.animate({height: ($(window).height() - el.offset().top)+"px"}, 1000, function()
	{
		$("#the-background").fadeOut(0);
		$("#loadingIcon").fadeIn(300);
		$("#projectImages").html("");
		$("#projectInfo").fadeOut(300, function() {xajax_getProject(id)});
	});
}

function showProjectInfo(id)
{
	if (currentProjectId == id)
	{
		
		$("#loadingIcon").fadeOut(300);
		$("#itemsBackground").children(".backgroundImage").each(function()
		{
			$(this).css({width: $(window).width()});
			$(this).bg_img_resize();	
		});
		$("#projectImages").css({height: $(window).height()});
		$("#itemsBackground").css({height: $(window).height()});
		if ($("#itemsBackground").children(".backgroundImage").length > 1)
		{
			projectImagesApi = $("#projectImages").scrollable({keyboard: false, circular: true, speed: 1500}).navigator({navi: "#navImages"}).autoscroll(8000).data("scrollable");
			projectImagesApi.onBeforeSeek(function(e, i) 
			{
				$("#autorImage").fadeOut(500);
			});
			projectImagesApi.onSeek(function(e, i) 
			{
				var autor = $("#autor"+projectImagesApi.getIndex()).html();
				if (autor != "")
				{
					$("#autorImage").html("<span>Foto: "+ autor+"</span>");
					$("#autorImage").fadeIn(500);
				}
				
			});
		}
		else
		{
			projectImagesApi = undefined;
		}
		
					
		var autorIn = $("#autor0").html();		
		if (autorIn != "")
		{
			$("#autorImage").html("<span>Foto: "+ autorIn+"</span>");
			$("#autorImage").fadeIn(0);
		}
		else
		{
			$("#autorImage").html("&nbsp;");
			$("#autorImage").fadeOut(0);
		}
		
		$("#projectInfo").css({opacity: 1});
		$("#projectInfo").fadeOut(0);
		$("#projectInfo").fadeIn(1000, function()
		{
			$("#loadingProject").animate({height: "0px"}, 1000);	
		});
	}
}

function closeProject(menu, callback)
{
	currentProjectId = -1;
	$("#loadingIcon").fadeOut(300);
	$("#the-background").fadeIn(0);
		
	var el = $("#loadingProject");
	el.stop(true);
	$("#projectInfo").stop(true);
	if (projectImagesApi != undefined)
	{
		projectImagesApi.stop();
	}
	el.animate({height: ($(window).height() - el.offset().top)+"px"}, 1000, function()
	{
		$("#projectImages").html("");
		$("#content").fadeTo(500,0);
		$("#projectInfo").fadeOut(500, function()
		{
			$("#content").css({height: ($(window).height()- $("#content").offset().top)+"px"});
			el.css({height: "0px"});
			show(menu, callback);
		});
	});
}

function show(menu, callback)
{
	if ((document.getElementById("projectInfo").style.display == "block") || $("#loadingProject").height() != 0)
	{
		closeProject(menu,callback);
	}
	else
	{
		$("#content").stop();
		updateMenu(menu);
		var html = "";
		if (menu != "")
		{
			html = $("#"+menu).html();
		}
		$("#content").fadeTo(500, 0, function() {$("#content").showHtml(html, 800, callback)});
	}
}

(function($)
{
   $.fn.showHtml = function(html, speed, callback)
   {
	  return this.each(function()
	  {
		 // The element to be modified
		 var el = $(this);

		 // Preserve the original values of width and height - they'll need 
		 // to be modified during the animation, but can be restored once
		 // the animation has completed.
		 var finish = {height: "auto"};

		 // The original width and height represented as pixel values.
		 // These will only be the same as `finish` if this element had its
		 // dimensions specified explicitly and in pixels. Of course, if that 
		 // was done then this entire routine is pointless, as the dimensions 
		 // won't change when the content is changed.
		 var initial = {height: el.height()+'px'};

		 el .css({height: "auto"}) 
		 // Modify the element's contents. Element will resize.
		 el.html(html);
		 
		 // Capture the final dimensions of the element 
		 // (with initial style settings still in effect)
		 var next = {height: el.height()+'px'};
		 
		 if ( $.isFunction(callback) ) callback();

		 el .css(initial) // restore initial dimensions
			.animate(next, speed, function()  // animate to final dimensions
			{
			   el.fadeTo(500, 1);
			   el.css(finish); // restore initial style settings			   
			});
		 
	  });
   };


})(jQuery);