$(document).ready(function() {
						   
	
	// GALERIE INIT - ERSTES BILD LADEN
	$('div.gallery div:first-child a').each(function() { loadImage(this); });
	
	
	$('.img').live('click', function() {
		var clicked_div = this;
		//AKTUELLES BILD AUSFADEN
		$(this).children().children().fadeOut(500, function() { 
		//$(this).next().children().attr('rel', 'none');
			// IST LETZTES BILD DER SERIE ERREICHT?
			if($(clicked_div).attr('last') == 'true') {
				//ZUM ERSTEN BILD SPRINGEN
				var first = $(clicked_div).parent().children('div:first').children().children();
				// GALERIE-CONTAINER-GRÖSSE ANPASSEN
				$(clicked_div).parent().animate({height: $(first).attr('height') + 'px'}, 500, 'swing', function() {
					// BILD EINFADEN																							 
					$(clicked_div).parent().children('div:first').children().children().fadeIn();
				});
			// LETZTES BILD NOCH NICHT ERREICHT
			} else {
				var container = $(clicked_div).next().children();
				// NEUES BILD SCHON GELADEN ?
				if($(container).attr('rel') == 'loaded') {
					$(clicked_div).parent().animate({height: $(container).attr('imgheight') + 'px'}, 500, 'swing', function() {
						$(container).children().fadeIn();																															
					});
				// NEUES BILD NOCH NICHT GELADEN
				} else {
					var img = new Image();				
					$(clicked_div).parent().animate({height: $(container).attr('imgheight') + 'px'}, 500, 'swing', function() {
					// wrap our new image in jQuery, then:
						$(img)
						// once the image has loaded, execute this code
						  .load(function () {
						  // set the image hidden by default    
						  $(this).hide();
						  
						  // with the holding div #loader, apply:
						  $(container)
						  // remove the loading class (so no background spinner), 
						  //.removeClass('loading')
						  // then insert our image
						  .append(this);
						  
						  // fade our image in to create a nice effect
						  $(this).fadeIn();
						  })
						  
						  // if there was an error loading the image, react accordingly
						  .error(function () {
							// notify the user that the image could not be loaded
						  })
						  
						  // *finally*, set the src attribute of the new image to our image
						  .attr({src: $(container).attr('rel'),
								  width: $(container).attr('imgwidth'),
								  height: $(container).attr('imgheight'),
								  border: "0"})
						  $(container).attr('rel', 'loaded')
					});
				}
			}
		});
	});
	
});

function loadImage(obj) {
	  var img = new Image();
	  $(obj).parent().parent().css('height', $(obj).attr('imgheight') + 'px');
	  var container = obj;
	  // wrap our new image in jQuery, then:
	  $(img)
	  // once the image has loaded, execute this code
		.load(function () {
		// set the image hidden by default    
		$(this).hide();
		
		// with the holding div, apply:
		$(container)
		// remove the loading class (so no background spinner), 
		//.removeClass('loading')
		// then insert our image
		.append(this);
		
		// fade our image in to create a nice effect
		$(this).fadeIn();
		})
		
		// if there was an error loading the image, react accordingly
		.error(function () {
		  // notify the user that the image could not be loaded
		})
		
		// *finally*, set the src attribute of the new image to our image
		.attr({src: $(obj).attr('rel'),
				width: $(obj).attr('imgwidth'),
				height: $(obj).attr('imgheight'),
				border: "0"})
		$(obj).attr('rel', 'loaded')
		
	}