(function( $ ) {
    $.fn.imageSlider = function(daten) {
        /// Variablen
        this.images = new Array();
        this.currentImage = 0;
        this.maxImages = 0;
        this.currentFrame = 1;
        this.height = 0;
        this.width = 0;
        // Als aller erstes holen wir alle Bilder aus dem DIV uns speichern diese ab
        // Zugleichspeichern wir deren anzahl um diese nicht
        // Immer prüfen zu müssen
        this.images = $(this).children("img");
        this.maxImages = this.images.length;
        
        // Die Hähe / Breite des aktuellen Frames bestimmen
        this.height = $(this).css("height");
        this.width = $(this).css("width");
        // dann entfernen wir alle Elemente die in dem Frame sind
        $(this).children().remove();
        // Und fügen 2 neue div felder ein
        $(this).append('<div id="jImageSlider1" jisid = "1" class="jImageSliderFrame"></div>');
        $(this).append('<div id="jImageSlider2" jisid = "2" class="jImageSliderFrame"></div>');
        $(".jImageSliderFrame").css("width", this.width);
        $(".jImageSliderFrame").css("height", this.height);
        // Den zweiten Frame schieben wir jetzt direkt nach oben raus
        $("#jImageSlider2").css("top", "-"+this.height);
        // Jetzt können wir auch schon das erste Bild reinladen
        $("#jImageSlider1").html(this.images[0]);
        // Und die schleife starten
        
        nextImage =  function(currentImage, maxImages, images, currentFrame) {
            // Zuerst prüfen das dass richtige bildgezeigt wird
            if(currentImage == maxImages-1) {
                currentImage = 0;
            } else {
                currentImage++;
            }
            
            // Jetzt den angezeigten Frame suchen
            if(currentFrame == 1) {
                alt =   $("#jImageSlider1");
                neu =   $("#jImageSlider2");
                currentFrame = 2;
            } else {
                alt =   $("#jImageSlider2");
                neu =   $("#jImageSlider1");
                currentFrame = 1;
            }
            
            // Den neuen Frame noch einmal positionieren
            neu.css("top", -108);
            //alert(neu.css("top"));
            
            // Den inhalt von neu setzen
            neu.html(images[currentImage]);
            // Animieren
            neu.animate({
                top: 0
            }, 2000,"linear", function() {
                setTimeout(nextImage, 0, currentImage, maxImages, images, currentFrame);
            });
            alt.animate({
                top: 108
            }, 2000, "linear");
            
            //setTimeout(this.nextImage(), 1000);
        }
        
        //nextImage(this.currentImage, this.maxImages, this.images, this.currentFrame);
    }
})( jQuery );