/* **************/
/* Puzzle-Spiel */
/* **************/
// Java-Script (C) 2008 by Thomas Dickertmann

var GlobalPic1   = null;                                             // Globale Variable: Pointer auf 1. Bild
var GlobalPic2   = null;                                             // Globale Variable: Pointer auf 2. Bild
var GlobalAction = null;                                             // Globale Variable: Counter fuer Zoom-Animation
var FlashCounter = 0;                                                // Globale Variable: Counter fuer Fading-Animation
var GlobalFade   = new Array(                                        // Globales Array: Fading-Farben
  "#000000", "#202020", "#404040", "#606060", 
  "#808080", "#A0A0A0", "#C0C0C0", "#E0E0E0",
  "#FFFFFF", "#E0E0E0", "#C0C0C0", "#A0A0A0", 
  "#808080", "#606060", "#404040", "#202020"
);

// ========
//  onload
// --------
window.onload=function() {                                           // Autostart beim Laden der Seite
  document.getElementById("NoJS").innerHTML = "";                    // "Kein JS"-Fehlermeldung loeschen
  var PuzPics = document.getElementsByName("PuzPic");                // Liste aller Puzzel-Bilder erstellen
  for ( var x = 0; x < PuzPics.length; x++ ) {                       // Liste abarbeiten
    PuzPics[x].onclick = Puzzle;                                     // Event-Handler setzen fuer OnClick
    PuzPics[x].id = "Bild " + x;                                     // Dem Bild eine ID zuweisen
  } // for
} // onload

// ========
//  Puzzle
// --------
// Diese Funktion wird beim Klick auf eines der Puzzle-Teile aufgerufen.
function Puzzle( ) {
  var FirstClick = document.getElementById("FirstClick");            // <p id="FirstClick"></p> speichert die ID des 1. Mausklicks
  if ( FirstClick.innerHTML == "" ) {                                // 1. Mausklick?
    FirstClick.innerHTML = this.id;                                  // Falls ja: Bild-ID merken
    this.style.border="solid 1px #00FF00";                           // Bild mit Rahmen markieren
    this.width  -= 2;                                                // Platz fuer den blinkenden Rahmen schaffen
    this.height -= 2;
    FlashBorder();
    
  } else {                                                           // 2. Mausklick?
    if ( this.id == FirstClick.innerHTML ) {                         // Wieder auf's selbe Bild?
      this.width  += 2;                                              // Der Platz vom blinkenden Rahmen steht wieder zur Verfuegung
      this.height += 2;
      FirstClick.innerHTML = "";                                     // Auswahl aufheben
      this.style.border="";                                          // Markierungsrahmen loeschen
    } else {                                                         // 2. Mausklick auf ein anderes Bild?
      GlobalPic1 = document.getElementById(FirstClick.innerHTML);    // Pointer auf 1. Bild ermitteln
      GlobalPic2 = this;                                             // Pointer auf 2. Bild ermitteln
      GlobalAction = 0;                                              // Counter fuer Animation
      GlobalPic1.width  += 2;                                        // Der Platz vom blinkenden Rahmen steht wieder zur Verfuegung
      GlobalPic1.height += 2;
      SwapPics();                                                    // Bilder animiert vertauschen
      FirstClick.innerHTML = "";                                     // Auswahl aufheben
      GlobalPic1.style.border="";                                    // Markierungsrahmen loeschen
    } // if
  } // if-else
  //alert("Puz!");
} // Puzzle

// ==========
//  SwapPics 
// ----------
// Bilder vertauschen (inkl. Zoom-Animation)
function SwapPics (  ) {                                             // Funktion zum Vertauschen der Bilder
  GlobalAction++;                                                    // naechster Animationsschritt
  
  if ( GlobalAction == 7 ) {                                         // Halbzeit der Animation?
    var Temp       = GlobalPic1.src;                                 // Dreieckstausch der beiden Bilder
    GlobalPic1.src = GlobalPic2.src;
    GlobalPic2.src = Temp;
  } // if
  
  if ( GlobalAction < 8 ) {                                          // 1. Haelfter der Animation?
    GlobalPic1.width  = GlobalPic1.width  - 8;                      // Beide Bilder etwas verkleinern
    GlobalPic1.height = GlobalPic1.height - 8;
    GlobalPic2.width  = GlobalPic2.width  - 8;
    GlobalPic2.height = GlobalPic2.height - 8;
    window.setTimeout("SwapPics()", 20);                             // Naechster Animationsschritt in 20ms
  } else if ( GlobalAction < 15 ) {                                  // 2. Haelfter der Animation?
    GlobalPic1.width  = GlobalPic1.width  + 8;                      // Beide Bilder etwas vergroessern
    GlobalPic1.height = GlobalPic1.height + 8;
    GlobalPic2.width  = GlobalPic2.width  + 8;
    GlobalPic2.height = GlobalPic2.height + 8;
    window.setTimeout("SwapPics()", 20);                             // Naechster Animationsschritt in 20ms
  } // if-else
} // SwapPics

// =============
//  FlashBorder
// -------------
// Fading-Animation des Rahmens eines Puzzel-Teils
function FlashBorder ( ) {
  PicID = document.getElementById("FirstClick").innerHTML;           // Bild-ID des 1. Mausklicks ermitteln
  if ( PicID != "" ) {                                               // Ist das Bild noch angeklickt?
    Pic1 = document.getElementById(PicID);                           // Pointer auf Bild ermitteln
    FlashCounter++; if ( FlashCounter > 15 ) { FlashCounter = 0; }   // Naechster Animationsschritt
    Pic1.style.border = "solid 1px " + GlobalFade[FlashCounter];     // Rahmen neu einfaerben
    window.setTimeout("FlashBorder()", 30);                          // Naechster Animationsschritt in 30ms
  } // if-else
} //FlashBorder