/**
  Javascript für die Fotogalerie und das Auf- und Zuklappen der Kommentare und Trackbacks.

  Für die Aufklappfunktionalität ist nur die Funktion toggleElement(elementId) notwendig, 
  alle andere Funktionen dienen der Implementierung der Fotogalerie.

  Die Fotogalerie wurde ursprünglich wie Kommentare und Trackbacks behandelt, das heißt es
  konnte immer nur eine auf sein und auch nicht parallel mit einem Kommentar oder Trackback.

  Liste der Funktionen
  ====================

 ** Initialisiert/Öffnet Fotogalerie
 function showPhotos(elementId, picId)
 function initGallery(elementId,picId,isLoading)

 ** Initialisiert Scroller/Liste
 function fillList(picId, indexOfPic)
 function fillThumbs(picId, indexOfPic)

 ** Lädt neues Bild
 function scrollUp(picId)
 function scrollDown(picId)
 function setPicElements(index, picId)
 function checkButtonVisibility(picId, index, maxIndex)
 function setPic(index,picId)

 ** Hilfsfunktionen zur Verwaltung von Scroller/Liste
 function createImageTagForElement(picId)
 function createLinkForThumbnail(picId, fotos, index, elementToHighlight, classname, elementId)
 function createLinkarrayForListelement(listitem, offset, numOfPhotos)
 function createThumbnailListForElement(elementId, picId)
 function createListViewForElement(elementId, picId)
 function createLink2(imageLink, picId, linkarray)
 function createLink(listId, imageLink, picId, picNo)

 ** Highlighting-Funktionen für Scroller und Liste
 function highlightPhotoInListAndScroller(indexOfImage)
 function highlightPhotoInList(index)
 function highlightPhotoInScroller(index)
 function highlightElement(element, highlightArea)

 ** Öffnet/Schließt ein Element
 function toggleElement(elementId)
 function toggleElement2(elementId, ignoreCurrent)

 ** Hilfsfunktion
 function getCountOfListElements()

 Kurzübersicht der Elemente (id), die in einer Fotogalerie vorkommen:
 ====================

 fotoENTRYID         - Das div, daß die Fotogalerie enthält 
 fotoENTRYID-pfeil   - Der Pfeil vor dem Toggler
 fotoENTRYID-toggler - Der Link, der die Galerie öffnet. Das title-Attribut ist abhängig davon, ob die Galerie offen ist.
 fotoENTRYID-titel   - Die Überschrift über der Galerie (Fotogalerie), diese wird hervorgehoben, wenn die Galerie offen ist.
 picENTRYID          - Das img-Element, das die Großansicht des ausgewählten Bildes anzeigt. 
 picENTRYID-title    - Die Bildunterschrift des ausgewählten Bildes.

 */

// Pfade
var arrow = "/wjt/images/pfeil.gif";
var downarrow = "/wjt/images/pfeil_r.gif";

// CSS-Klassen
var arrowclass = "pfeil";
var downarrowclass = "pfeilrunter";
var highlightStyle = "aktuellesBild";
var nohighlightStyle = "nichtAktuellesBild";

// Zustandsvariablen
// Das aktuell geöffnete Element, das beim Öffnen eines anderen Elementes geschlossen wird.
var currentOpenElement = null;
// Die aktuell bearbeitete Fotogalerie entspricht einer picId. In der aktuellen Version der Templates sind alle Galerien offen, so daß das Konzept einer aktuellen Galerie nicht besonders eindeutig ist, deswegen sollte diese Variable gesetzt werden, bevor Funktionen aufgerufen werden, die von ihr abhängig sind. Dies sind insbesondere die Highlight-Funktionen.
var currentPhotoGallery = "";
// Liste der Bilder einer Galerie, wird in der HTML-Seite nach und nach gefüllt.
// [0] => URL des Thumbnails
// [1] => Breite des Thumbnails
// [2] => Höhe des Thumbnails
// [3] => Link zur Großversion des Bildes
// [4] => Untertitel des Bildes
// [5] => Rechte
var bilder = new Array();
// Zwischenspeicher für das aktuelle Bild einer Galerie sowie die Highlights
var fotocache = new Array();
// Wieviel Bilder werden sollen im Scroller angezeigt werden?
var numOfImagesInScroller = 4;
// Wieviel Bilder werden sollen in der Liste angezeigt werden?
var numOfImagesInList = 12;
// Befindet sich die Seite noch im Ladezustand?
var loading = false;

