$(document).ready(function(){

	var fg_images = $("#image-container img");
	 fg_images.hide();
	
	generateContainer(".slideshow", fg_images);
    var bg_images = $(".slideshow div");
	
    bg_images.parent().addClass("loading");		
    bg_images.hide();
	
	//funtion slideShow erst ausführen wenn Vordergrund Bilder geladen sind
	 fg_images.imagesLoaded(function(){slideShow(bg_images, 12000, fg_images);}, true);
});




function slideShow(obj, speed, fg_images){
    if (!obj.length) 
        return;
    if (obj.length <= 1) 
        return;
    var array = [];

	
    var fn = {
		/**
		 * Die eigentliche Schleife zur Animation der Bilder wird mit der Funktion fn.loop() erzeugt
		 * diese fn istfür das automatische Aufrufen der fn.blend() zuständig. Die fn.loop() wird
		 * zeitverzögert mit setTimeout rekrsiv aufgerufen
		 */
        loop: function(){      
            fn.blend();
            setTimeout(fn.loop, speed);
        },
		/**
		 * der eigentliche Mechanismus läuft in der fn.blend() ab.
		 * das Element, dass die Klasse current enthält wird gefiltert
		 * die css Klasse .current wird in der Reihe der Bilder genau einmal vergeben
		 * das so gefilterte jQuery Object blendet die Elemente aus und entfernt die Klasse .current
		 */
		
        blend: function(){
            var current = obj.filter(".current")
			.fadeOut(6000)
			.removeClass("current");
			/**
			 * die Variable current wird mit folgender Struktur verändert
			 * es wird abgefragt ob es ein Img-Element current.next() gibt
			 * wenn ja da wird die variable current auf das nächste Element 
			 * in die Reihe von Bildern gesetzt.
			 * Wenn nicht (also beim letzten Bild angekommen) wird das erste
			 * Img-Element in der variable gespeichert
			 */
            current = (current.next().length) ? 
			current.next() : 
			obj.first();
            
			//anschließend wird das nächste oder das erste Bild eingeblendet
            current.fadeIn(6000)
			.addClass("current");
        },
		/**
		 * @param {Object} array
		 * Ermittelt das Bild mit der größten Höhe, indem die einzelnen Heigth-Werte
		 * in einem Array abgelegt werden.
		 * Funktion ermittelt den Maximalwert
		 */
		
        getLargest: function(array){
			
            return Math.max.apply(Math, array); //liefert den Maximalwert der Höhen
        }
    }
    obj.hide();
    fg_images.each(function(){
	
        array.push($(this).height()); //legt die einzelnen Heigth-Werte der Bilder in ein Array
       
    });
	obj.height(fn.getLargest(array)); //setzt den Maximalwert der Höhe
    obj.parent().animate({ //animiert das erste Bild in der Höhe
       // height: fn.getLargest(array) //setzt den Maximalwert
   }, 500); //dauer
    obj.parent().removeClass("loading"); //da alle Bilder geladen sind, kann die Klasse loading entfernt werden
    obj.first().fadeIn(3000, function(){ //und das erste Bild kann eingeblendet werden
        setTimeout(fn.loop, speed); //Callback Fn, mit einer zeitlichen Verzögerung wird die Fn loop() aufgerufen
    }).addClass("current");
    
      
}
function generateContainer(div, foreground_images) {
	var object = $(div);
	 var img_array = [];
	
	foreground_images.each(function(){
	
        img_array.push($(this).attr("src")); //legt die einzelnen Bild Namen in ein Array      
    });
	for(var i = 0; i < img_array.length; i++) {
		object.append('<div style="display: none; background-image: url(\'' + img_array[i] + '\');" />');
	}
	
}