var CURR_VISUAL = 0;

$(document).ready(
	function()
	{
		if ($("#pageHome").length > 0)
		{
			bindHome();
		}

		bindMenu();
	}
);

function bindHome()
{
	$("#lijn").css("height", "0px");
	$("#logo").css("opacity", "0");
	$("#nav").hide();

	$("#lijn").animate({height: "530px"}, 2000);
	$("#logo").animate({opacity: 1}, 4000);
	$("#nav").show(1000);

}

function bindMenu()
{
	$("#nav li a").click(
		function()
		{
			var width = $(this).find("span").width() + 25;
			var url = $(this).attr("href");

			$("#nav li.active a").animate({left: "0px"}, 1000);
			$("#nav li.active").removeClass("active");
		
			$(this).parent().addClass("active");

			$("#subNav:visible").fadeOut(1000);
			$("#contactform:visible").fadeOut(1000);
			$(this).animate({left: '-'+width+'px'}, 1000);

			if ($(this).hasClass("werkwijze"))
			{
				showWerkwijze();
			}
			else if ($(this).hasClass("team"))
			{
				showTeam();
			}
			else if ($(this).hasClass("opdrachtgevers"))
			{
				showOpdrachtgevers();
			}
			else if ($(this).hasClass("portfolio"))
			{
				showPortfolio();
			}
			else if ($(this).hasClass("contact"))
			{
				showContact();
			}

			return false;
		}
	);

	$("#youtube").click(
		function()
		{
			showYoutube();
		}
	);
}

function showWerkwijze()
{
	repairOpmaak();
	setMain("werkwijze.html");
	return false;
}

function showTeam()
{
	repairOpmaak();
	setMain("evert.html");

	$.get("/ajax/teammenu.html",
		function(data)
		{
			$("#subNav").hide();
			$("#subNav").html(data);
			$("#subNav").show(1000);


			bindTeamMenu();
		}
	);
}

function showYoutube()
{
	setMain("youtube.html");
}

function showOpdrachtgevers()
{
	smalleOpmaak(false);

	$.get("/ajax/opdrachtgevers.html",
		function(data)
		{
			$("#footer").html(data);
			$("#footer").hide();
			$("#footer").fadeIn(800);
			bindPortfolioOPMenu();
		}
	);
}

function showPortfolio()
{
	smalleOpmaak(false);
	$("#footer").fadeOut(500);

	$.get("/ajax/portfoliomenu.html",
		function(data)
		{
			$("#subNav").hide();
			$("#subNav").html(data);

			$("#subNav").css("left", "719px");
			$("#subNav").show(1000);


			bindPortfolioMenu();
		}
	);

}



function setMain(url)
{
	$.get("/ajax/"+url,
		function(data)
		{
			$("#main div").fadeOut(600,
				function()
				{
					$("#main div").html(data);
					$("#main div").hide();
					$("#main div").fadeIn(600);
				}
			);
		}
	);
}

function bindTeamMenu()
{
	$("#subNav li a").click(
		function()
		{
			var width = $(this).find("span").width();
			width = width+25;

			$("#subNav li.active a").animate({left: "0px"}, 1000);
			$("#subNav li.active").removeClass("active");
			$(this).parent().addClass("active");

			$(this).animate({left: '-'+width+'px'}, 1000);
			setMain($(this).attr("class")+".html");

			return false;
		}
	);
}

function bindPortfolioOPMenu()
{
	$("#footer a").unbind("click").click(
		function()
		{
			showPortfolioItems('', $(this).attr('class'));

			return false;
		}
	);
}

function showContact()
{
	repairOpmaak();
	setMain("contact_adres.html");

	$.get("/ajax/contact_formulier.html",
		function(data)
		{
			$("#contactform").html(data);
			$("#contactform").fadeIn(1000);
			bindForm();
		}
	);
}

function bindForm()
{
	$("#form").submit(function()
		{
			$.post("/ajax/contact_verzend.php",
				$("#form").serialize(),
				function(data)
				{
					$("#contactform").fadeOut(500, function()
						{
							$("#contactform").html(data);
							$("#contactform").fadeIn(500);
						}
					);
				}
			);

			return false;
		}
	);
}

function bindPortfolioMenu()
{
	$("#subNav li a").click(
		function()
		{
			var width = $(this).find("span").width();
			width = width+30;

			$("#subNav li.active a").animate({left: "0px"}, 1000);
			$("#subNav li.active").removeClass("active");
			$(this).parent().addClass("active");

			$(this).animate({left: '-'+width+'px'}, 1000);

			showPortfolioItems($(this).attr('class'));

			return false;
		}
	);
}



function smalleOpmaak()
{

	$("body #main div").fadeOut(500, function()
		{
			$("body #main div").html('');
			$("body #main").animate({width: "222px"}, 500, 'linear');
			$("body #lijn").animate({left: "719px"}, 500, 'linear');
			$("body #nav").animate({left: "719px"}, 500, 'linear');
		}
	);

}

function repairOpmaak()
{
	$("#btnNextCase").hide();
	$("#btnPrevCase").hide();
	$("#portfolio").fadeOut(500);
	$("#footer").fadeOut(500);
	$("#visual").removeClass("orange");
	$("#visualswf").fadeIn(500);
	$("body #main").animate({width: "354px"}, 500, 'linear').removeClass('orange');
	$("body #lijn").animate({left: "587px"}, 500, 'linear');
	$("body #nav").animate({left: "587px"}, 500, 'linear');
}

function showPortfolioItems(type, klantID)
{
	var numCases;

	$.get("/ajax/portfolio.php",
		{
			type: type,
			klantID: klantID
		},
		function(data)
		{
			if ($("body #visual").not('.orange'))
			{
				$("body #visualswf").fadeOut(500, function()
					{	
						$("body #visual").addClass('orange');
						$("#main").addClass("orange");//"background", "#F7953F");
					}
				);
			}
			$("#portfolio").fadeOut(500, function()
				{
					$("#portfolio").html(data);
					$("#portfolio").fadeIn(500);
					$("#main div").fadeOut(500, function()
						{
							$("#main div").html($("#case_1 div").html());
							scrollToCase("#case_1");
							$("#main div").fadeIn(1000);
							numCases = $('#cases li').length;

							bindPortfolioButton(numCases);
						}
					);
				}
			);

		}
	);
}

function bindPortfolioButton(numCases)
{
	CURR_CASE = 1;

	if (numCases > 1)
	{
		$("#btnPrevCase").show();
		$("#btnNextCase").show();
	}
	else
	{
		$("#btnPrevCase").hide();
		$("#btnNextCase").hide();
	}

	$('#btnPrevCase').unbind("click").click(function(){
		CURR_CASE--;

		if(CURR_CASE < 0) CURR_CASE = (numCases-1);

		scrollToCase('#case_'+CURR_CASE)
		return false;
	})
	
	$('#btnNextCase').unbind("click").click(function(){
		CURR_CASE++

		if(CURR_CASE > numCases) CURR_CASE = 1;

		scrollToCase('#case_'+CURR_CASE)
		return false;
	});
}

function scrollToCase(caseId) 
{
	$('#portfolio').scrollTo(caseId, 800);
	$("#main div").fadeOut(500, function()
		{
			$("#main div").html($(caseId+" div").html());
			$("#main div").fadeIn(500);
		}
	);
}