$(document).ready(function() {
	// Voorbeeld screenshot viewer

	var index = 0;
	var animating = false;
	
	$.fn.scrollVb = function(dir) {
		var direction = "592px";
		var factor = 1;
		var total = $("#vb_hidden img").length;
		
		if(dir == "vb_arrow_l")
		{
			var direction = "-592px";
			var factor = -1;
		}
				
		if(index+factor > total-1 || index+factor < 0-total+1 )
		{
			index = 0;
		}
		else {
			index = index + factor;
		}

		var pic = $("#vb_hidden img").eq(index).attr("src");
		
		animating = true;
		
		$(".vb_pic").animate({backgroundPosition: '-=' + direction + ''},{duration: 600, easing: 'easeInOutQuart'});
		$(".vb_dummy")
				.animate({left: direction}, 0)
				.css("backgroundImage", "url('" + pic + "')")
				.animate({left: '0px'}, 600, "easeInOutQuart", function() {
					$(".vb_pic").css("backgroundImage", "url('" + pic + "')");
					animating = false;
				});
	}

	$(".vb_arrow_l, .vb_arrow_r").click(function() {
		if(animating == false)
		{
			var direction = $(this).attr("class");
			$(this).scrollVb(direction);
		}
	});
});