/* BILDER LADE UND ANZEIGE FUNKTION


ZUM EINBINDEN und AUFRUFEN:

<script type="text/javascript" src="D:/Johannes/homepages/Meine Homepage/Slide/slide/slide.js"></script>
<script language="JavaScript">
         function bilderladen () {
                 var bilder = { id: "Bildanzeige",
                                images: ["images/bild1.jpg", "images/bild2.jpg", "images/bild3.jpg",
                                         "images/bild4.jpg", "images/bild5.jpg", "images/bild6.jpg"]   };
                 if (!window.meine_slideshow) {window.meine_slideshow = new bildereinladen(bilder);}
         }
         window.onload = bilderladen;
</script>

<a href="#" onclick="if (window.meine_slideshow) { meine_slideshow.blaettern()} return false;">
<img src="images/b.jpg" alt="" id="Bildanzeige"></a>

ZUM Anwenden

<a href="#" onclick="if (window.meine_slideshow) { meine_slideshow.blaettern(-1)} return false;">Rückwärts</a></p>
<a href="#" onclick="if (window.meine_slideshow) { meine_slideshow.blaettern(1)} return false;">Vorwärts</a></p>
<a href="#" onclick="if (window.meine_slideshow) { meine_slideshow.anzeigen(1)} return false;">BILD NR 2</a>



DER CODE:
*/



// Bilder einladen und Anzeige vorbereiten
function bildereinladen(bilder) {

         //Prüfen des Inhaltes ob mindestens 2 Bilder zur Vorschau da sind.
         if (!bilder.id || !document.getElementById(bilder.id)|| bilder.images.length < 2) {return new Boolean(false);}

         // Variable i und altes ist die ID der aktuelle Bildanzeige definieren
         var i, old = document.getElementById(bilder.id);

         this.id = bilder.id;            //die aktuelle Bilderanzeige id
         this.images = new Array();      //das array der zu ladenen Bilder
         this.Bildnr = 0;                //das erste Bildnr (wird dann gezählt)

         this.bildelement = document.createElement("span");     //Neues Bildelement erstellen
         this.bildelement.className = bilder.id;            //Dem Bildelement CSS hinzufügen

         old.parentNode.replaceChild(this.bildelement, old);  //Neues Bildelement durch altes austauschen

         //Schleife über alle zu ladene bilder
         for (i = 0; i < bilder.images.length; i++) {
                  this.images[i] = document.createElement("img");
                  this.images[i].src = bilder.images[i];
                  this.images[i].alt = "";

                  if (i == 0) {this.bildelement.appendChild(this.images[i]);}
                 }


        //Überblende der Bilder
        this.ueberblenden = function (zaehler) {

                 //Aktuelle Blende definieren, uebergabe der Bilder
                 var blende = this, imgs = this.bildelement.getElementsByTagName("img");

                 //Wenn kein Zaehler definiert dann setzen
                 zaehler = zaehler || 0;

                 //Das neue Bild die transparenz verringern
                 imgs[1].style.opacity = zaehler/100;
                 imgs[1].style.filter = "alpha(opacity=" + zaehler + ")"; // IE?

                 //Das alte Bild die transparenz erhöhen
                 var y = 100-zaehler;
                 imgs[0].style.opacity = 1-zaehler/100;
                 imgs[0].style.filter = "alpha(opacity=" + y + ")"; // IE?

                 //Den Zähler erhöhen
                 zaehler = zaehler + 3;

                 //Wenn Zähler unter 100 ist, dann...
                 if (zaehler <= 100) {

                         //ganz kurz warten und die Funktion Überblenden von vorne beginnen
                         window.setTimeout(function () { blende.ueberblenden(zaehler); }, 1);
                 //sonst...
                  }else{
                         // die klassifizierung des neuen Bildes wegnehmen
                         imgs[1].className = "";

                         // das alte Bild wegnehmen
                         this.bildelement.removeChild(imgs[0]);
                  }
        };

        //Bilder weiterblättern
        this.blaettern = function (Richtung) {

                 // Wenn Überblendung gerade stattfindet funktion abbrechen
                 if (this.bildelement.getElementsByTagName("img").length > 1){return false;}

                 // Ist keine Richtung angegeben dann weiter klicken
                 Richtung = Richtung || 1;

                 if (Richtung == -1) //Ist die Richtung rückwärts?
                 {//Ja:
                         //Wenn BildNr größer 0 ist dann: BildNr verkleinern, sonst BildNr auf max. BildNr setzen
                         this.Bildnr = (this.Bildnr > 0) ? this.Bildnr -1 : this.images.length -1;

                 }else{//Nein:
                         //Wenn BildNr kleiner der max. BildNr ist dann: BildNr erhöhen, sonst BildNr auf 0 setzen
                         this.Bildnr = (this.Bildnr < this.images.length -1) ? this.Bildnr +1 : 0;
                 }
                 //Nächste Bild
                 this.anzeigen();
        };


        //Neues Bild anzeigen:
        this.anzeigen = function (Bildnr) {

                 // Wenn Überblendung gerade stattfindet funktion abbrechen
                 if (this.bildelement.getElementsByTagName("img").length > 1){return false;}

                 // Wenn Bildnr wie das aktuelle Bild ist dann funktion abbrechen
                 if (Bildnr==this.Bildnr){return false;}

                 // Wenn anderes Bild (direkt aus von dem Thumbnails dann neue Bildnr definieren
                 this.Bildnr = (typeof(Bildnr)!="undefined")? Bildnr: this.Bildnr;

                 //Bild positionieren (CSS)
                 this.images[this.Bildnr].className = "newPic";

                 //Dem Objekt element ein neues Bild hinzufügen
                 this.bildelement.appendChild(this.images[this.Bildnr]);

                 //Überblednung beginnen
                 this.ueberblenden();
        };
   }
   function test() {alert(test)}