// Globale Variablen
// HTML-Elemente
var middle;
var ajaxgallery;
var ag_text;
var ag_edit_pic_headline;
var ag_pic_headline;
var ag_show;
var ag_big_pic;
var album = "handgun";

// Filename des aktuell ausgewählten Bildes
var ag_activeImage;
// Index des aktuell ausgewählten Bildes
var ag_activeIndex = 0;
// Pool der JSON-daten
var ag_data;

window.onload = function() {
	if (window.location.search.indexOf("crb=on") > -1) {
		album = "carbine";
	}
	ajaxgallery = document.getElementById("ajaxgallery");
	ag_show = document.getElementById("ag_show");
	ag_big_pic = document.getElementById("ag_big_pic");
	agCreateEditHeadline();
	agLoadThumbs();
}

// Dateiliste laden
function agLoadThumbs() {
	// Den Text 'Loading ...' anzeigen
	ajaxgallery.innerHTML = "<div id='ag_loading'>Daten werden geladen ...</div>";
	var myAjax = new Ajax();
	myAjax.url = "./getImageList.php";
  	myAjax.params = "album="+album;
	myAjax.onSuccess = function(txt) {
		if (agHasError(txt)) {
			myAjax.onError(agGetError(txt));
			return null;
		} else {
			try {
				// JSON auswerten
				ag_data = eval('('+txt+')');
			} catch(e) {
				// Fehler bei JSON-Auswertung
				myAjax.onError(e.name+": "+e.message);
				return null;
			}
		}
		// Titel des Albums anzeigen
		document.title = ag_data.album;
		
		// Thumbnails anzeigen
		agShowThumbs();
	}
	myAjax.onError = function(msg) {
		alert(msg);
	}
	
	myAjax.doRequest();
}

//
function agShowThumbs() {
	middle = document.getElementById("middle");
	// Den Text 'Daten werden geladen ...' löschen
	ajaxgallery.innerHTML = "";
	var h1 = document.createElement("h1");
		middle.insertBefore(h1, ajaxgallery);
		h1.innerHTML = ag_data.album;
	
	for (i=0; i<(ag_data.images).length; i++) {
		// Thumbnail-Container erstellen
		var newDiv = document.createElement("div");
			// DIV-Container für Thumbnail an DIV-Container mit der Galerie anhängen
			ajaxgallery.appendChild(newDiv);
			// Wenn Thumbnail angeklickt wird: grosses Bild anzeigen
			newDiv.onclick = agShowImage;
			// Dem Thumbnail-Container eine CSS-Klasse zuordnen
			newDiv.className = "ag_thumb";
			// ID des Thumbnail-Containers erzeugen
			newDiv.setAttribute("id", "ag_thumb_"+i);
		// Thumbnail-Image schreiben und Container zuweisen
		var newThumb = "";
			newThumb += "<img src=\""+(ag_data.images_url)+"thumbs/thumb-"+(ag_data.images[i].filename)+"\" alt=\""+ag_data.images[i].title+"\" title=\""+ag_data.images[i].title+"\" />";
			// Thumbnail in den Thumbnail-Container einfügen
			newDiv.innerHTML = newThumb;
	}
	ag_big_pic.src=ag_data.images_url+ag_data.images[ag_activeIndex].filename;
}

// Bild in voller Grösse zeigen
function agShowImage() {
 	ag_activeImage = this;
 	ag_activeIndex = agExtractIndex(this.id);
	ag_big_pic.src=ag_data.images_url+ag_data.images[ag_activeIndex].filename;	
 	ag_pic_headline.innerHTML = ag_data.images[ag_activeIndex].title;
 	ag_edit_pic_headline.value = ag_data.images[ag_activeIndex].title; 
 	window.location.hash = ag_data.images[ag_activeIndex].filename;
 	document.title = ag_data.album + " | " + ag_data.images[ag_activeIndex].title;
	ag_show.appendChild(ag_text);
}

// Index aus Thumbnail extrahieren
function agExtractIndex(id) {
	// Entfernen der Präambel "ag_thumb_", die Zahl bleibt übrig
	// Aus "ag_thumb_12" wird also 12
  	return id.replace(/ag_thumb_/, "");
}

