// GLOBALE VARIABLE
var constMaxIconsPerRow = 4 // Anzahl Icons pro Zeiel
var constMaxNumberOfRows = 4;  // = Zahl angezeiger Zeilen, die mit Icons gefüllt werden können - nicht müssen!!!
var constShiftIconHoriz = 40;  // horizontaler Versatz der Icons
var constShiftIconVert = 40;   // vertikaler Versatz der Icons
var constIconWidth = 25;
var constIconHeight = 25;
var constSiteWidth = 800;
var constSiteHeight = 600;
var constStartTop = "50px"; //Anfang der Darstellung.
// var glblStrPicSource = "";
var glblCurrIndex = -99;
var glblStrTypeOfArt = "";
// ========================================================================
function fnCenterAll(){
  var startTop = 0;
  var vHeight
   // getestet mit IE, Chrome, FireFox
   vHeight = document.documentElement.clientHeight;

   if (vHeight > constSiteHeight){
      startTop = (vHeight - constSiteHeight)/2;
   }
   document.getElementById("idDivContainer").style.top = startTop+ "px";
}

function fnPrepareIcons(strTypeOfArt){
      fnSetAllIconsUnvisible();
      glblStrTypeOfArt =  strTypeOfArt;
      fnFillFrame("img/bg_steine.jpg");
      document.getElementById("idDivLupe").style.visibility = "hidden";
      switch (strTypeOfArt) {
            case "OBJEKTE":
                  glblStrTypeOfArt = "OBJEKTE";
                  var intNumberOfItems = SOURCE_OBJEKTE.length ;
                  var arrayListeSrc = SOURCE_OBJEKTE;
                  break;
            case "OEFFENTLICH":
                  glblStrTypeOfArt = "OEFFENTLICH";
                  var intNumberOfItems = SOURCE_OEFFENTLICH.length;
                  var arrayListeSrc = SOURCE_OEFFENTLICH;
                  break;
            default:
                  alert("strTypeOfArt nicht gefunden.");
                  break;
            }
         // Für wie viele Zeilen sind Bilder vorhanden?
         var intNumberOfRows = Math.ceil((intNumberOfItems -1)/constMaxIconsPerRow);
          // Vorbereitete Felder für Icons mit Bildern belegen und VISIBLE schalten
          var i = 0;
          while(i < (constMaxIconsPerRow * intNumberOfRows)){
          // alert(constMaxIconsPerRow * intNumberOfRows);
            strDivIcon = "idDivIcon_" + i;
            strIdImgIcon = "idImgIcon_" + i;
            document.getElementById(strDivIcon).style.visibility = "visible";
            document.getElementById(strIdImgIcon).width = constIconWidth;
            document.getElementById(strIdImgIcon).height = constIconHeight;

            // nur so lange fuellen, wie Vorrat - der Rest der Zeile bleibt mit Dummy-Icon gefüllt
            if (i < intNumberOfItems -1 ){
               document.getElementById(strIdImgIcon).src = "img/"+arrayListeSrc[i+1];
            } else {
               document.getElementById(strIdImgIcon).src = "img/dummyTransparent_25x25.png";
            }
            i++;
      } // for
} // function

function fnSetAllIconsUnvisible(){
     // Jedes einzelne Icon unsichtbar machen
     // Wieder mit dummy-Icons vorbelegen. = Auffüllen der letzten Zeile.
      var i= 0;
      while (i < (constMaxIconsPerRow * constMaxNumberOfRows)){
         strDivIcon = "idDivIcon_" + i;
         document.getElementById(strDivIcon).style.visibility = "hidden";
         i = i+1;
      }
}