/**
  Stellt eine Fotogallerie dar. Dies beinhaltet das Erzeugen des HTMLs für die 
  Thumbnail-Liste beim ersten Aufruf sowie einen Aufruf von toggleElement2().
 */
function showPhotos(elementId, picId)
{
    // Wenn Element nicht sichtbar, Fotos einrichten
    if( document.getElementById(elementId).style.display != "block" ){
	initGallery(elementId,picId,false);
    }

    /* falls es oben nicht schon gesetzt wurde */
    currentPhotoGallery = picId;

    // Alles weitere erledigt toggleElement2()
    toggleElement2(elementId, true);
    return;
}

/**
  Initialisiert die Fotogalerie mit der ID elementId und der dazugehörenden picID. 
  Falls der Aufruf nicht zur Ladezeit der Seite (isLoading) erfolgt, wird das erste Bild der Galerie gesetzt.
 */
function initGallery(elementId,picId,isLoading)
{
    loading = isLoading;
    var fotos = bilder[picId];
    if( currentPhotoGallery != picId ){
	/* Muß hier schon gesetzt werden, weil fillThumbs davon abhängig ist. */
	currentPhotoGallery = picId;
	if( fotocache[picId] == undefined ){
	    fotocache[picId] = new Array();
	    fotocache[picId]["currentPhoto"] = 0;
	    fotocache[picId]["currentOffset"] = 0;
	    fotocache[picId]["currentOffsetForList"] = 0;
	    /* Beim ersten Mal muß die Liste angelegt werden. */
	    createThumbnailListForElement(elementId, picId);
	    createImageTagForElement(picId);
	    createListViewForElement(elementId, picId);
	}
    }
    document.images["pic"+picId].style.display = "block";
    setPic(fotocache[picId].currentPhoto, picId);
}

/** 
  Füllt die Listenansicht der Bilder, offset gibt an, bei welchem Bild der Scroller startet. 
 */
function fillList(picId, indexOfPic)
{
    var listId = "";
    var listElement;
    var fotos = bilder[picId];
    var index;
    var offset;
    var tmp;

    tmp = indexOfPic - Math.floor((getCountOfListElements() - 2 ) / 2);
    if( tmp < 0 ){
	tmp = 0;
    }
    else if( tmp > (fotos.length - 1) - getCountOfListElements() ){
	tmp = (fotos.length) - getCountOfListElements();
    }
    fotocache[picId]["currentOffsetForList"] = tmp;

    offset = fotocache[picId]["currentOffsetForList"];

    if( numOfImagesInList >= getCountOfListElements() ){
	if( offset + numOfImagesInList > fotos.length ){
	    offset = fotos.length - numOfImagesInList;
	}	
    }

    for( var i = 0; i < getCountOfListElements(); i++ ){
	var thumbId;
	var linkarray = createLinkarrayForListelement(i+1, offset, fotos.length);

	index = offset + i;
	listId = picId + "-li" + i;
	listElement = document.getElementById(listId);

	if( index >= fotos.length ){
	    listElement.style.display = "none";
	}
	else{
	    listElement.style.display = "inline";
	    if( linkarray.linkno == -1 ){
		listElement.innerHTML = linkarray.linktext;
	    }
	    else{
		listElement.innerHTML = createLink2(linkarray.linkno, picId, linkarray);
	    }
	}			
    }
}

