///////////////////////////////////////////////////////////////////////////
//                                                                       //
//  Name:   gallery.js                                                   //
//  Autor:  Philipp Schäufele                                            //
//  Email:  philipp.schaeufele[at]gmx.de                                 //
//                                                                       //
//  Funktionen zum Preloaden und Anzeigen von Bildern                    //
//                                                                       //
//  Diese Funktionen sind urheberrechtlich geschützt! Verwendung (auch   //
//  partiell) nicht ohne meine schriftliche Genehmigung. Auch in         //
//  kommerziellem Umfeld wird sich die "Entlohnung" normalerweise durch  //
//  eine Namensnennung und einen Link erledigt haben!                    //
//                                                                       //
///////////////////////////////////////////////////////////////////////////


/* Default-Werte */
var Show_FadeIn      = true;     // große Bilder langsam Einblenden  

var Show_MinMarg = 20;           // minimaler Abstand des großen Bildes vom Fensterrand

var Gallery_ThumbDefaultDir = "./thumb/";
var Gallery_ImgDefaultDir   = "./img/";

var glassPic = "../../Symbols/24-zoom-in.png";

var Show_ThumbWidth  = 256;       // Standard-Vorschaubild-Breite
var Show_ThumbHeight = 192;       // Standard-Vorschaubild-Höhe


/*
                       { 
                         name: "name",
                         title: "titel",
                         origSrc:  "",
                         thumbSrc: "", 
                         thumbWidth: 256,
                         thumbHeight: 192,
                         photographer???                         }, 
*/

/****************************************************
 * Diese Funktion wird aufgerufen, sobald die Seite *
 * - inklusive Vorschaubilder ??? - geladen wurde   *
 ****************************************************/
function galleryPageLoaded()
{    
  // Show_FadeIn hat als default = TRUE !
  if (cookieExists("fadeIn"))
  {
    if (cookieGetValue("fadeIn") == 'true')
      Show_FadeIn = true;
    else
      Show_FadeIn = false;
  }

  if (cookieExists("preload"))
  {
    if (cookieGetValue("preload") == 'true')
      PreLoad(0);    // preload first picture
  }
  else
    PreLoad(0);    // preload first picture
}

/****************************************************
 * Diese Funktion wird aufgerufen, wenn die Größe   *
 * der Seite verändert wurde                        *
 ****************************************************/
function pageResized()
{
  ResizeBigPic();
}


/****************************************************
 * Diese Funktion wird aufgerufen, wenn gescrollt   *
 * wird                                             *
 ****************************************************/
function pageScrolled()
{
  ResizeBigPic();
}

/****************************************************
 * an den Stellen im Text einfügen, an denen ein    *
 * Bild gezeigt werden soll                         *
 * Number: Bildnummer oder Bildname                 *
 * Alignment: 
 ****************************************************/
