$(document).ready(function(){
	var galleries = $(".referenceGallery");
	
	/**
	 * = Install the gallery controls
	 * ----------------------------------------------------------
	 */
	
	
	$(".referenceGallery").append('<div class="gallery_thumb">');
	$(".gallery_thumb").append('<div class="thumbs">');
	$(".gallery_thumb").append('</div>');
	$(".referenceGallery .thumbs").append('<ul>');
	$(".referenceGallery .thumbs").append('</ul>');
	$(".gallery_thumb").append('<a href="#" class="backBtn">terug</a>');
	$(".gallery_thumb").append('<a href="#" class="forwardBtn">vooruit</a>');
	$(".gallery_thumb").append('<span class="backBtnDisabled">terug</span>');
	$(".gallery_thumb").append('<span class="forwardBtnDisabled">vooruit</span>');
	
	/**
	* = Add the thumbnails to the gallery controls
	*/
	
	for(var x = 1; x <= galleries.length; x++) {
		var myContent = $("." + x + " .gallery").html();
		$("." + x + " .thumbs ul:eq(0)").append(myContent);
		$("." + x + " .thumbs ul img").attr({ width: "53"}).removeAttr("height");
		// set the gallery number in the back and forward buttons
		$("." + x + " .backBtn").attr({ href: x});
		$("." + x + " .forwardBtn").attr({ href: x});
		// set the image numbers in the thumbnail links
		for(var y = 1; y <= $("." + x + " .thumbs ul img").length; y++) {
			var forEq = y - 1;
			$("." + x + " .thumbs ul a:eq(" + forEq + ")").attr({ href: y });
		}
	}
	
	/**
	* = Add the animation thumbnails
	*/
	
	$(".thumbs").append('<div class="fake">');
	$(".thumbs").append('</div>');
	
	/**
	* = Init values
	*/
	
	var thumbs = new Array();
	for(var x = 1; x <= galleries.length; x++) {
		thumbs[x] = new Array();
		thumbs[x]['currentViewPort'] = 1;
		thumbs[x]['totalThumbs'] = $("." + x + " .gallery_thumb .thumbs ul img").length;
		thumbs[x]['totalViewports'] = Math.ceil(thumbs[x]['totalThumbs'] / 3);
		thumbs[x]['selected'] = 1;
	}
	
	/**
	 * = backBtn + forwardBtn functions
	 * ----------------------------------------------------------
	 */
	
	function backBtnState () {
		for(var x = 1; x <= galleries.length; x++) {
			// if there is only one viewport
			if(thumbs[x]['totalViewports'] == 1) {
				$("." + x + " .gallery_thumb .backBtnDisabled").css({'top' : "0"});
				$("." + x + " .gallery_thumb .backBtn").css({'top' : "-999px"});
			// if its at the first thumb
			} else if(thumbs[x]['currentViewPort'] == 1) {
				$("." + x + " .gallery_thumb .backBtnDisabled").css({'top' : "0"});
				$("." + x + " .gallery_thumb .backBtn").css({'top' : "-999px"});
			// we have a normal button
			} else {
				$("." + x + " .gallery_thumb .backBtnDisabled").css({'top' : "-999px"});
				$("." + x + " .gallery_thumb .backBtn").css({'top' : "0"});
			}
		}
	}
	
	function forwardBtnState () {
		for(var x = 1; x <= galleries.length; x++) {
			// if there is only one viewport
			if(thumbs[x]['totalViewports'] == 1) {
				$("." + x + " .gallery_thumb .forwardBtnDisabled").css({'top' : "0"});
				$("." + x + " .gallery_thumb .forwardBtn").css({'top' : "-999px"});
			// if its at the last thumb
			} else if(thumbs[x]['currentViewPort'] == thumbs[x]['totalViewports']) {
				$("." + x + " .gallery_thumb .forwardBtnDisabled").css({'top' : "0"});
				$("." + x + " .gallery_thumb .forwardBtn").css({'top' : "-999px"});
			// we have a normal button
			} else {
				$("." + x + " .gallery_thumb .forwardBtnDisabled").css({'top' : "-999px"});
				$("." + x + " .gallery_thumb .forwardBtn").css({'top' : "0"});
			}
		}
	}
	
	function wireButtons() {
		$(".backBtn").click(function(){
			var whichGallery = $(this).attr("href");
			moveThumbnails("back", whichGallery);
			return false;
		});
	
		$(".backBtnDisabled").click(function(){
			return false;
		});
	
		$(".forwardBtn").click(function(){
			var whichGallery = $(this).attr("href");
			moveThumbnails("forward", whichGallery);
			return false;
		});
	
		$(".forwardBtnDisabled").click(function(){
			return false;
		});
		
		$(".thumbs a").click(function(){
			var whichImage = $(this).attr("href");
			var whichGallery = $(this).parent().parent().parent().parent().parent().attr('class');
			whichGallery  = whichGallery.substr(17);
			thumbs[whichGallery]['selected'] = whichImage;
			setSelected();
			//referenceGallery 1 - 17
			return false;
		});
	}
	
	/**
	 * = move thumbnails
	 * ----------------------------------------------------------
	 */
	
	function moveThumbnails(direction, whichGallery) {
		if(direction == "forward") {
			thumbs[whichGallery]['currentViewPort'] += 1;
		} else {
			thumbs[whichGallery]['currentViewPort'] -= 1;
		}
		
		// add the animation
		animateFakes(direction, whichGallery);
		marginTop = -1 * ((thumbs[whichGallery]['currentViewPort'] - 1) * 48);
		$("." + whichGallery + " .gallery_thumb ul").css({'margin-top' : marginTop});
		// set buttons correctly
		backBtnState();
		forwardBtnState();
	}
	
	/**
	 * = set selected
	 * ----------------------------------------------------------
	 */
	
	function setSelected() {
		for(var x = 1; x <= galleries.length; x++) {
			var whichImage = thumbs[x]['selected'] - 1;
			$("." + x + " .thumbs a").removeClass('selected');
			$("." + x + " .gallery li").removeClass('selected').addClass('normal');
			$("." + x + " .thumbs a:eq(" + whichImage + ")").addClass('selected');
			$("." + x + " .gallery li:eq(" + whichImage + ")").addClass('selected').removeClass('normal');
		}
	}
	
	/**
	* = animate fake
	* ----------------------------------------------------------
	*/
	
	function animateFakes(direction, whichGallery) {
		if(direction == "forward") {
			$("." + whichGallery + " .fake").css({'top' : 0, 'left': '17px'}).fadeIn(10).animate({left: "-221px"}).fadeOut("fast");//.css({'top' : '48px'});
		} else {
			$("." + whichGallery + " .fake").css({'top' : 0, 'left': '-221px'}).fadeIn(10).animate({left: "17px"}).fadeOut("fast");//.css({'top' : '48px'});
		}
	}
	
	
	
	// set buttons and images correctly (init)
	backBtnState();
	forwardBtnState();
	setSelected();
	wireButtons();
	
	// activate the lightbox plugin
	$('.gallery a').lightBox();
});