$(document).ready(function(){
	var skip = 9; // how many images to skip at once?
	var show = 9; // how many images to show in total?

	// total amount of images
	var totalImg = $('#imageList li').length;
	var currentFirst = 0;

	// be sure to only show first X when starting
	$('#imageList li').css('display', 'none');
	$('#imageList li').each(function(i) {
		if (i < show) $(this).css('display', 'block');
	});
	setPage();

	// add lightbox
	$('a[rel="lightbox"]').colorbox({contentCurrent:"Afbeelding {current} van {total}"});

	// hook next and prev buttons
	$('#next').click(function(evt) { evt.preventDefault(); next(); });
	$('#prev').click(function(evt) { evt.preventDefault(); prev(); });

	function next() {
		var current = getCurrent();
		if (current < totalImg - skip) {
			$('#imageList li').css('display', 'none');
			$('#imageList li').each(function(i) {
				if (i >= current + skip && i < current + skip * 2) $(this).css('display', 'block');
			});
		}
		setPage();
	}

	function prev() {
		var current = getCurrent();
		if (current > skip - 1) {
			$('#imageList li').css('display', 'none');
			$('#imageList li').each(function(i) {
				if (i >= current - skip && i < current) $(this).css('display', 'block');
			});
		}
		setPage();
	}

	function setPage() {
		$('#curpage').html(Math.floor(getCurrent() / skip) + 1);
		$('#totalpages').html(Math.ceil(totalImg / skip));
	}

	function getCurrent() {
		var current = -1;
		$('#imageList li').each(function(i) {
			if ($(this).css('display') == 'block' && current == -1) current = i;
		});
		return current;
	}
});