$(document).ready(function() {
						   
	
	// GALERIE INIT - ERSTES BILD LADEN
	//$('div.gallery div:first-child a').each(function() { loadImage(this); });
	
	$('.next_image').live('click', function () {
		var now = $('div[openimage="true"]');
		$(now).attr('openimage', 'false');
		$(now).children().children().fadeOut(500, function() {
			if($(now).attr('last') == 'true') {
				$(now).parent().children('div:first').attr('openimage', 'true').children().children().fadeIn();
			} else {
				loadImage($(now).next().children());	
			}
		});
		return false;
	});
	
	$('.prev_image').live('click', function () {
		var now = $('div[openimage="true"]');
		$(now).attr('openimage', 'false');
		$(now).children().children().fadeOut(500, function() {
			if($(now).attr('first') == 'true') {
				loadImage($(now).parent().children('div:last').attr('openimage', 'true').children());
			} else {
				loadImage($(now).prev().children());	
			}
		});
		return false;
	});
	
	
	$('.img').live('click', function() {
		$('div[openimage="true"]').attr('openimage', 'false');
		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'}, 100, 'swing', function() {
					// BILD EINFADEN																							 
					$(clicked_div).parent().children('div:first').children().children().fadeIn();
					$(clicked_div).parent().children('div:first').attr('openImage', 'true');
				});
			// LETZTES BILD NOCH NICHT ERREICHT
			} else {
				var container = $(clicked_div).next().children();
				$(clicked_div).next().attr('openImage', 'true');
				// NEUES BILD SCHON GELADEN ?
				if($(container).attr('rel') == 'loaded') {
					$(clicked_div).parent().animate({height: $(container).attr('imgheight') + 'px'}, 100, 'swing', function() {
						$(container).children().fadeIn();																															
					});
				// NEUES BILD NOCH NICHT GELADEN
				} else {
					var img = new Image();				
					$(clicked_div).parent().animate({height: $(container).attr('imgheight') + 'px'}, 100, '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",
								  'class': "gallery_img"
						  });
						  $(container).attr('rel', 'loaded')
					});
				}
			}
		});
		return false;
	});
	
});

function loadImage(obj) {
	  if($(obj).attr('rel') == 'loaded') {
		  $(obj).children().fadeIn();
		  $(obj).parent().attr('openImage', 'true');
	  } else {
		  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",
					'class': "gallery_img"})
			$(obj).attr('rel', 'loaded');
			$(obj).parent().attr('openImage', 'true');
	  }
}
	
function setGalleryNavigation() {
	if($('#gallery_navigation').attr('ready') == 'false') {
		var navStr = '';
		var classMark = '';
		$('.gallery').each(function(index) {
			if(index == 0) {
				classMark = 'mark';
				loadImage($('#gallery_'+$(this).attr('glid')+' div:first-child a'));
			}					
		});
	}
}