$(document).ready(function() {															//editable variables:

	var speed = 600;																					//the speed of the animation in milliseconds

	var list = 'gallery_list';																	//id of the list with items
	var itemWidth = 312;																			//the width of the items in the gallery in px, don't forget padding
	
	var navList = 'gallery_nav_list';														//id of the list with navigation items	
	var navItemWidth = 71;																		//the width of each item in the navigation in px, don't forget padding
	var visibleNavItems = 4;																	//the number of items in the navigation list that should be visible

	var shortNavList = 'gallery_short_nav';											//id of the list with the previous and next button
	var previous = 'previous';																//class of the previous button 
	var next = 'next';																				//class of the next button
	
	var overlay = 'gallery_overlay';																	//id of the overlay button
	var loadingImage = '/images/layout/overlay.png'											//the full path to the loading image (from the html point of view)
	
	
//setting the width of the containers		
	var numberOfNavItems = $('#'+navList+' li').length;
	$('#'+navList).css({width:navItemWidth*numberOfNavItems+'px'});
	var numberOfItems = $('#'+list+' li').length;
	$('#'+list).css({width:itemWidth*numberOfItems+'px'});
//the gallery function
	$('#'+navList+' li a').click(function(event){
		event.preventDefault();
		var itemNr = $(this).parent().index();
		var width= -itemWidth;
		$('#'+list).animate({marginLeft:itemNr*width+'px'}, speed);
	});
//adding the shortNav plugin to the shortNav buttons
	$('#'+shortNavList+' a.'+previous).shortNav(navItemWidth, visibleNavItems, speed, navList, 'previous');
	$('#'+shortNavList+' a.'+next).shortNav(navItemWidth, visibleNavItems, speed, navList, 'next');
//the zoom function	
	$('#'+list+' a').click(function(event){
		event.preventDefault();
		var whichImage = $(this).children(":first");
		//var imageSrc = whichImage.attr('src');
		var imageSrc = $(this).attr('href');
		$('#'+overlay+' img').attr('src', imageSrc);
		$('#'+overlay).fadeIn(speed);
	});
	$('#'+overlay+' a').click(function(event){
		event.preventDefault();
		$('#'+overlay).fadeOut(speed);
		setTimeout(function(){ $('#'+overlay+' img').attr('src', loadingImage) }, speed);
	});

});

//the shortNav plugin
(function($) {
	$.fn.shortNav = function(
			navItemWidth,
			visibleNavItems,
			speed,
			galleryNavList,
			direction
		) {

	var navItemWidth = navItemWidth;																	
	var visibleNavItems = visibleNavItems;																
	var speed = speed;																				
	var navWidth = navItemWidth*visibleNavItems;
	var direction = direction;
	var numberOfImg = $('#'+galleryNavList+' li').length;
	var maxMarginLeft = -(numberOfImg*navItemWidth)+navWidth;
													 
	$(this).click(function(event){
		event.preventDefault();
		var marginLeftPx = $('#'+galleryNavList).css('marginLeft')
		var marginLeft = parseInt(marginLeftPx);
		if (direction == 'previous') {
			if (marginLeft == 0) { 
				return
			} else if (marginLeft > -navWidth) {
				$('#'+galleryNavList).animate({marginLeft:'0'}, speed);
			} else {
				$('#'+galleryNavList).animate({marginLeft:'+='+navWidth}, speed);
			}
		} else if (direction == 'next') {
			if (marginLeft == maxMarginLeft) {
				return
			} else if (marginLeft-navWidth < maxMarginLeft) {
				$('#'+galleryNavList).animate({marginLeft:maxMarginLeft}, speed);
			} else {
				$('#'+galleryNavList).animate({marginLeft:'-='+navWidth}, speed);
			}
		} else {
			return
		}
	});
	}
})(jQuery);