function agShowImageByHash() 
{
 	var hashImage = null;
  	for (i=0; i<ag_data.images.length; i++) {
    	if ("#"+ag_data.images[i].filename == window.location.hash) {
      		document.getElementById("ag_thumb_"+i).onclick();
      		break;
    	}
  	}
}

// Eingabefeld anzeigen, Bildtitel ausblenden
function agShowEditHeadline() {
  	ag_pic_headline.style.display = 'none';
  	ag_edit_pic_headline.style.display = 'inline';
  	ag_edit_pic_headline.focus();
  	ag_edit_pic_headline.select();
}

// Bildtitel anzeigen, Eingabefeld ausblenden
function agHideEditHeadline() {
  	ag_pic_headline.style.display = 'inline';
  	ag_edit_pic_headline.style.display = 'none';
}

// Neuen Bildtitel speichern
function agSaveHeadline(event) {
  	if (!event) {
   		event = window.event;
  	}
  	
	// Prüfen, ob Enter-Taste gedrückt
  	if (event.keyCode != 13) {
		// Nein, andere Taste
    	return null;
  	}

  	agHideEditHeadline();
  	ag_pic_headline.innerHTML = "&Auml;nderung wird gespeichert ...";
  
  	var imageTitle = encodeURIComponent(ag_edit_pic_headline.value);
  	var imageFile = encodeURIComponent(ag_data.images[ag_activeIndex].filename);
  
  	var myAjax = new Ajax();
  	myAjax.url="./saveTitle.php";
  	myAjax.params="filename="+imageFile+"&title="+imageTitle;
  	myAjax.onSuccess = function(txt) {
    	if (agHasError(txt)) {
      		myAjax.onError(agGetError(txt));
      		return null;
    	} else {
      		//Neuen Titel bekannt machen 
      		ag_data.images[ag_activeIndex].title = ag_edit_pic_headline.value;
      		ag_activeImage.getElementsByTagName("img")[0].alt = ag_edit_pic_headline.value;
      		ag_activeImage.getElementsByTagName("img")[0].title = ag_edit_pic_headline.value;
      		ag_pic_headline.innerHTML = ag_edit_pic_headline.value;
      		document.title = ag_data.album + " | " + ag_edit_pic_headline.value;
    	}  
  	}  
  	myAjax.doRequest();
}

// Elemente für Inplace-Editing erstellen
function agCreateEditHeadline() {
	ag_text = document.createElement("div");
	ag_text.id = "ag_text";
	
	// Überschrift (ist sichtbar)
	ag_pic_headline = document.createElement("h2");
	ag_pic_headline.id = "ag_pic_headline";
	ag_pic_headline.innerHTML = "";
	ag_pic_headline.onclick = agShowEditHeadline;
	ag_pic_headline.style.display = 'inline';
	ag_text.appendChild(ag_pic_headline);
	
	// Edit-Feld (ist nicht sichtbar)
	ag_edit_pic_headline = document.createElement("input");
	ag_edit_pic_headline.name = "ag_edit_pic_headline";
	ag_edit_pic_headline.id = "ag_edit_pic_headline";
	ag_edit_pic_headline.type = "text";
	ag_edit_pic_headline.value = "";
	ag_edit_pic_headline.onblur = agHideEditHeadline;
	ag_edit_pic_headline.onkeyup = agSaveHeadline;
	ag_edit_pic_headline.style.display = 'none';
	ag_text.appendChild(ag_edit_pic_headline);
}

// Überprüft Rückgabe eines PHP-Skripts, ob es eine Fehlermeldung ist
function agHasError(msg) {
	// Hat msg einen Inhalt?
	if (!msg) return false;
	
	// Befindet sich die Zeichenkette 'AGERROR:' am Anfang von msg?
	if (msg.indexOf("AGERROR:") == 0) {
		return true;
	} else {
		return false;
	}
}

// Aufbereiten der Fehlermeldung eines PHP-Skripts
function agGetError(msg) {
	// Die Präambel AGERROR: aus der Fehlermeldung entfernen
	return msg.replace(/AGERROR:/, "");
}

// Allgemeine Funktion für alle Fehlerfälle
function agErrorHandler(msg) {
	// Fehler als Meldungsfenster anzeigen
	alert(msg);
}