Cufon.replace('#navigation li.color_1 a', {hover: true}); 
Cufon.replace('#navigation li.color_2 a:first', {hover: true}); 
Cufon.replace('#navigation li.color_3 a:first', {hover: true}); 
Cufon.replace('#navigation li.color_4 a:first', {hover: true}); 
Cufon.replace('#navigation li.color_5 a:first', {hover: true}); 

$(document).ready(function() {

	$("#content a[href$=.jpg], #content a[href$=.png], #content a[href$=.gif]").fancybox();

	var CurrentColor = $("#navigation li.streepje").css("color");
	$("#navigation li").hover(
		function() {
			if(!$(this).children().hasClass("current")) {

				var HoverColor = $("a:hover", $(this)).css("color");

				$(this).prev().css("color", HoverColor);
				$(this).next().css("color", HoverColor);
			}
		},
		function() {
			if(!$(this).children().hasClass("current")) {
				$(this).prev().css("color", CurrentColor);
				$(this).next().css("color", CurrentColor);
				ShowCurrent();
			}
	});
	
	ShowCurrent();
	
	function ShowCurrent() {
		ActiveColor = $("#navigation li a.current").css("color");
		$("#navigation li a.current").parent().prev().css("color", ActiveColor);
		$("#navigation li a.current").parent().next().css("color", ActiveColor);
	}
});

$(window).resize(function(){
  ResizeHandler();
});

var bFadeIn = true;

function ResizeHandler() { 
	var ContentContainer				= $("#site");
	var BackContainer						= $("#bg-container");
	var BackContainerImage			= $("#bg-container img");
	var ImageWidth							= $("#bg-container img").width();
	var ImageHeight							= $("#bg-container img").height();

	var ContentContainerHeight  = parseInt(ContentContainer.outerHeight()); 
	var ContentContainerWidth   = parseInt(ContentContainer.outerWidth());
	
	BackContainer.css("overflow", "hidden");
	BackContainerImage.css("position", "absolute");
	
	var SiteHeight 							= parseInt($("#site").innerHeight());
	var ContainerHeight					= SiteHeight;
	
	BackContainer.height(ContainerHeight); // set height of the container so no scrollbar is measured
	
	var WindowHeight 						= parseInt($(window).height());
	var WindowWidth 						= parseInt($(window).width());
	
	BackContainer.width(WindowWidth);
	BackContainer.css("width", "100%");

	if(WindowWidth < ContentContainerWidth) {
		BackContainerImage.css('width', ContentContainerWidth + "px");
	} else {
		BackContainerImage.css('width', WindowWidth + "px");
	}
	BackContainer.css("width", BackContainerImage.width() + "px");
	
	var NewImageHeight = GetDimensionChange(ImageWidth, BackContainerImage.width(), ImageHeight);
	if(NewImageHeight > ContainerHeight) {
		BackContainerImage.css("top", (Math.floor(NewImageHeight - ContainerHeight) / 2) * -1 + "px");
		BackContainerImage.height(NewImageHeight);
		BackContainerImage.css("left", "0px");
	} else {
		BackContainerImage.css("top", "0px");
		BackContainerImage.height(ContainerHeight);
		var NewImageWidth = GetDimensionChange(ImageHeight, ContainerHeight, ImageWidth);
		BackContainerImage.width(NewImageWidth);
	  if(WindowWidth < ContentContainerWidth) {
	  	BackContainerImage.css("left", (Math.floor(NewImageWidth - ContentContainerWidth) / 2) * -1 + "px");
	  } else {
	  	BackContainerImage.css("left", (Math.floor(NewImageWidth - WindowWidth) / 2) * -1 + "px");
	  }
	}

	BackContainer.height(parseInt($("#site").innerHeight())); // height changes during process, so don't use SiteHeight.

	if(bFadeIn) {
	BackContainerImage.animate({opacity: 1}, "slow");	
		bFadeIn = false;
	} else {
		BackContainerImage.show();
	}
}

function GetDimensionChange(SrcDimension, NewDimension, DimensionValue)
{
	return DimensionValue * (NewDimension/SrcDimension);
}