/** 
  Füllt die Liste mit den Thumbnails der Bilder, offset gibt an, bei welchem Bild der Scroller startet. 
 */
function fillThumbs(picId, indexOfPic)
{
    var listId = "";
    var listElement;
    var fotos = bilder[picId];
    var index;
    var offset;
    var tmpOffset;
    var indexInScrollBar;

    indexInScrollBar = indexOfPic % numOfImagesInScroller;
    offset = Math.floor (indexOfPic / numOfImagesInScroller) * numOfImagesInScroller;

    /*
       Wenn fotos.length kein Vielfaches von numOfImagesInScroller ist, 
       würden ansonsten im Scroller unter Umständen weniger als numOfImagesInScroller
       Bilder angezeigt.       
     */
    if( fotos.length > numOfImagesInScroller && offset > fotos.length - numOfImagesInScroller ){
	tmpOffset = offset;
	offset = fotos.length - numOfImagesInScroller;
	indexInScrollBar = indexInScrollBar + (tmpOffset - offset);
    }

    for( var i = 0; i < numOfImagesInScroller; i++ ){
	var thumbId;

	index = offset + i;
	thumbId = picId + "-thumbimg" + i;
	listId = picId + "-thumb" + i;
	listElement = document.getElementById(listId);


	if( index >= fotos.length ){
	    listElement.style.display = "none";
	}
	else{
	    listElement.style.display = "block";
	    fotocache[picId]["currentHighlightInScroller"] = document.getElementById(thumbId);
	    listElement.innerHTML = createLinkForThumbnail(picId, fotos, index, i, nohighlightStyle, thumbId);
	}			
    }
    fotocache[picId]["currentOffset"] = offset;
}

/**
  Setzt den Scroller einer Fotogallerie ein Element zurück lädt das entsprechende Bild.
 */
function scrollUp(picId)
{
    if( fotocache[picId]["currentPhoto"] > 0 ){
	setPic( fotocache[picId]["currentPhoto"] - 1, picId);
    }
}

/**
  Setzt den Scroller einer Fotogallerie ein Element weiter lädt das entsprechende Bild.
 */
function scrollDown(picId)
{	
    if( fotocache[picId]["currentPhoto"] < bilder[picId].length - 1 ){
	setPic( fotocache[picId]["currentPhoto"] + 1, picId);
    }
}

/**
  Lädt die Großansicht und die Metadaten des angegebenen Bildes nach Klick auf ein Element des Scrollers. 

  index ist die Nummer des Bildes.
  picId ist die id des img-Elementes, das die Großansicht darstellt.
 */
function setPicElements(index, picId)
{
    var fotos = bilder[picId];
    var titleElement = document.getElementById("pic" +picId + "-title");
    var picElement = "pic" + picId;

    titleElement.innerHTML = fotos[index][4];
    document.images[picElement].style.display = "block";
    document.images[picElement].src = fotos[index][3];
    document.images[picElement].alt = fotos[index][4] + ", Rechte: " + fotos[index][5];
    currentPhotoGallery = picId;
    fotocache[picId]["currentPhoto"] = index;
    checkButtonVisibility(picId, index, fotos.length - 1);
    highlightPhotoInListAndScroller(index);
}

/**
  Prüft, ob die Scrollbuttons sichtbar sein sollten.
 */
function checkButtonVisibility(picId, index, maxIndex)
{
    if( index > 0 ){
	document.getElementById(picId + "-scrollUp").style.visibility = "visible";
	document.getElementById(picId + "-scrollLeft").style.visibility = "visible";
    }
    else{
	document.getElementById(picId + "-scrollUp").style.visibility = "hidden";
	document.getElementById(picId + "-scrollLeft").style.visibility = "hidden";
    }
    if( index < maxIndex ){
	document.getElementById(picId + "-scrollDown").style.visibility = "visible";
	document.getElementById(picId + "-scrollRight").style.visibility = "visible";
    }
    else{
	document.getElementById(picId + "-scrollDown").style.visibility = "hidden";
	document.getElementById(picId + "-scrollRight").style.visibility = "hidden";
    }
}