// BUGME: noch zusätzlich link erzeugen für nicht Java-Scriptler
// BUGME: abfrage, ob überhaupt ein Thumb da ist
// BUGME center
// BUGME: aspect ratio
// BUGME: Alignment "pano" für Panoramen. Mit <!-- PANO --> alle kennzeichnen solange
function Pic(Number, Alignment)
{
  // leeren Aufruf ignorieren
  // BUGME: funktioniert so nicht, da Bild Nummer 0 so auch ignoriert wird!
  // if (Number == "")
  //   return;

  if (typeof Number == 'string')
  {
    // wenn ein Name übergeben wurde die entsprechende Bildnummer suchen
    for (PicNum=0; typeof Pictures[PicNum] != 'undefined'; PicNum++)
    {
      if (Pictures[PicNum].name == Number)
      {
        Number = PicNum;
        break;
      }  
    }
  }
  else if (typeof Number != 'number')
    return;

  // Bild vorhanden?
  if (!Pictures[Number])
  {
    document.write ("Pic #" + Number + ": No image info!<br>");
    return false;
  }

  // Thumbnail-Namen zusammenbauen, wenn nicht vorhanden
  if (!Pictures[Number].thumbSrc)
  {
    // wenn ein Name vorhanden ist, dann den Dateinamen auf dem Default-Pfad generieren
    if (Pictures[Number].name)    
    {
      if (typeof Gallery_ThumbDefaultDir != "undefined")
        Pictures[Number].thumbSrc = Gallery_ThumbDefaultDir + Pictures[Number].name;
      else
      {
        document.write ("Pic #" + Number + ": Name, but no default thumb directory!<br>");
        return false;
      }
    }
    else
    {
      document.write ("Pic #" + Number + ": No thumb found!<br>");
      return false;
    }
  }

  // Standardwerte setzen, wenn indiv. Werte nicht vorhanden 
  if (!Pictures[Number].thumbWidth)
    Pictures[Number].thumbWidth = Show_ThumbWidth;
  if (!Pictures[Number].thumbHeight)
    Pictures[Number].thumbHeight = Show_ThumbHeight;

  // Titel zusammensetzen
  var title;
  if (Pictures[Number].title)
    title = Pictures[Number].title;     
  else
    title = Pictures[Number].name;  
  
  if (Pictures[Number].photographer)
    title += " (Foto: " + Pictures[Number].photographer + ")";

  // DEBUG
  if (cookieExists("debugAlerts") && cookieGetValue("debugAlerts") == 'true')
    title += " (Picture Name: " + Pictures[Number].name + ")";
  

  if (Alignment == "left")
  {
    document.write ('<span style="float:left; position:relative;');
    document.write ('            margin-right:15px; margin-bottom:10px;" ');
  }
  else if (Alignment == "center")
  {
    document.write ('<span style="float:left; position:relative;');       // float:left; left:10px;
    //document.write ('            margin-bottom:15px;   ');
    document.write ('            margin:10px; " ');
    //document.write ('            width:' + Pictures[Number].thumbWidth + 'px;" ');
  }  
  else if (Alignment == "nomargin")
  {
    document.write ('<span style="float:left; position:relative;');
    document.write ('            margin-bottom:10px;" ');
  }
  else 
  {
    document.write ('<span style="float:right; position:relative;');
    document.write ('            margin-left:15px; margin-bottom:10px;" ');
  }

  document.write ('     id="PicDiv' + Number + '">'); 
  

  document.write ('<img src="' + Pictures[Number].thumbSrc + '" ');
  document.write ('     alt="' + title + '"       ');
  document.write ('     title="' + title + '" ');
  document.write ('     id="Pic' + Number + '"     ');
  document.write ('     onClick="_gaq.push([\'_trackEvent\', \'Pictures\', \'ShowBig\', \'' + Pictures[Number].name + '\']); ShowBig(' + Number + ')"           ');  
  document.write ('     width="' + Pictures[Number].thumbWidth + '" ');
  document.write ('     height="' +  Pictures[Number].thumbHeight + '" ');
  document.write ('>');

  document.write ('</span>');
}



/****************************************************
 * Zeigt alle "übriggebliebenen" Bilder an.         *
 * Sollte am Ende jeder Seite aufgerufen werden.    *
 ****************************************************/
function ShowOtherPics()
{
  // Bilder da?
  if (typeof Pictures == 'undefined')
    return;

  // wenn die Struktur in der Vorlage noch keine Daten enthält ebenfalls abbrechen
  if (Pictures[0].name == "")
    return;
    
  var firstPic = true;
  
  // nicht im Fließtext vorhandene Bilder anzeigen
  for (var PicNum=0; typeof Pictures[PicNum] != 'undefined'; PicNum++)
  { 
    if (Pictures[PicNum].name == "")     // leere Einträge igonrieren
      continue;
  
    var PicDiv = document.getElementById("PicDiv" + PicNum);

    if (!PicDiv)     // wird das Bild verwendet?
    {
      // erstes Bild? ==> Überschrift
      if (firstPic)
      {
        firstPic = false;
        document.write ('<br style="clear:both"/>');
        document.write ('<p id="otherPics"> Weitere Bilder: </p>');
        document.write ('<p style="text-align:center;" >');
      }
        
      Pic(PicNum,"center");   // Nein ==> anzeigen!
    }

  }  
  
  document.write ('</p>');
}


/****************************************************
 * startet das Preloading des entsprechenden Bildes *
 ****************************************************/
// BUGME: abfrage, ob überhaupt ein OrigPic angegeben ist
function PreLoad(PicNum)
{
  // Gallery überhaupt vorhanden?
  if (typeof Pictures == 'undefined')
    return false;

  if (!Pictures[PicNum])
  {
//    DebugOut ("Error preloading Pic " + PicNum + ": No information structure\n");
    return false;
  }
  

  // Image-Namen prüfen
  if (!Pictures[PicNum].origSrc)
  {
    if (Pictures[PicNum].name)    // wenn ein Name vorhanden ist, dann den Dateinamen auf dem Default-Pfad generieren
    {
      if (typeof Gallery_ImgDefaultDir != "undefined")
        Pictures[PicNum].origSrc = Gallery_ImgDefaultDir + Pictures[PicNum].name;
      else
      {
        document.write ("Pic #" + PicNum + ": Name, but no default directory!<br>");
        return false;
      }
    }
    else
      Pictures[PicNum].origSrc = "";     // sonst hängt der Ablauf!
  }


  var TestBild = new Image();
  Pictures[PicNum].Image = TestBild;
  TestBild.onload  = function() {PicPreloaded(PicNum); };     
  TestBild.onerror = function() {PicError(PicNum); };
  TestBild.onabort = function() {PicError(PicNum); };
  TestBild.name = "großes Bild";
  TestBild.src    = Pictures[PicNum].origSrc;

  window.status = "Bild Nummer " + (PicNum+1) + " von " + Pictures.length + " geladen.";

}



