/**
   * abb.js
   *
   * Funktionen zur Bilddarstellung
   *
   * @author Daniel Hoffmann
   * @package system
   */


  //# Variablen und Konstanten
  var prev = "prev";
  var next = "next";
  var arrGal = new Array();
  var idx = 0;

  // Eventverarbeitungsvariablen
  var onmouseover_aktiv, onmousover_verzoegerung = 300;

  // Platzhalteranimation
  var arrImgAktiv = new Array();
  var arrImgPlaha = new Array();
  for (var x=0; x<=35; x++) {
    if (x < 9) {arrImgPlaha[x] = new Image(); arrImgPlaha[x].src = pfadIntern + 'galerie/gag0' + (x + 1) + '.jpg';}
    else {arrImgPlaha[x] = new Image(); arrImgPlaha[x].src = pfadIntern + 'galerie/gag' + (x + 1) + '.jpg';}
  }
  var intAbbNr = 1;
  //#


  /**
   * Erzeugt eine Abbildung, ggf. mit Fancyboxoption
   *
   * @param srcBild Pfad und Dateiname der Standard-Abbildung
   * @param srcBildGross Pfad und Dateiname der Gross-Abbildung (hier nur als Anzeiger)
   * @param intBreite Breite des Bildes in Pixeln
   * @param intHoehe Hoehe des Bildes in Pixeln
   * @param strQuickinfo Hover-Titel des Standardbildes
   * @param funcJS Javafunktion zum Ausloesen der Grossbildanzeige
   */
  function _erzeugeAbbildung(arr) {
    var html = '';

    function _erzeugeKernbild(arr) {
      var html = '';
      html += '<img src="' + arr['srcBild'] + '" style="border: none;" ';
        if (arr['intBreite']) {html += 'width="' + arr['intBreite'] + '" ';}
        if (arr['intHoehe']) {html += 'height="' + arr['intHoehe'] + '" ';}
        html += 'onload="DeaktiviereImgPlaha(document.getElementById(\'abbildung' + intAbbNr + '\'),arrImgPlaha)" ';
        html += 'onerror="ZeigeImgPlaha(document.getElementById(\'abbildung' + intAbbNr + '\'),arrImgPlaha)" ';
      html += '/>';

      return html;
    }

    html += '<div id="abbildung' + intAbbNr + '">';

    //# falls dynamisch: mit Fancyboxoption einbinden
    if (arr['srcBildGross']) {
      html += '<a href="javascript: ' + arr['funcJS'] + '" title="' + arr['strQuickinfo'] + '" alt="" style="cursor: pointer;">';
        html += _erzeugeKernbild(arr);
      html += '</a>';
    }
    //# falls statisch: einfach einbinden
    else {
      html += _erzeugeKernbild(arr);
    }

    html += '</div>';

    return html;
  }


  /**
   * Erzeugt eine vollstaendige dynamische Abbildung mit automatischer Seitenkorrektur
   *
   * @param srcBild Pfad und Dateiname der Standard-Abbildung
   * @param srcBildGross Pfad und Dateiname der Gross-Abbildung (hier nur als Anzeiger)
   * @param intBreite Breite des Bildes in Pixeln
   * @param intHoehe Hoehe des Bildes in Pixeln
   * @param cssAbstand Abstandsangabe im CSS-Stil
   * @param cssAbstandOben Abstandsangabe im CSS-Stil
   * @param cssAbstandUnten Abstandsangabe im CSS-Stil
   * @param strKommentar Kommentar zum Bild
   * @param strUrheber Eigentuemer/Urheber
   * @param cssKommentarabstand Abstand zwischen Kommentar/Urheber und Bild
   * @param strQuickinfo Hover-Titel des Standardbildes
   * @param funcJS Javafunktion zum Ausloesen der Grossbildanzeige
   */
  function _erzeugeVollstaendigeAbbildung(arr) {
    var html = '';

    // Vorbereitungen
    var containerbreite = 550;
    var schwelle = 530;

    //# Vorbehandlung einiger Parameter
    if (!arr['cssAbstand']) {arr['cssAbstand'] = '0 0 0 0';}
    if (!arr['cssAbstandOben']) {arr['cssAbstandOben'] = 0;}
    if (!arr['cssAbstandUnten']) {arr['cssAbstandUnten'] = 0;}
    if (!arr['intHoehe']) {arr['intHoehe'] = 341;}
    if (!arr['intBreite']) {arr['intBreite'] = 550;}
    if (!arr['strKommentar']) {arr['strKommentar'] = 0;}
    if (!arr['cssKommentarabstand']) {arr['cssKommentarabstand'] = '0.2em';}
    if (!arr['strUrheber']) {arr['strUrheber'] = 0;}
    if (!arr['strUrheberObjektname']) {arr['strUrheberObjektname'] = 'Foto';}
    //#

    //# falls Abbildung kleiner als Fenster: zentral ausgeben, mit beidseitig angefuegtem Rahmen
    if (arr['intBreite'] <= schwelle) {

      var arrSeitenhintergrund = new Array ('pat002','pat004','pat005','pat006','pat009');
      var arrpos = Math.round(Math.random() * (arrSeitenhintergrund.length-1));
      var breiteRechts, breiteLinks;

      //## Streifenbreiten ermitteln
      x = (containerbreite - arr['intBreite']);
      if (x % 2) {x--;}
      breiteRechts = x/2;
      breiteLinks = containerbreite - arr['intBreite'] - breiteRechts;

      //## Layout aufbauen
      var cssBackgroundLinks = 'background: url(' + pfadLayout + arrSeitenhintergrund[arrpos] + '_l.jpg) top right;';
      var cssBackgroundRechts = 'background: url(' + pfadLayout + arrSeitenhintergrund[arrpos] + '_r.jpg) left;';
      var cssAbmessungen = 'width: ' + breiteLinks + 'px; height: ' + arr['intHoehe'] + 'px;';
      // Rahmen links
      html += '<div style="' + cssAbmessungen + cssBackgroundLinks + 'float: left;"></div>';
      // Abbildung zentral
      html += '<div style="' + cssAbmessungen + 'float: left;">';
        html += _erzeugeAbbildung(arr);
      html += '</div>';
      // Rahmen rechts
      html += '<div style="' + cssAbmessungen + cssBackgroundRechts + 'float: right;"></div>';
      // Korrektiv
      html += '<div style="clear: both"></div>';
    }
    //# falls Abbildung passgenau: ausgeben
    else {
      html += _erzeugeAbbildung(arr);
    }
    //#

    //# Kommentar/Urheber ausgeben
    if (arr['strKommentar'] || arr['strUrheber']) {
      html  += '<p style="margin-top: ' + arr['cssKommentarabstand'] + '; text-align: center; font-size: 0.69em;">';

      if (arr['strKommentar'] && arr['strUrheber']) {
        html  += arr['strKommentar'] + '<br /><span style="color: gray; text-transform: lowercase;">' + arr['strUrheberObjektname'] + ': ' + arr['strUrheber'] + '</span>';
      }
      if (arr['strKommentar'] && !arr['strUrheber']) {
        html  += arr['strKommentar'];
      }
      if (!arr['strKommentar'] && arr['strUrheber']) {
        html  += '<span style="color: gray; text-transform: lowercase;"">' + arr['strUrheberObjektname'] + ': ' + arr['strUrheber'] + '</span>';
      }

      html  += '</p>';
    }
    //#

    return html;
  }


  /**
   * Waehlt eine definierte Abbildung aus der Galerie
   *
   * Legt die aktuell anzuzeigende Abbildung ggf. unter Verwendung der globalen Variablen <idx> fest. Holt die Daten aus dem globalen Array <arrGal> und aktualisiert die Platzhalter in der Galerieumgebung sowie die Thumbnailliste.
   *
   * @param codeAbbNr (Nummer der Abbildung, 'next', 'prev')
   */
  function _Galerie_waehleAbbildung(codeAbbNr) {

    var html = '';

    // Thumbnailmarkierung aktualisieren
    document.getElementById('thumbnail' + idx).className = "thumbnail";

    // Neuen aktuellen Bildindex setzen
    if (codeAbbNr == "next") {idx = idx + 1;}
    if (codeAbbNr == "prev") {idx = idx - 1;}
    if (!isNaN(codeAbbNr)) {idx = codeAbbNr;}
    //Korrektiv
    if (idx > arrGal.length - 1) {
      idx = 0;
    } else {
      if (idx < 0) {
        idx = arrGal.length - 1;
      }
    }

    //# Daten der aktuellen Abbildung aus dem Galerie-Array auswerten, Code erzeugen
    img = new Image();
    img.src = arrGal[idx]['srcBildKlein'];
    var arrBilddaten = new Array();
    arrBilddaten['srcBild'] = img.src;
    arrBilddaten['intBreite'] = arrGal[idx]['intBreite'];
    arrBilddaten['intHoehe'] = arrGal[idx]['intHoehe'];
    arrBilddaten['strKommentar'] = arrGal[idx]['strKommentar'];
    arrBilddaten['strUrheber'] = arrGal[idx]['strUrheber'];
    arrBilddaten['strUrheberObjektname'] = arrGal[idx]['strUrheberObjektname'];
    arrBilddaten['cssAbstandOben'] = 0;
    arrBilddaten['cssAbstandUnten'] = 0;
    //## dynamisches Bild
    if (arrGal['strTyp'] == 'dynamisch') {
      imgGross = new Image();
      imgGross.src = arrGal[idx]['srcBildGross'];
      arrBilddaten['srcBildGross'] = imgGross.src;
      arrBilddaten['strQuickinfo'] = 'Klicken f&uuml;r Gro&szlig;ansicht';
      arrBilddaten['funcJS'] = 'OeffneFancybox(\'kleinbild' + idx + '\')';
      html += _erzeugeVollstaendigeAbbildung(arrBilddaten);
      // Fancybox aktivieren
      AktiviereFancybox();
    }
    //## statisches Bild
    if (arrGal['strTyp'] == 'statisch') {
      arrBilddaten['strQuickinfo'] = 'TOOLTIP';
      img.src = arrGal[idx]['srcBild'];
      arrBilddaten['srcBild'] = img.src;
      html += _erzeugeVollstaendigeAbbildung(arrBilddaten);
    }
    //#

    //# Thumbnail aktivieren, Abbildung darstellen
    document.getElementById('thumbnail' + idx).className = "thumbnailaktiv";
    document.getElementById("abbildung").innerHTML = html;

    // Platzhalteranimation aktivieren
    AktiviereImgPlaha(document.getElementById('abbildung' + intAbbNr),arrGal[idx]['intBreite'],arrGal[idx]['intHoehe'],arrImgPlaha);

    //# Periphere Informationen

    // Statusanzeige aktualisieren
    document.getElementById("galerieinfo").innerHTML = (idx + 1) + '/' + arrGal.length;

    // ggf. Formatierter Bildtext
    if (arrGal[idx]['htmlText']) {
      document.getElementById("abbildungstext").innerHTML = arrGal[idx]['htmlText'];
      document.getElementById("abbildungstext").style.display = 'block';
    } else {
      document.getElementById("abbildungstext").style.display = 'none';
    }
  }


  /**
   * Stellt das angegebene Element der Galerie als aktuelles Element dar.
   */
  function Galerie_waehleBild(codeAbbNr) {
    _Galerie_waehleAbbildung(codeAbbNr);
  }

  /**
   * Stellt das angegebene Element der Galerie als aktuelles Element zeitverzoegert dar.
   */
  function Galerie_waehleBildMouseover(codeAbbNr) {
    if (codeAbbNr != idx) {
      onmouseover_aktiv = window.setTimeout(function() {
        _Galerie_waehleAbbildung(codeAbbNr);
      }, onmousover_verzoegerung);
    }
  }

  /**
   *
   */
  function Event_regleMouseover() {
    window.clearTimeout(onmouseover_aktiv);
  }


  /**
   *
   */
  function _FancyboxEinbinden(intIndex,strPfad,strName,strTitle) {
    var strHtml = '';
    var strFancyname = strPfad + strName + 'b.jpg';

    // Code fuer Fancybox in verstecktem div (damit nicht durch Anklicken des Thumbnails aufrufbar)
    strHtml += '<div style="display: none;">';
      strHtml += '<a id="kleinbild' + intIndex +'" class="grouped_elements" rel="group1" href="' + strFancyname + '" title="' + strTitle + '">';
      strHtml += '<\/a>';
    strHtml += '</div>';

    return strHtml;
  }


  /**
   * Initialisierung der Galerieumgebung
   *
   * Baut anhand des Galerie-Arrays die Thumbnailliste einer Galerie auf, entscheidet, ob Fancy oder normal; befaehigt die Galerie zu Tastenaktionen und waehlt automatisch das erste Galeriebild aus.
   */
  function ErzeugeGalerie() {

    // Thumbnails erzeugen
    var html = '';
    for (var x=0; x<=(arrGal.length-1); x++) {
      html += arrGal[x]['htmlThumbnail'];
    }
    document.getElementById("thumbnails").innerHTML = '<div style="clear:both;"></div>' + html + '<div style="clear:both;"></div>';

    // Erstes Element der Galerie waehlen
    Galerie_waehleBild(0);

    // Tastenereignisse zuweisen: Extragalerie
    document.onkeydown = Events_Tastenaktionen;
  }


  /**
   * Erzeugt ein Bild-Thumbnail
   *
   * @param strBildname Dateinamerumpf der Abbildung
   * @param strPfad Pfad der Abbildung
   * @param index absoluter Index des zu erzeugenden Thumbnail
   * @param strKommentarFancy Kommentar zum Gross-Bild
   * @param strQuickinfo Quickinfo des Thumbnails
   */
  function _erzeugeBildThumbnail(arr) {
    var html = '';

    html += '<div class="thumbnail" id="thumbnail' + arr['index'] + '">';
      html += '<div class="imgdiv">';

        // HTML des eigentlichen Thumbnails
        html += '<img style="border: none"';
          html += ' onmouseover="Galerie_waehleBildMouseover(' + arr['index'] + ')" onmouseout="Event_regleMouseover()" src="' + arr['strPfad'];
            if (arr['strBildname'] < 1000) {html += '0';}
            if (arr['strBildname'] < 100) {html += '0';}
            if (arr['strBildname'] < 10) {html += '0';}
          html += arr['strBildname'] + 't.jpg"';
          html += ' alt="" title="' + arr['strQuickinfo'] + '"';
        html += '\/>';

        // ggf. Code fuer Fancybox in verstecktem div (damit nicht durch Anklicken des Thumbnails aufrufbar)
        if (arrGal['strTyp'] == 'dynamisch') {
          html += _FancyboxEinbinden(arr['index'],arr['strPfad'],arr['strBildname'],arr['strKommentarFancy']);
        }

      html += '<\/div>';
    html += '<\/div>';

    return html;
  }


  /**
   * Erzeugt ein Text-Thumbnail
   *
   * @param strBildname Dateinamerumpf der Abbildung
   * @param strPfad Pfad der Abbildung
   * @param index absoluter Index des zu erzeugenden Thumbnail
   * @param strKommentarFancy Kommentar zum Gross-Bild
   * @param strQuickinfo Quickinfo des Thumbnails
   * @param htmlThumbnailText Text des Thumnails (ggf. html-codiert)
   */
  function _erzeugeTextThumbnail(arr) {
    var html = '';

    html += '<div class="thumbnail" id="thumbnail' + arr['index'] + '" style="padding: 4px;">';

      // Text anstatt echtem Bild im Thumbnail
      html += '<p class="textthumbnail" onmouseover="Galerie_waehleBildMouseover(' + arr['index'] + ')" onmouseout="Event_regleMouseover()">' + arr['htmlThumbnailText'] + '</p>';

      // ggf. Code fuer Fancybox in verstecktem div (damit nicht durch Anklicken des Thumbnails aufrufbar)
      if (arrGal['strTyp'] == 'dynamisch') {
        html += _FancyboxEinbinden(arr['index'],arr['strPfad'],arr['strBildname'],arr['strKommentarFancy']);
      }

    html += '<\/div>';

    return html;
  }


  /**
   * Fuegt der Galerie ein Element hinzu
   *
   * @param strBildname Dateinamerumpf der Abbildung
   * @param strPfad Pfad der Abbildung
   * @param strQuickinfo Quickinfo des Thumbnails
   * @param htmlThumbnailText Text des Thumnails (ggf. html-codiert)
   * @param intBreite Breite des Bildes in Pixeln
   * @param intHoehe Hoehe des Bildes in Pixeln
   * @param strKommentar Kommentar zum Bild
   * @param strUrheber Eigentuemer/Urheber
   * @param strUrheberObjektname Bezeichnung des Eigentuemers/Urhebers
   */
  function GaleriePush(arr) {

    // Abbildung dem Galerie-Array hinzufuegen
      var arrAbb = new Array();

      arrAbb['intBreite'] = arr['intBreite'];
      arrAbb['intHoehe'] = arr['intHoehe'];
      arrAbb['strKommentar'] = arr['strKommentar'];
      arrAbb['strUrheber'] = arr['strUrheber'];
      if (!arr['strUrheberObjektname']) {arrAbb['strUrheberObjektname'] = 'Foto';}
      else {arrAbb['strUrheberObjektname'] = arr['strUrheberObjektname'];}
      arrAbb['htmlText'] = arr['htmlText'];

      if (arrGal['strTyp'] == 'statisch') {
        arrAbb['srcBild'] = arr['strPfad'] + arr['strBildname'] + 'n.jpg';
      }

      if (arrGal['strTyp'] == 'dynamisch') {
        arrAbb['srcBildKlein'] = arr['strPfad'] + arr['strBildname'] + 'n.jpg';
        arrAbb['srcBildGross'] = arr['strPfad'] + arr['strBildname'] + 'b.jpg';

        // Anpassung des Bildtitels in der Fancybox
        arr['strKommentarFancy'] = '';
        if (arr['strKommentar']) {
          arr['strKommentarFancy'] += arr['strKommentar'];
          if (arr['strUrheber']) {
            arr['strKommentarFancy'] += '<br />(' + arrAbb['strUrheberObjektname'] + ': ' + arr['strUrheber'] + ')';
          }
        }
        else {
          if (arr['strUrheber']) {
            arr['strKommentarFancy'] += arrAbb['strUrheberObjektname'] + ': ' + arr['strUrheber'];
          }
        }
      }

      // Codeschnipsel des Thumbnails
      arr['index'] = arrGal.length;

      if (arr['htmlThumbnailText']) {
        arrAbb['htmlThumbnail'] = _erzeugeTextThumbnail(arr);
      }
      else {
        arrAbb['htmlThumbnail'] = _erzeugeBildThumbnail(arr);
      }

    arrGal.push(arrAbb);
  }


  /**
   * Verknuepft Aktionen mit Tastatureingaben.
   */
  function _Events_Tastenaktionen(umgebung,tastencode) {

    if (umgebung == 'galerie') {
      if (tastencode == 37) { //Pfeil rechts
        Galerie_waehleBild(prev);
      }
      if (tastencode == 39) {//Pfeil links
        Galerie_waehleBild(next);
      }
    }
  }


  /**
   * Erlaubt die Rechts-Links-Navigation durch die Galerie mit den Pfeiltasten.
   */
  function Events_Tastenaktionen(Ereignis) {
    var tastencode;

    //#fuer Firefox
    if (!Ereignis) {Ereignis = window.event;}
    //#

    //# Tastencode ermitteln
    if (Ereignis.which) {//Netscape Syntax
      tastencode = Ereignis.which;
    }
    else {
      if (Ereignis.keyCode) {//Microsoft Syntax
        tastencode = Ereignis.keyCode;
      }
    }
    //#

    _Events_Tastenaktionen('galerie',tastencode);
  }


  /**
   *
   */
  function AktiviereImgPlaha(container,breite,hoehe,plahabildarr) {

    container.style.height = hoehe + 'px';
    container.style.width = breite + 'px';
    container.style.backgroundColor = '#c0c0c0';
    container.style.backgroundPosition = 'center';
    container.style.backgroundRepeat = 'no-repeat';

    // Animation
    var i = 1;
    arrImgAktiv[0] = window.setInterval(function() {
      container.style.backgroundImage = 'url(' + plahabildarr[i-1].src + ')';
      if (i % 36) {i++;} else {i=1;}
    },(30 + Math.round(Math.random() * 70)));

    // Inkrementierung des globalen Abbildungszaehlers
    intAbbNr++;
  }

  /**
   *
   */
  function DeaktiviereImgPlaha(container,plahabildarr) {
    window.clearInterval(arrImgAktiv[0]);
    container.style.backgroundColor = '#c0c0c0';
    container.style.backgroundPosition = 'center';
    container.style.backgroundRepeat = 'no-repeat';
    container.style.backgroundImage = 'url(' + plahabildarr[0].src + ')';
  }

  /**
   *
   */
  function ZeigeImgPlaha(container,plahabildarr) {
    window.setTimeout(function() {
      window.clearInterval(arrImgAktiv[0]);
      container.style.backgroundColor = '#c0c0c0';
      container.style.backgroundPosition = 'center';
      container.style.backgroundRepeat = 'no-repeat';
      container.style.backgroundImage = 'url(' + plahabildarr[0].src + ')';
    }, 2400);
  }


  /**
   *
   */
  function OeffneFancybox(id) {
    $('#'+ id).trigger('click');
  }


  /**
   *
   */
  function AktiviereFancybox() {

    $('a#single_image').fancybox({

      'overlayShow':true,
      'centerOnScroll':true,
      'overlayOpacity':0.5,
      'opacity':false,
      'showCloseButton':false,
      'transitionIn':'elastic',
      'transitionOut':'elastic',
      'speedIn':300,
      'speedOut':100,
      'autoscale':false,
      'padding':9,
      'titleShow':true,
      'titlePosition':'inside',
      'titleFormat':formatiereFancyboxTitle
    });

    $('a#image_bm').fancybox({

      'overlayShow':false,
      'overlayShow':true,
      'overlayOpacity':0,
      'opacity':false,
      'showCloseButton':false,
      'transitionIn':'elastic',
      'transitionOut':'elastic',
      'speedIn':300,
      'speedOut':100,
      'autoscale':false,
      'padding':9,
      'titleShow':true,
      'titlePosition':'inside',
      'titleFormat':formatiereFancyboxTitle
    });

    $('a.grouped_elements').fancybox({

      'overlayShow':true,
      'centerOnScroll':true,
      'overlayOpacity':0.5,
      'cyclic':true,
      'padding':9,
      'opacity':true,
      'autoScale':false,
      'autoDimensions':false,
      'transitionIn':'fade',
      'speedIn':200,
      'speedOut':200,
      'changeSpeed':300,
      'showCloseButton':false,
      'titleShow':true,
      'titlePosition':'inside',
      'titleFormat':formatiereFancyboxTitle_Galerie
    });
  }


  /**
   *
   */
  function formatiereFancyboxTitle(title, currentArray, currentIndex, currentOpts) {
    var html = '';

    if (title) {
      html = '<div id="single_image-title">';
        html += '<span onclick="$.fancybox.close();">Fenster schlie&szlig;en</span>';
        html += '<b>' + title + '</b>';
      html += '</div>';
    }

    return html;
  }


  /**
   *
   */
  function formatiereFancyboxTitle_Galerie(title, currentArray, currentIndex, currentOpts) {
    var html;

    html = '<div id="single_image-title">';
      html += '<span onclick="$.fancybox.close();">Fenster schlie&szlig;en</span>';
      html += (title && title.length ? '<b>' + title + '</b>' : '' ) + 'Bild ' + (currentIndex + 1) + ' von ' + currentArray.length;
    html += '</div>';

    return html;
  }