/**
  Lädt die Großansicht des angegebenen Bildes nach Klick auf ein Element der Listenansicht.

  Zu den Parametern siehe Dokumentation der Funktion setPic(url,picId,index).

  Zusätzlich zu den in setPic() (das von dieser Funktion aufgerufen wird) angestoßenen Aktionen,
  muß nach der Auswahl eines Bildes über die Liste der Scroller neugefüllt werden.
 */
function setPic(index,picId)
{
    currentPhotoGallery = picId;
    fillThumbs(picId,index);
    fillList(picId,index);
    setPicElements(index, picId);    
}

/**
  Legt den <img>-Tag, der die Großansicht des Bildes enthält an.
 */
function createImageTagForElement(picId)
{
    document.write(
	    '<p class="imagetitle">'
	    + '<img src="" id="pic' + picId + '" class="bildgalerie" alt="" />'
	    + '<span id="pic' + picId + '-title"></span>'
	    + '</p>'
	    )
}

/**
  Erzeugt das HTML für den Link eines Thumbnails.
 */
function createLinkForThumbnail(picId, fotos, index, elementToHighlight, classname, elementId)
{
    var innerHTML = '<a href="javascript:setPic(' + index + ','+picId+');">';
    innerHTML += '<img src="' + fotos[index][0] + '" width="' + fotos[index][1] + '" height="' +fotos[index][2] + '" alt="' + fotos[index][4] + ", Rechte: " + fotos[index][5] + '" class="'+classname+'" title="Bild vergr&ouml;&szlig;ern" id="'+ elementId +'"/>';
    innerHTML += "</a>";
    return innerHTML;
}

/**
  Erzeugt ein Array mit den Elementen (Properties) linktext und linkno.
 */
function createLinkarrayForListelement(listitem, offset, numOfPhotos)
{
    var linktext;
    var linkno;
    var result = new Array();

    linktext = "" + (listitem + offset);
    linkno = listitem + offset - 1;

    if( getCountOfListElements() < numOfPhotos ){
	if( listitem == 1 ){
	    linktext = "1";
	    linkno = 0;
	}
	else if( listitem == 2 ){
	    if( offset > 0  && numOfPhotos > numOfImagesInList ){
		linktext = "...";
		linkno = -1;
	    }
	    else{
		linktext = "2";
		linkno = 1;
	    }
	}
	else if( listitem == numOfImagesInList - 1 ){
	    if( offset + numOfImagesInList < numOfPhotos ){
		linktext = "...";
		linkno = -1;
	    }
	}
	else if( listitem == numOfImagesInList ){
	    linktext = "" + numOfPhotos;
	    linkno = numOfPhotos - 1;
	}
	else{
	    linktext = "" + (listitem + offset);
	    linkno = listitem + offset - 1;
	}
    }
    else{
	linktext = "" + listitem;
	linkno = listitem - 1;
    }

    result.linktext = linktext;
    result.linkno = linkno;
    result.linkindex = listitem - 1;
    return result;
}

/**
  Erstellt die Liste für die Thumbnails. 
  Dies kann nicht im HTML gemacht werden, weil die Seite sonst ohne CSS nicht so hundertprozent funktioniert.
 */