/****************************************************
 * wird nach dem Laden eines Bildes aufgerufen      *
 * ==> Lupe anzeigen                                *
 * ==> nächstes Bild preloaden                      *
 ****************************************************/
// BUGME: Glass preloaden?
// BUGME: Hintergrund des PNG bei älteren IEs nicht transparent ==> GIF benutzen?
// BUGME: Symbolverzeichnis unabhängig (nicht gscheit möglich beim Firefox)
function PicPreloaded(PicNum)
{       
  var PicDiv = document.getElementById("PicDiv" + PicNum);
  
  // Lupe anzeigen
  if (PicDiv)     // wird das Bild überhaupt verwendet?
  {
    var Glass    = new Image();
    var GlassDiv = document.createElement("span");
    Glass.src = glassPic;
    Glass.title = "Dieses Bild kann durch Anklicken vergrößert werden.";
    GlassDiv.style.position="absolute";
    GlassDiv.style.right   = 5 + "px"; 
    GlassDiv.style.bottom  = 5 + "px"; 
    GlassDiv.onclick = function() { _gaq.push(['_trackEvent', 'Pictures', 'ShowBig', Pictures[PicNum].name ]);
                                    ShowBig(PicNum); };
    
    PicDiv.appendChild(GlassDiv);         
    GlassDiv.appendChild(Glass);

    PicDiv.style.cursor = "pointer";
  }

  Pictures[PicNum].loaded = true;
  
  // BUGME: width im IE!!!
  if (!Pictures[PicNum].origWidth)
    Pictures[PicNum].origWidth = Pictures[PicNum].Image.width;
  if (!Pictures[PicNum].origHeight)
    Pictures[PicNum].origHeight = Pictures[PicNum].Image.height;
  
  // nächstes Bild
  if ((PicNum+1) < Pictures.length)      
    window.setTimeout (function(){PreLoad(PicNum+1);},1);          // setTimeout ist notwendig, um einen Stack overflow zu verhindern
}
      
function PicError(PicNum)
{
//  DebugOut ("Pic " + PicNum + " Error!\n");
  
  if ((PicNum+1) < Pictures.length)      
    window.setTimeout (function(){PreLoad(PicNum+1);},1);          // setTimeout ist notwendig, um einen Stack overflow zu verhindern
}



/****************************************************
 * Wird aufgerufen, wenn auf ein (kleines) Bild     *
 * geklickt wird. Zeigt es dann größer.             *
 ****************************************************/
