var currentImage = 0;

$(document).ready(function() {
	// Fill in some placeholders for the gallery thumb
	$('#gallery div.galleryThumb').append('<a href=""><img src="images/lightbox-blank.gif"></a>');
	
	// Loop through and add the nav links
	$("#gallery div.galleryNav div.numbers").append('<ul></ul>');
	for(var i=0; i<images.length; i++) {
		var li = '<li id="'+i+'_gallery">' + (i+1) + '</li>';
		$('#gallery div.galleryNav div.numbers ul').append(li);
	}
	

	// Add interactivity to left and right arrows
	$("#gallery div.back").click(function() { if(currentImage > 0) loadThumb(currentImage-1)});
	$("#gallery div.next").click(function() { if(currentImage < images.length) loadThumb(currentImage+1)});
	$("#gallery div.back, #gallery div.next").hover(
		function() {
			$(this).addClass('hover');
		},
		function() {
			$(this).removeClass('hover');
		}
	);
	
	// Add lightbox functionality
	$("#gallery div.galleryThumb a").lightBox();
	$("#gallery div.viewFull a").lightBox();
	

	// Setup the link functionality
	$("#gallery div.galleryNav div.numbers ul li")
		.hover(
			function() {
				$(this).addClass('hover');
			},
			function() {
				$(this).removeClass('hover');
			})
		.click(function() {
			var id = $(this).attr('id');
			var i = parseInt(id);
			loadThumb(i);
		})
	
		.eq(0).click();
	
	// Init the nav
	updateGalleryNav();
});


function loadThumb(i) {
	currentImage = i;
	$("#gallery div.galleryNav div.numbers ul li").removeClass('active').eq(i).addClass('active');
	updateGalleryNav();

	var small = 'photos/' + images[i].image + '_small.jpg';
	var large = 'photos/' + images[i].image + '.jpg';
	var description = images[i].description;
	
	$("#gallery div.galleryThumb img").stop().fadeOut(250, function() {
		$(this).load(function() {
			$(this).fadeIn(250);
			$("#gallery div.galleryThumb a")
				.attr('href', large)
				.attr('title', description);

			// Set the view full link
			var containerWidth = $('#gallery div.galleryThumb').width();
			var linkOffset = containerWidth - (containerWidth - $(this).width())/2;
			$("#gallery div.viewFull")
				.stop()
				.animate({left: linkOffset})
				.find('a')
					.attr('href', large)
					.attr('title', description);
		}) // Load
		.attr('src', small);
	});
}

function updateGalleryNav() {
	var numbersPerPage = 8;
	var page = Math.floor(currentImage/numbersPerPage);
	var pages = Math.ceil(images.length/numbersPerPage);
	$("#gallery div.galleryNav div.numbers ul li").removeClass('hidden').addClass('visible');
	$('#gallery div.galleryNav div.numbers ul li:gt('+((page+1)*numbersPerPage-1)+')').removeClass('visible').addClass('hidden');
	$('#gallery div.galleryNav div.numbers ul li:lt('+(page*numbersPerPage)+')').removeClass('visible').addClass('hidden');
	
	$('#gallery div.galleryNav div.numbers ul li.hidden').hide();
	$('#gallery div.galleryNav div.numbers ul li.visible').show();
	
	if(currentImage == 0) {
		$("#gallery div.back").text('');
	} else {
		$("#gallery div.back").text('<');
	}
	
	if(currentImage == images.length-1) {
		$("#gallery div.next").text('');
	} else {
		$("#gallery div.next").text('>');
	}
}