function createThumbnailListForElement(elementId, picId)
{
    var html = "";
    var i;

    html += '<ul class="fotoscroller">';
    html += '<li id="'+picId+'-scrollUp" class="navilinks">';
    html += '<a href="javascript:scrollUp('+"'"+picId+"'"+');"><img width="21" height="60" src="/wjt/images/scroll_left.gif" alt="Vorheriges Bild anzeigen" title="Vorheriges Bild anzeigen" /></a>';
    html += '</li>';
    for( i=0; i < numOfImagesInScroller; i++ ){
	html += '<li id="'+picId+'-thumb'+i+'"></li>';
    }
    html += '<li id="'+picId+'-scrollDown" class="navirechts">';
    html += '<a href="javascript:scrollDown('+"'"+picId+"'"+');" title="N&auml;chstes Bild anzeigen"><img width="21" height="60" src="/wjt/images/scroll_right.gif" alt="N&auml;chstes Bild anzeigen"/></a>';
    html += '</li>';
    html += '</ul>';

    if( loading ){		
	document.write(html);
    }
    else{
	html = html + document.getElementById(elementId).innerHTML;
	document.getElementById(elementId).innerHTML = html;
    }
}

/**
  Erstellt die Listenansicht. 
  Dies kann nicht im HTML gemacht werden, weil die Seite sonst ohne CSS nicht so hundertprozent funktioniert.
 */
function createListViewForElement(elementId, picId)
{
    var html = "";
    html += '<ul class="fotogalerieliste">';
    html += '<li id="'+picId+'-scrollLeft" class="navilinks">';
    html += '<a href="javascript:scrollUp('+"'"+picId+"'"+');"><img width="20" height="12" src="/wjt/images/pfeil-links.gif" alt="Vorheriges Bild anzeigen" title="Vorheriges Bild anzeigen" /></a>';
    html += '</li>';

    for( var i=0; i < getCountOfListElements(); i++ ){
	html += '<li id="'+picId+'-li' + i + '" class="nichtAktuellesBild"></li>';
    }
    html += '<li id="'+picId+'-scrollRight" class="navirechts">';
    html += '<a href="javascript:scrollDown('+"'"+picId+"'"+');" title="N&auml;chstes Bild anzeigen"><img width="20" height="12" src="/wjt/images/pfeil-rechts.gif" alt="N&auml;chstes Bild anzeigen"/></a>';
    html += '</li>';
    html += '</ul>';

    if( loading ){		
	document.write(html);
    }
    else{
	html = html + document.getElementById(elementId).innerHTML;
	document.getElementById(elementId).innerHTML = html;
    }
}

/**
  Erzeugt den <a>-Tag für die Listendarstellung. Siehe createLink für weitere Dokumentation.
 */
function createLink2(imageLink, picId, linkarray)
{
    var html = "";
    if( linkarray.linkno == -1 ){
	html = linkarray.linktext;
    }
    else{
	html += '<a title="Bild vergr&ouml;&szlig;ern" href="javascript:setPic(' + imageLink + ',' + picId + ');">';
	html += linkarray.linktext;
	html += '</a>';
    }
    return html;
}

/**
  Erzeugt die Links in der Listendarstellung einer Fotogalerie.
 */
function createLink(listId, imageLink, picId, picNo)
{
    var html = "";
    html += '<li id="' + listId + '" class="nichtAktuellesBild">';
    html += createLink2(picNo, picId, picNo);
    html += "</li>";
    document.write(html);
}

/**
  Highlightet das Foto mit dem angegeben Index in der Listenansicht und im Scroller der aktuellen Fotogalerie.
 */
function highlightPhotoInListAndScroller(indexOfImage)
{
    highlightPhotoInScroller(indexOfImage);
    highlightPhotoInList(indexOfImage);	
}

/**
  Highlightet das Foto mit dem angegeben Index in der Listenansicht der aktuellen Fotogalerie.
 */
function highlightPhotoInList(index)
{
    var listId = currentPhotoGallery + "-li" + (index - fotocache[currentPhotoGallery].currentOffsetForList);	
    var listElement = document.getElementById(listId);	
    highlightElement(listElement, "currentHighlightInList");
}

/**
  Highlightet das Foto mit dem angegeben Index im Scroller der aktuellen Fotogalerie.
 */
function highlightPhotoInScroller(index)
{
    var picId = currentPhotoGallery + "-thumbimg" + (index - fotocache[currentPhotoGallery].currentOffset);
    var picElement = document.getElementById(picId);
    highlightElement(picElement, "currentHighlightInScroller");
}

