$(document).ready(function(){
	// is this a page with thumbnails?
	if($('#thumbs').length > 0) {
		active = 0;
		pos = $('#thumbs').position();
		pos = pos.left;
		$('#position').html((active+1)+'/'+$('#thumbs').children().length);
		$('#next').click(function(){
			var length = $('#thumbs').children().length;
			if ((active+1) < length) active++;
			else active = 0;
			var np = pos - active * 880;
			$('#position').html((active+1)+'/'+$('#thumbs').children().length);
			$('#thumbs').animate({ left: np }, 500);
			return false;
		});
		$('#prev').click(function(){
			var length = $('#thumbs').children().length;
			if ((active-1) >= 0) {
				active--;
				var np = pos - active * 880;
				$('#position').html((active+1)+'/'+$('#thumbs').children().length);
				$('#thumbs').animate({ left: np }, 500);
			}
			return false;
		});
	
	} // end if thumbnails

	
	// => use same for images but dynamically load images into boxes
	// is this a page with thumbnails?
	if($('#photos').length > 0) {
	
		// change this depending on the requested photo
		active = parseInt($("[name='key']").val());
		
		pos = $('#photos').position();
		pos = pos.left;
		$('#position').html((active+1)+'/'+$('#photos').children().length);
		
		// go to active photo
		//$('#photo'+active).attr('src', photos[active]);
		
		//$('#photo'+active).parents('a').css('background', 'url('+photo[active]+') 0 0 no-repeat');
		var np = pos - active * 880;
		$('#photos').animate({ left: np }, 0);
		$('a.next').click(function(){	 
			var length = $('#photos').children().length;
			if ((active+1) < length) active++;
				else active = 0;
				// if($('#photo'+active).attr('src') != photos[active]) $('#photo'+active).attr('src', photos[active]);
				if($('#photo'+active).parents('a').css('background') == '') 
					$('#photo'+active).parents('a').css('background', 'url('+photos[active]+') 0 0 no-repeat');
					var np = pos - active * 880;
					$('#position').html((active+1)+'/'+$('#photos').children().length);
					$('#photos').animate({ left: np }, 400, 'linear', function(){
						if($('#photo'+(active+1)).length > 0) {
							$('#photo'+(active+1)).parents('a').css('background', 'url('+photos[(active+1)]+') 0 0 no-repeat');
						}
				});
			var whichtitle = '[name=\'title_'+(active)+'\'\]';
			var whichcaption = '[name=\'caption_'+(active)+'\'\]';
			var caption = '<p>'+$(whichtitle).val()+'<br />'+$(whichcaption).val()+'</p>';
			$('#description').html(caption);
			return false;
		});
		$('#prev').click(function(){
			var length = $('#photos').children().length;
			if ((active-1) >= 0) {
				active--;
				/*
				if ($('#photo'+active).attr('src') != photos[active]) 
					$('#photo'+active).attr('src', photos[active]);
				*/
				var np = pos - active * 880;
				$('#position').html((active+1)+'/'+$('#photos').children().length);
				$('#photos').animate({ left: np }, 400);
			}
			var whichtitle = '[name=\'title_'+(active)+'\'\]';
			var whichcaption = '[name=\'caption_'+(active)+'\'\]';
			var caption = '<p>'+$(whichtitle).val()+'<br />'+$(whichcaption).val()+'</p>';
			$('#description').html(caption);
			return false;
		});
	
	} // end if thumbnails

});