function fnCreateDummyIcons(){
      // Platzhalter fuer Icons anlegen, mit transparentem Dummy-Icon fuellen
      // Variablen wie intNumberRows, intShiftIconHoriz usw. sind bei "functions.js" zentral definiert
      // document.getElementById("idImgLupe").style.visibility = "hidden";
      var nIndex=0; var nRow=0; var i=0;
      while (nRow < constMaxNumberOfRows){
          strTop = "top:" + nRow * constShiftIconVert + "px; ";
          // eine Zeile
          i=0;
          while (i < constMaxIconsPerRow){
             strLeft = "left:" + i * constShiftIconHoriz + "px; ";
             var strDivIcon = "idDivIcon_" + nIndex;
             var strIdImgIcon = "idImgIcon_" + nIndex;

             var strTemp = "<div id= '" + strDivIcon + "'  class='divDummyIcon' "
                 strTemp = strTemp + " style='position:absolute; visibility:hidden; "
                 strTemp = strTemp + strLeft + strTop + "'>"
                 strTemp = strTemp + " <a id= 'idLink_" + nIndex + "' href = 'javascript:fnShowImgBig(" + nIndex + ")'> "
                 strTemp = strTemp + " <img id='" + strIdImgIcon + "'"
                 strTemp = strTemp + " src='img/dummyTransparent_25x25.png'"
                 strTemp = strTemp + " class='picDummyIcon' >";
                 strTemp = strTemp + " </a>"
                 strTemp = strTemp + " </div>"
             document.write(strTemp);
             i = i+1;
             nIndex = nIndex + 1;
         }
         nRow = nRow +1;
         }
      //         strTemp = constMaxIconsPerRow *
      // document.getElementById("idDivLupe").style.left = "152px";
      // alert("XX");
}
function fnFillFrame(strContent){
         // wird nur bei Texten angesprungen
         document.getElementById("idIframe").src= strContent;
         fnSetAllIconsUnvisible();
         document.getElementById("idDivLupe").style.visibility = "hidden";
}

function fnShowImgBig(nIndex){
   // nach Click auf Icon gesamtes Bild anzeigen
   // Bildnummerierung beginnt bei "1"
   // Index aufheben, fuer Detailanzeige
   // Lupe bereit stellen, aber nur für  für OBJEKTE
   if (glblStrTypeOfArt == "OBJEKTE"){
      document.getElementById("idDivLupe").style.visibility = "visible";
   }
   glblCurrIndex = nIndex;
   strIdImgIcon = "idImgIcon_" + nIndex;
   strImgSource = document.getElementById(strIdImgIcon).src
   document.getElementById("idIframe").src = strImgSource;
   document.getElementById("idImgLupe").src = "imgAux/iconLupePlus_25x25.jpg";
}

function fnShowPicDetail(){
   // Stark vergroessertes Bild
   // Lupe toggeln und Vergroessern/Verkleinern
         var xx = document.getElementById("idImgLupe").src
         if (xx.indexOf("imgAux/iconLupePlus_25x25.jpg") > -1){ // wenn nicht enthalten, dann Rückgabe von -1
            // = Lupe PLUS => Bild vergroessern und Lupe auf MINUS
            document.getElementById("idImgLupe").src = "imgAux/iconLupeMinus_25x25.jpg";
            // ======SPEZIELL FUER FIREX ERFORDERLICH ====================================================================
            // FF verkleinert beim Aufruf eines großen Bildes im Frame automatisch(!) das Bild
            // und stellt eine eigene Lupe bereit.
            // Ziel ist aber, dass das Detail-Bild nach Click auf Lupe im Frame sofort(!) vergrößert angezeigt wird.
            // Deshalb hier besondere Lösung wegen Firefox: Als Frame.SRC wird html-Datei angegeben
            // ACHTUNG: Adressierung innerhalb der HTML-Dateien beachten!
            // (Generieren von HTML aus String und Verwendung als SOURCE im I-Frame ist sehr aufwändig und unzuverlässig)
            // Deshalb: Für jedes Bild eine HTML-Datei vor-gefertigt im Verzeichnis "html"
            // ===========================================================================================
            var strImg = SOURCE_OBJEKTE[glblCurrIndex + 1];
            // Zugeordnete Bildnummer aus FESTEM Dateiformat ermitteln: "objekt_13.jpg"
            var strImgNo = strImg.substr(7,2);
            var strContent = "html/showImg_" + strImgNo + ".html";
         } else {
            // = Lupe MINUS => Bild wieder auf Normalgröße setzen ; LUPE AUF PLUS
            document.getElementById("idImgLupe").src = "imgAux/iconLupePlus_25x25.jpg";
            var strContent = "img/" + SOURCE_OBJEKTE[glblCurrIndex + 1];
         }
         document.getElementById("idIframe").src = strContent;
}