$(document).ready(function() {	
	// PHOTOVIEWER
	if ($(".photoviewer .thumbnails a").length > 0) {
		image_url = new Array();
		// vervangt de link door alleen het plaatje wat reeds in de link zit
		$(".photoviewer .thumbnails a").each(function( intIndex ){
			var img_url = $(this).attr("href");
			var img_size = $(this).attr("title");
	
			$(this).find("img").attr("title", img_size + "#" + img_url);
			
			$(this).parent().html( $(this).html() );
			// preload de grote afbeelding
			image_url[intIndex] = img_url;
		});
		
		if (document.images) {
			preload_image_object = new Image();	
			var i=0;
			for(i=0; i<=image_url.length; i++) {
				preload_image_object.src = image_url[i];
			}
		}
		
		// geef de thumbnails een marge en bereken hoe groot de container moet zijn waarin ze zitten
		
		var total_width = 0;
		$(".photoviewer .thumbnails li").each(function( intIndex ){	
			$(this).css("left", total_width);
			total_width += $(this).width() + 10;	
		});
		$(".photoviewer .thumbnails ul").css("width", total_width-10);
		
		// plaats de eerste grote foto en maakt de thumbnail actief
		var photo			= $(".photoviewer .thumbnails img:first").attr("title");
		var photo_width		= photo.substring(0 , photo.indexOf("#"));
		var photo_height	= photo.substring(photo.indexOf("#")+1 , photo.lastIndexOf("#"));
		var photo_url		= photo.substr(photo.lastIndexOf("#")+1);
		
		$(".photoviewer .enlarged").html("<img src=\"" + photo_url + "\" />");
		$(".photoviewer .enlarged img").attr("height", photo_height);
		$(".photoviewer .enlarged img").attr("width", photo_width);
		$(".photoviewer .enlarged").css("height",$(".photoviewer .enlarged img").height());
		$(".photoviewer .thumbnails img:first").addClass("active");
		
		disablePrevBtn($(".photoviewer .thumbnails img:first").parent().html());
		disableNextBtn($(".photoviewer .thumbnails img:first").parent().html());
		
		$(".photoviewer .thumbnails img").click(function() {
			if ($(this).hasClass("active") == false) {
				activateImg($(this));
			}
		});
		
		// terug knopje
		$(".photoviewer .prev").mouseover(function() {								  
			$(this).addClass("hover");									  
		}).mouseout(function() {
			$(this).removeClass("hover");
		}).click(function() {
			if ($(this).hasClass("prev_disabled") == false) {
				activateImg($(".photoviewer .thumbnails img.active").parent().prev().children("img"));
			}
		});
		
		// volgende knopje
		$(".photoviewer .next").mouseover(function() {									  
			$(this).addClass("hover");										  
		}).mouseout(function() {
			$(this).removeClass("hover");
		}).click(function() {
			if ($(this).hasClass("next_disabled") == false) {
				activateImg($(".photoviewer .thumbnails img.active").parent().next().children("img"));
			}
		});
	}
});

function activateImg(img) {
	$(".photoviewer .enlarged img").fadeOut("slow", function() {
		$(".photoviewer .thumbnails img").removeClass("active");									 
		$(img).addClass("active");
		
		disablePrevBtn($(img).parent().html());
		disableNextBtn($(img).parent().html());
		
		var photo			= $(img).attr("title");
		var photo_width		= photo.substring(0 , photo.indexOf("#"));
		var photo_height	= photo.substring(photo.indexOf("#")+1 , photo.lastIndexOf("#"));
		var photo_url		= photo.substr(photo.lastIndexOf("#")+1);
		
		$(".photoviewer .enlarged").html("<img src=\"" + photo_url + "\" />");
		$(".photoviewer .enlarged img").attr("height", photo_height);
		$(".photoviewer .enlarged img").attr("width", photo_width);
		
		// centreerd de vergrote foto
		$(".photoviewer .enlarged img").show();
		var photo_height = $(".photoviewer .enlarged img").height();
		var photo_margin = ($(".photoviewer .enlarged").width() - $(".photoviewer .enlarged img").width()) / 2;
		$(".photoviewer .enlarged img").hide();
		//$(".photoviewer .enlarged img").css("margin-left", photo_margin);
		
		$(".photoviewer .enlarged").animate( {height: photo_height}, 200, function() {
			
			$(".photoviewer .enlarged img").fadeIn("slow");																   
			var maxRight =  $(".photoviewer .thumbnails").width() - $(".photoviewer .thumbnails ul").width();
			
			newPosition = ($(".photoviewer .thumbnails").width()/2 - $(img).parent().width()/2) - parseInt($(img).parent().css("left"));
			
			if (newPosition > 0) {
				newPosition = 0;	
			} else if (newPosition < maxRight) {
				newPosition = maxRight;
			}
			
			$(".photoviewer .thumbnails ul").animate( {left: newPosition}, 400);
		});

	});	
}

function disablePrevBtn(imgHTML) {
	if (imgHTML == $(".photoviewer .thumbnails li:first").html()) {
		$(".photoviewer .prev").addClass("prev_disabled");
	} else {
		$(".photoviewer .prev").removeClass("prev_disabled");
	}
}

function disableNextBtn(imgHTML) {
	if (imgHTML == $(".photoviewer .thumbnails li:last").html()) {
		$(".photoviewer .next").addClass("next_disabled");
	} else {
		$(".photoviewer .next").removeClass("next_disabled");
	}
}