$(function()
{
	var prevBgColor;

	$("#menu ul").hide();

	$("#menu li:has(ul)").hover(function() {
		prevBgColor = $(this).css("background-color");
		$(this).css("background-color","#669").find("ul").fadeIn();
	}, function() {
		$(this).find("ul").fadeOut(function() {
			$(this).parent().css("background-color",prevBgColor);
		});
	});

	$("img.lightbox").hover(function() {
		$(this).css("border-color","#669");
	}, function() {
		$(this).css("border-color","#ccc");
	})

	$("img.lightbox").click(function() {
		var img = $(this);
		var h = $(window).height();
		var w = $(window).width();

		var image = $("<img/>").attr("src",img.attr("src")).width(800);
		var caption = $("<p class='caption'></p>").text(img.attr("alt"));
		var closer = $("<button>sluiten</button>").click(function() {
			$("#container").fadeOut("slow");
			lightbox.fadeOut("slow");
			container.empty();
		});

		var container = $("<div id='container'></div>").css({
			left: (w - 800) / 2,
			opacity: 1.0,
			top: "20px"
		}).append(image, caption, closer).appendTo($("body"));

		var lightbox = $("<div id='lightbox'></div>").css({
			height: h + "px",
			opacity: 0.8,
			width: w + "px"
		});

		lightbox.appendTo($("body")).fadeIn("slow");
		container.slideDown("slow");
		//console.log(img.height());

	});

})