$(document).ready(function(){
	$("#fotos_albums ul li img").click(function(){
		var file = $(this).attr("src");
		var file = escape(file);
		var album = $(this).attr("rel");
		var album = escape(album);
		$("<div id='fotoviewer_overlay'></div>").appendTo('body');
		$("#fotoviewer_overlay").fadeIn();
		$("body").prepend("<div id='fotoviewer_content'></div>");
		$("#fotoviewer_content").load("/fotos/fotoviewer/?filename=" + file + "&album=" + album, function(){
			$(".fotoviewer_slider li img:first").css("opacity",1);
			$(".fotoviewer_slider li img").hover(function(){
				$(this).animate({opacity : 1},200);
			},function(){
				if ($(this).is(".highlight")) {
					
				} 
				else {
					$(this).animate({
						opacity: 0.7
					}, 200);			
				}
			});		
			/*
			$(".fotoviewer_slider li img").each(function(){
				var height = $(this).height();
				var width = $(this).width();
				var aspect = width / height;
				if(aspect > 1){
					$(this).height(100);
					var leftmargin = (($(this).width() - 100) / 2) * -1;
					var leftmargin = Math.round(leftmargin);
					$(this).css("margin-left",leftmargin);
				} else {
					$(this).width(100);
					var topmargin = (($(this).height() - 100) / 2) * -1;
					var topmargin = Math.round(topmargin);
					$(this).css("margin-top",topmargin);
				}
			});
			*/
			$(".fotoviewer_slider li img").click(function(){
				var file = $(this).attr("src");
				var file = file.replace('thumbs','fotos');
				$("#fotoviewer_hoofdfoto").attr("src",file);
				$(".fotoviewer_slider li img").css("opacity",0.7).removeClass("highlight");
				$(this).css("opacity",1);
				$(this).addClass("highlight");
			});
			$("#fotoviewer_slider_button_links").click(function(){
				$(".fotoviewer_slider").animate({left : '+=200'});
			});
			$("#fotoviewer_slider_button_rechts").click(function(){
				$(".fotoviewer_slider").animate({left : '-=200'});
			});
			$("#fotoviewer_close").click(function(){
				$("#fotoviewer_overlay").fadeOut(function(){$(this).remove();});
				$("#fotoviewer_content").remove();
			});
			$("#fotoviewer_button_links").click(function(){
				var src = $("#fotoviewer_hoofdfoto").attr("src");
				var src = src.replace('fotos','thumbs');
				var rel = $(".fotoviewer_slider li div img[src='" + src + "']").attr("rel");
				var rel = parseFloat(rel);
				var rel = rel - 1;
				if(rel != 0){
					$(".fotoviewer_slider li div img[src='" + src + "']").css("opacity",0.7).removeClass("highlight");
					var src_nieuw = $(".fotoviewer_slider li div img[rel='" + rel + "']").attr("src");
					var src_nieuw = src_nieuw.replace('thumbs','fotos');
					$("#fotoviewer_hoofdfoto").attr("src",src_nieuw);
					$(".fotoviewer_slider li div img[rel='" + rel + "']").css("opacity",1).addClass("highlight");
				}
			});
			$("#fotoviewer_button_rechts").click(function(){
				var src = $("#fotoviewer_hoofdfoto").attr("src");
				var src = src.replace('fotos','thumbs');
				var rel = $(".fotoviewer_slider li div img[src='" + src + "']").attr("rel");
				var rel = parseFloat(rel);
				var rel = rel + 1;
				$(".fotoviewer_slider li div img[src='" + src + "']").css("opacity",0.7).removeClass("highlight");
				if(rel != 0){
					$(".fotoviewer_slider li div img[src='" + src + "']").css("opacity",0.7).removeClass("highlight");
					var src_nieuw = $(".fotoviewer_slider li div img[rel='" + rel + "']").attr("src");
					var src_nieuw = src_nieuw.replace('thumbs','fotos');
					$("#fotoviewer_hoofdfoto").attr("src",src_nieuw);
					$(".fotoviewer_slider li div img[rel='" + rel + "']").css("opacity",1).addClass("highlight");
				}
			});
		});
		$("#fotoviewer_overlay").click(function(){
			$("#fotoviewer_overlay").fadeOut(function(){$(this).remove();});
			$("#fotoviewer_content").remove();
		});
		
		$(document).keydown(function(event) {
			  if (event.keyCode == '27') {
				  $("#fotoviewer_overlay").fadeOut(function(){$(this).remove();});
				  $("#fotoviewer_content").remove();
			   }
			});
	});
});


function fotos(){
	$(".foto_kolom ul li img").each(function(){
		var height = $(this).height();
		var width = $(this).width();
		var aspect = width / height;
		if (aspect > 1) {
			$(this).height(100);
			var leftmargin = (($(this).width() - 100) / 2) * -1;
			var leftmargin = Math.round(leftmargin);
			$(this).css("margin-left", leftmargin);
		}
		else {
			$(this).width(100);
			var topmargin = (($(this).height() - 100) / 2) * -1;
			var topmargin = Math.round(topmargin);
			$(this).css("margin-top", topmargin);
		}
	});
}