/*
 * Dieses Script erzeugt einen Übergang zwischen 2 Seiten
 * Dazu sucht es im Kontext bereich nach 2 DIV Feldern
 * Diese brauchen weder eine ID noch einen Namen nur eine Klasse.
 * Werden mehr als 2 gefunden, dann werden nur die ersten beiden benutzt und
 * der rest gelöscht!
 * EIngebettet muss das ganze in einem Container sein, der die Klasse
 * "ms_loader_main_frame" beseitzt
 *
 */



(function( $ ) {
    $.fn.loader = function(daten) {
        /// Variablen

        this.id = null;
        this.mainFrame = null;
        this.url = "s1.xhtml";
        this.lastUrl = "";
        this.callback = "";
        this.currentFrame = "";
        this.cache = false;
        this.loading = false;

        // ist keine ID angeben? Dann eine erstellen, basierend auf der aktuellen Zeit
        if(daten.id == null || daten.id == "undefined") {
            daten.id = new Date().getTime();
        }
        daten.id = new Date().getTime();
        this.id = daten.id;


        // Zuerst entfernen wir alle Elemente die in dem Frame sind
        $(this).children().remove();
        // Jetzt prüfen wir ob die this.id's schon vergeben sind
        if($('#ms_frame_' + this.id + '_1').length != 0 || $('#ms_frame_' + this.id + '_2').length != 0) {
            $(this).html("<b>Konnte den Loader nicht initialisieren, da die this.id schon vergeben ist</b>");
        }
        // in $(this) steht jetzt das Element das als MainFrame dienen soll
        // Als erstes einen Frame erzeugen
        $(this).append('<div class = "ms_loader_main_frame" id = "ms_loader_main_frame_' + this.id + '"></div>');
        // Und diesen in der variablen mainFrame speichern
        this.mainFrame = $('#ms_loader_main_frame_' + this.id, this);
        // Als erstes erzeugen wir jetzt 2 leere div 
        $('<div id = "ms_frame_' + this.id + '_1" class = "ms_loader_frame">Test 1</div>').appendTo(this.mainFrame);
        $('<div id = "ms_frame_' + this.id + '_2" class = "ms_loader_frame">Teeeeeeeeeeeest 2</div>').appendTo(this.mainFrame);
        // Jetzt die bethis.iden Frames in variable speichern
        this.frame1 = $('#ms_frame_' + this.id + '_1', this.mainFrame);
        this.frame2 = $('#ms_frame_' + this.id + '_2', this.mainFrame);
        
        // jetzt die Frames anpassen
        for(i = 1; i <= 2; i++) {
            $('#ms_frame_' + this.id + '_' + i, this.mainFrame).css("width", $(this).width());
            $('#ms_frame_' + this.id + '_' + i, this.mainFrame).css("height", $(this).height());
        }
        // Frame 2 schon direkt ausblenden
        this.frame2.css("top", "-" + $(this).height() + "px", this.mainFrame);

        // Aktuellen Anzeige Frame festsetzen
        this.currentFrame = this.frame1;
        this.nextFrame = this.frame2;

        this.setUrl = function(url) {
            this.lastUrl = this.url;
            this.url = url;
            return this;
        }

        this.load = function() {
            // Wenn gerade ein Document geladen wird
            // mache nichts
            if(this.loading) {
                return;
            }

            neu = this.nextFrame;
            alt = this.currentFrame;
            mainFrame = this.mainFrame;
            self = this;

            // Makieren das wir gerade etwas laden
            this.loading = true;

            // Den neuen Frame positionieren
            this.nextFrame.css("top", "-" + $(this).height() + "px");

            $.ajax({
                url: this.url,
                type: this.type,
                dataType: "html",
                success: function (data) {
                    neu.html(data);
                    neu.animate( {
                        top: 0
                    }, "normal");
                    alt.animate({
                        top: self.height()
                        }, "normal", function() {
                        //alert("current: " + self.currentFrame.attr("id") + "| next: " + self.nextFrame.attr("id"));
                        temp = self.currentFrame;
                        self.currentFrame = self.nextFrame;
                        self.nextFrame = temp;
                        self.loading = false;
                    //alert("current: " + self.currentFrame.attr("id") + "| next: " + self.nextFrame.attr("id"));
                    });
                }
            })
        }
        
        
        // Die übergänge
        return this;
      
    };
})( jQuery );