/////////////////////////////////////
// Eine Art Popup für Bildanzeigen //
/////////////////////////////////////
//
// In Links, die auf eine Bilddatei verweisen, kann diese Funktion
// in den Link eingebettet werden:
// <a href=" ... " onclick="return js_popup(this, 'Bildunterschrift');"> ... </a>
//
// Dazu muss diese Javascript-Datei im Dokument geladen sein:
// <script type="text/javascript" src="/html/js_popup.js"></script>
//
// Ausserdem setzt die Funktion einen <div>-Bereich mit einer ID voraus:
// <div id="js-popup"></div>
//
// Der zweite Parameter 'Bildunterschrift' ist optional. Sollte er
// fehlen, so wird folgendes als Bildunterschrift angezeigt:
// - Steht im Link selbst nur Text, so wird dieser zur Bildunterschrift.
// - Sollte im Link eine Vorschauansicht (Thumbnail) stehen, so wird
//   der im alt-Attribut des Thumbnails stehende Text angezeigt. Fehlt
//   diese Angabe (nicht valides XHTML!), so erscheint "unbennantes Bild".
//
// erstellt von Felix Riesterer (Felix.Riesterer@gmx.net)


function js_popup(linkobjekt, untertitel)
   {
   var sanduhr_bild = "images/sanduhr.gif";		// Dieser Bild-Pfad muss an die eigene Web-Umgebung angepasst werden!

   var popup = document.getElementById("js-popup");
   var html_code = '';
   var breite = "100";
   var hoehe = "50";

   if(untertitel == null) untertitel = linkobjekt.innerHTML;
   if(untertitel.toLowerCase().lastIndexOf("<img") >= 0)
      {
      linkobjekt.bild = linkobjekt.getElementsByTagName("img")[0];
      if(linkobjekt.bild.getAttribute("alt"))
         {
         if(linkobjekt.bild.attributes["alt"].value)
            {
            untertitel = linkobjekt.bild.attributes["alt"].value;
            }
          else
            {
            untertitel = linkobjekt.bild.attributes["alt"].nodeValue;;
            }
         }
       else
         {
         untertitel = "";
         }
      }

   testbild = new Image();           // testbild wird globale Variable!
   testbild.src = linkobjekt.href;   // testbild.src enthält die Zieladresse des Bildes
   testbild.untertitel = untertitel; // testbild.untertitel enthält den anzuzeigenden Untertitel

   html_code += '<table border="0" cellpadding="0" cellspacing="0">';
   html_code += '<tr><td style="text-align: center; background: #efffef; width: 98px; height: 48px;"><img src="' + sanduhr_bild + '" alt="Sanduhr" /></td></tr>';
   html_code += '</table>';

   popup.innerHTML = html_code;
   popup.style.position = "absolute";
   js_zentrieren(breite, hoehe);
   popup.style.display = "block";

   if(navigator.userAgent.toLowerCase().lastIndexOf("msie") >= 0)
      {
      testbild.attachEvent("on" + "load", js_positionieren);
      testbild.attachEvent("on" + "error", js_positionieren);
      popup.attachEvent("on" + "click", js_unpop);
      }
    else
      {
      testbild.addEventListener("load", js_positionieren, false);
      testbild.addEventListener("error", js_positionieren, false);
      popup.addEventListener("click", js_unpop, false);
      }

   if(testbild.width > 0) js_positionieren();
   return false;
   }


function js_positionieren()
   {
   var x_beenden_bild = "images/close.jpg";	// Dieser Bild-Pfad muss an die eigene Web-Umgebung angepasst werden!
   var x_pos, y_pos;
   var breite = 90;
   var hoehe = 90;
   var html_code = '<img id="x-beenden" alt="schlie&szlig;en" />';
   var popup = document.getElementById("js-popup");

   if(testbild.width > breite || testbild.height > hoehe)
      {
      breite = testbild.width;
      hoehe = testbild.height;
      }

   if(navigator.userAgent.toLowerCase().lastIndexOf("msie") < 0)
      {
      testbild.removeEventListener("load", js_positionieren, false);
      testbild.removeEventListener("error", js_positionieren, false);
      }
    else
      {
      testbild.detachEvent("on" + "load", js_positionieren);
      testbild.detachEvent("on" + "error", js_positionieren);
      }

   html_code += '<table border="0" cellpadding="0" cellspacing="0"><tr>';
   html_code += '<td width="90" height="90" style="text-align: center;">';
   html_code += '<img id="anzeigebild" alt="" />';
   html_code += '</td></tr>';
   html_code += '<tr><td class="zentriert">' + testbild.untertitel + '</td></tr>';
   html_code += '</table>';

   popup.style.display = "none";
   popup.innerHTML = html_code;
   js_zentrieren(breite, hoehe);

   document.getElementById("x-beenden").src = x_beenden_bild;
   document.getElementById("anzeigebild").src = testbild.src;

   popup.style.display = "block";
   }


function js_zentrieren(breite, hoehe)
   {
   var popup = document.getElementById("js-popup");

   if(window.innerWidth)
      {
      x_pos = Math.ceil((window.innerWidth - breite)/2 + window.pageXOffset) + "px";
      y_pos = Math.ceil((window.innerHeight - hoehe)/2 + window.pageYOffset) + "px";
      }
    else
      {
      var IE = (document.compatMode && document.compatMode == "CSS1Compat") ? document.documentElement : document.body || null;
      x_pos = Math.ceil((IE.offsetWidth - breite)/2 + IE.scrollLeft) + "px";
      y_pos = Math.ceil((IE.offsetHeight - hoehe)/2 + IE.scrollTop) + "px";
      }

   popup.style.left = x_pos;
   popup.style.top = y_pos;
   }


function js_unpop()
   {
   var popup = document.getElementById("js-popup");
   if(navigator.userAgent.toLowerCase().lastIndexOf("msie") >= 0)
      {
      popup.detachEvent("on" + "click", js_unpop);
      }
    else
      {
      popup.removeEventListener("click", js_unpop, false);
      }
   popup.style.display = "none";
   return false;
   }