/**
  Highlightet das angegebene Element, wenn momentan ein anderes Element hervorgehoben wird,
  wird dort das Highlight entfernt.

  Über highlightArea wird der Bereich des highlightings angegeben, also Scroller oder Liste. 
  Soll ein neues Element im Scroller hervorgehoben werden, wird das aktuelle Highlight auch nur im Scroller entfernt.
 */
function highlightElement(element, highlightArea)
{
    if( fotocache[currentPhotoGallery][highlightArea] != undefined && fotocache[currentPhotoGallery][highlightArea] != element){
	fotocache[currentPhotoGallery][highlightArea].className = nohighlightStyle;
    }
    element.className = highlightStyle;
    fotocache[currentPhotoGallery][highlightArea] = element;
}

/**
  Ruft toggleElement2(elementId, false) auf. Siehe Dokumentation dort.
 */
function toggleElement(elementId)
{
    return toggleElement2(elementId, false);
}

/**
  Klappt das Element mit der id elementId auf oder zu. 
  Ist ignoreCurrent true, bleibt das aktuelle geöffnete Element offen, ansonsten wird es zugeklappt. 
 */
function toggleElement2(elementId, ignoreCurrent)
{
    var img = document.getElementById(elementId + "-pfeil");
    var title = document.getElementById(elementId + "-titel");
    var toggler = document.getElementById(elementId + "-toggler");
    var i1;
    var i2;

    if( toggler == null ){
	toggler = document.getElementById(elementId + "-link");
    }

    // Element schliessen
    if( document.getElementById(elementId).style.display == "block" ){
	document.getElementById(elementId).style.display = "none";
	if( ! ignoreCurrent ){
	    currentOpenElement = null;
	}
	img.src = arrow;
	img.className = arrowclass;
	title.className = "unactive";
	if( toggler != null ){
	    i1 = toggler.title.indexOf(" ");
	    i2 = toggler.title.indexOf(" ", i1 + 1);
	    // Ging irgendwie mit dem regulaeren Ausdruck nicht
	    // toggler.title = toggler.title.replace(/^(\w+) \w+/,"$1 öffnen");
	    toggler.title = toggler.title.substring(0,i1) + " öffnen" + toggler.title.substring(i2);
	}
    }
    // Element oeffnen
    else{
	if( ! ignoreCurrent ){
	    if( currentOpenElement ){
		currentOpenElement.style.display = "none";
		document.getElementById(currentOpenElement.id + "-pfeil").src = arrow;
		document.getElementById(currentOpenElement.id + "-pfeil").className = arrowclass;
		document.getElementById(currentOpenElement.id + "-titel").className = "unactive";
	    }
	    currentOpenElement = document.getElementById(elementId);
	}
	document.getElementById(elementId).style.display = "block";		
	img.src = downarrow;
	img.className = downarrowclass;
	title.className = "active";
	if( toggler != null ){
	    i1 = toggler.title.indexOf(" ");
	    i2 = toggler.title.indexOf(" ", i1 + 1);
	    // Ging irgendwie mit dem regulaeren Ausdruck nicht
	    // toggler.title = toggler.title.replace(/^(\w+) \w+/,"$1 öffnen");
	    toggler.title = toggler.title.substring(0,i1) + " schließen" + toggler.title.substring(i2);

	    // toggler.title = toggler.title.replace(/^(\w+) \w+/,"$1 schließen");
	}
    }
    return;
}

/**
  Gibt an, wieviele Listenelemente für die Galerie tatsächlich benötigt werden. 
  numOfPhotosInList gibt die maximale Anzahl an.
 */
function getCountOfListElements()
{
    if(bilder[currentPhotoGallery].length < numOfImagesInList){
	return bilder[currentPhotoGallery].length;
    }
    else{
	return numOfImagesInList;
    }
}