$(document).ready(function() {
	$('.grossansicht').hide();
	$('.grossansicht').css('position', 'absolute');
	$('#overview').css('position', 'absolute');
	$('#overview a').attr('href', '#');
	$('.grossansicht a').attr('href', '#');
	$('.img-next').click( function() { next(); })
	$('.img-previous').click( function() { previous(); })
	$('.img-overview').click( function() { overview(); })
	$('#overview a').click(function (){
		var el = $(this);
		$('#overview').fadeOut(500, function() {
			showImage(el);
		});
	});
	
	function showImage(el) {
		var newId = el.attr('id');
		var image = newId.replace('thumb', '');
		$('#galerie').data('current', image);
		$('#gross'+image).fadeIn().click(function() {
			next(); 
		});
	}
	
	function next() {
		var image = $('#galerie').data('current', image);
		if(image < 24) {
			var newImage = Number(image) + 1;
			var newImage = (Number(newImage) < 10) ? '0' + newImage : newImage;
			$('#gross'+image).fadeOut(500, function(){
				$('#galerie').data('current', newImage);
				$('#gross'+newImage).fadeIn().click(function() {
					next(); 
				});
			});
		}
		else {
			$('#gross'+image).fadeOut(500, function(){
				$('#overview').fadeIn();
				$('#galerie').data('current', '');
			});
		}
	}

	function previous() {
		var image = $('#galerie').data('current', image);
		if(image > 1) {
			var newImage = Number(image) - 1;
			var newImage = (Number(newImage) < 10) ? '0' + newImage : newImage;
			$('#gross'+image).fadeOut(500, function(){
				$('#galerie').data('current', newImage);
				$('#gross'+newImage).fadeIn().click(function() {
					next(); 
				});
			});
		}
		else {
			$('#gross'+image).fadeOut(500, function(){
				$('#overview').fadeIn();
				$('#galerie').data('current', '');
			});
		}
	}
	
	function overview() {
		var image = $('#galerie').data('current', image);
		$('#gross'+image).fadeOut(500, function(){
			$('#overview').fadeIn();
			$('#galerie').data('current', '');
		});
	}

});