// BUGME: Faden erst onload starten
// BUGME: z-Index?
// BUGME: Schatten erzeugen (noch ein Prblem mit dem Frame-Scrollbar!)
// BUGME: Positions-Info an Map übermittlen
// BUGME: Einen Rand lassen
// BUGME: bei überbreiten Bildern, speziell Panoramas einen Scrollbalken einblenden
function ShowBig(PicNum)
{
  if (!Pictures[PicNum].loaded)
    return;

  //DebugOut ("Showing big: Picture " + PicNum + ".\n");

  // Dimensionen des Client-Fensters 
  var cw = document.body.clientWidth;
  var ch = document.body.clientHeight;
  var cx = document.body.scrollLeft;
  var cy = document.body.scrollTop;

  // Schatten erzeugen
  var shadowDiv = document.createElement("div");
  shadowDiv.style.position        = "absolute";
  shadowDiv.style.top             = cy + "px";
  shadowDiv.style.left            = cx + "px";
  shadowDiv.style.width           = "100%";
  shadowDiv.style.height          = ch + "px";
  shadowDiv.style.backgroundColor = "#000";
  shadowDiv.style.zIndex = 10000;  // damit es oberhalb der OSM-Karte angezeigt wird
  shadowDiv.id = "shadowDiv";
  setOpacity (shadowDiv,60);
  document.body.appendChild(shadowDiv);

  // Div für das Bild erzeugen
  var BigPic = Pictures[PicNum].Image;
  var BigPicDiv = document.createElement("div");   
  BigPicDiv.style.position = "absolute";
  BigPicDiv.style.zIndex = 10001;
  BigPicDiv.id     = "BigDiv";
  BigPicDiv.picNum = PicNum;
  BigPic.id        = "BigPic";
  BigPic.title     = Pictures[PicNum].title;   // BUGME: unescape oder so!
  
  // picture
  var pw = Pictures[PicNum].origWidth;  
  var ph = Pictures[PicNum].origHeight;  

  // bei Bedarf herunterskalieren
  if ( (pw + 2*Show_MinMarg) > cw)
  {
    ph *= (cw-2*Show_MinMarg)/pw;
    pw = cw-2*Show_MinMarg;
  } 
  if ( (ph + 2*Show_MinMarg) > ch)
  {
    pw *= (ch-2*Show_MinMarg)/ph;
    ph = ch-2*Show_MinMarg;
  } 

  // Mittig ausrichten
  var px = cx + cw/2 - pw/2;
  var py = cy + ch/2 - ph/2;

  // Bildposition und -größe eintragen
  BigPicDiv.style.top  = py + "px";
  BigPicDiv.style.left = px + "px";
  BigPic.width  = pw;
  BigPic.height = ph;
  
  BigPic.onclick = function() {RemoveBig()};

  document.body.appendChild(BigPicDiv);
  BigPicDiv.appendChild(BigPic);

  if (Show_FadeIn)
  {
    // Einblenden starten
    setOpacity(BigPic, 10);    
    window.setTimeout (function(){imgFadeIn(PicNum,20);},50);
  }  

}

/* Funktion, die alle 50ms das Bild weiter einblendet */
function imgFadeIn(PicNum, Level)
{
  setOpacity(Pictures[PicNum].Image, Level);    

  if (Level <= 100)     
    window.setTimeout(function(){imgFadeIn(PicNum,Level+10)},50);     
}  

/* Setzt die Transparenz eines Bildes  */
function setOpacity(obj, opacity) 
{
  opacity = (opacity > 100)?99.999:opacity;

  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";

  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;

  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;

  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;
}



/****************************************************
 * Sollte bei einem Resize-Event aufgerufen werden  *
 * Positioniert das Bild neu                        *
 ****************************************************/
function ResizeBigPic()
{

  var BigPicDiv = document.getElementById("BigDiv");

  if (!BigPicDiv)
    return;    

  var BigPic    = document.getElementById("BigPic");
  var shadowDiv = document.getElementById("shadowDiv");
  var picNum    = BigPicDiv.picNum;

  // DebugOut ("Page resized!"+ document.getElementById("BigDiv") +"\n");

   // Dimensionen + Scroll-Position des Client-Fensters holen
  var cw = document.body.clientWidth;
  var ch = document.body.clientHeight;
  var cx = document.body.scrollLeft;
  var cy = document.body.scrollTop;
  
  // picture
  var pw = Pictures[picNum].origWidth;  
  var ph = Pictures[picNum].origHeight; 

  // bei Bedarf herunterskalieren
  if ( (pw + 2*Show_MinMarg) > cw)
  {
    ph *= (cw-2*Show_MinMarg)/pw;
    pw = cw-2*Show_MinMarg;
  } 
  if ( (ph + 2*Show_MinMarg) > ch)
  {
    pw *= (ch-2*Show_MinMarg)/ph;
    ph = ch-2*Show_MinMarg;
  } 

  // Mittig ausrichten
  var px = cx + cw/2 - pw/2;
  var py = cy + ch/2 - ph/2;

  // Bildposition und -größe eintragen
  BigPicDiv.style.top  = py + "px";
  BigPicDiv.style.left = px + "px";
  BigPic.width  = pw;
  BigPic.height = ph;
  
  // Schatten nachführen
  shadowDiv.style.top             = cy + "px";
  shadowDiv.style.left            = cx + "px";
  shadowDiv.style.height          = ch + "px";
}


      
// BUGME: muss aus dem BigPicDiv auch noch das Image entfernt werden?
// BUGME: evtl. auch den Fade-Timer entfernen
function RemoveBig()
{
  // DebugOut ("Removing Picture " + BigPicDiv + ".\n");
  
  //var BigPicDiv = document.body.BigDiv;
  //DebugOut (BigPicDiv + "\n");

  document.body.removeChild(document.getElementById("BigDiv"));
  
  document.body.removeChild(document.getElementById("shadowDiv"));
}