$(document).ready(
	function()
	{
		if ($.browser.version.charAt(0) < 7 && $.browser.msie){$("#mainnav li").hover(function(){$(this).addClass('hover');},function(){$(this).removeClass('hover');});}
		
		offsetSpoof();
		bindPortfolio();
		resizeBackground();   
        doMasonry();

		if ($("body").attr("id") == 'home')
		{		
			bindHome(-1);
		}
	}
);


function doMasonry()
{
    
    $('.masonry-modal').lightBox();
    
    var container = $('#masonry');
    container.imagesLoaded(function(){
        
        $("#masonry-loader").css("display","none");
        $(".masonry-item").css("display","block");
        
        container.masonry({
            itemSelector : '.masonry-item'
        });
    });

}    


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

function bindHome(iIndex)
{
	if (iIndex >= 0)
	{
		$("#home"+iIndex).fadeOut(2500);
		iIndex++;
					
		if (iIndex >= background.length)
		{
			iIndex = 0;
		}
				
		$("#home"+iIndex).fadeIn(2500, function()
				{	
					setTimeout("bindHome("+iIndex+")", 5000);
				}	
		);
	}
	else
	{
		iIndex = 0;
		$("#home"+iIndex).fadeIn(2500);
		
		setTimeout("bindHome("+iIndex+")", 5000);		
	}
	
}

function resizeBackground()
{
	var iWidth = $(window).width();
	var iHeight = $(window).height();
	
	$("#background").css("width", iWidth).css("height", iHeight);
	$("#background img.home").css("width", "100%");	
	
	if ($("#background img.home").height() < iHeight)
	{
		$("#background img.home").css("height", iHeight).css("width", "auto");
	}

}

function offsetSpoof()
{
	if ($("li.active").length > 0)
	{
		var pos = $("li.active").offset();
	
		pos.top = (pos.top - 4) ;
		
		if (pos.top < 50) {
			$("div.spoof").css('display', 'none');
			}

		else {
			$("div.spoof").css('display', 'block');
			$("div.spoof").css('top', pos.top);
		}
	}
	
}

function bindPortfolio()
{
	var iWidth = $(document).width();
	var iHeight = $(document).height();

	var iLeftModal;
	var iTopModal;
	
	iLeftModal = Math.round((iWidth / 2) - 310);
	iTopModal = 20;
	
	$(".portfolio-image a").click(
		function()
		{
			var div = $(this).parent();
			var ul = div.find("ul");
		
			// Eerst even controleren of er foto's bij het project zitten
			
			if (ul.find("li").length > 0)
			{

			// De titel van het project overnemen naar de modal
				var titel = div.find("img:first").attr("alt");	
				$("#modal #modal-title h2").text(titel);
				

			// De lijst met thumbnails overnemen naar de modal
				$("#modal #modal-thumbs ul").empty().append(ul.html());
			

			// De eerste foto uit de lijst groot weergeven
				var first = $("#modal #modal-thumbs ul li:first").addClass('active');
				showModalFoto();
	

			// Thumbnails clickbaar maken
				bindThumbs();

			// Modal weergeven
				$("#modal-shadow").height(iHeight).width(iWidth).show();
				$("#modal").css("top", iTopModal).css("left", iLeftModal).show();

			}
			return false;
		}
	);
	
	bindModal();
	bindModalPrevNext();
}



function bindThumbs()

{
	$("#modal #modal-thumbs ul a").click(
			function()
			{
				$("#modal #modal-thumbs ul li.active").removeClass("active");
				$(this).parent().addClass('active');
				
				showModalFoto();			

				return false;
			}
	);
}


function bindModalPrevNext()
{
	$("#modal .prev").click(
		function()
		{
			var cur = $("#modal #modal-thumbs ul li.active");
			var nxt = cur.prev("li");

			if (nxt.length == 0)
			{
				nxt = $("#modal #modal-thumbs ul li:last");
			}
	
			cur.removeClass('active');
			nxt.addClass('active');
			
			showModalFoto();
		
			return false;
		}
	);

	$("#modal .next").click(
			function()
			{
				var cur = $("#modal #modal-thumbs ul li.active");
				var nxt = cur.next("li")
				
				if (nxt.length == 0)
				{
					nxt = $("#modal #modal-thumbs ul li:first");
				}
				
				cur.removeClass('active');
				nxt.addClass('active');
				
				showModalFoto();
				
				return false;
			}
		);
}



function showModalFoto()
{
	var src = $("#modal #modal-thumbs ul li.active a").attr("href");
	var img = $("<img>");
	
	img.attr("src", src);
	
	$("#modal #modal-content").empty().append(img);
}

function bindModal()
{
	$("#modal .modal-close").click(

			function()
			{
					$("#modal").hide();
					$("#modal-shadow").hide();
			}
	);
}