//Globale Variablen
//HTML-Elemente
var ajaxgallery;
var ag_text;
var ag_edit_pic_headline;
var ag_pic_headline;

//Weitere Variablen
var ag_activeImage;
var ag_activeIndex = 0;
var ag_data; 
var divArray;
var oldWidth;
var oldHeight;
var oldIndex = -1;

//--------------------Gallery laden
function loadGallery(images_url) {
	ajaxgallery = document.getElementById("ajaxgallery");
	agCreateEditHeadline();
	agLoadThumbs(images_url);
	shortcut.add("RIGHT", kbRight,{
		'type':'keydown',
		'propagate':true,
		'target':document
	});
	shortcut.add("LEFT", kbLeft,{
		'type':'keydown',
		'propagate':true,
		'target':document
	});
}

//--------------------Dateiliste asynchron laden 
function agLoadThumbs(images_url) {
	//Loading anzeigen
	var loading = "<div id=\"ag_loading\">";
	loading += "Loading ...<img src=\"loading.gif\"></div>";
	ajaxgallery.innerHTML = loading;

	var myAjax = new Ajax();
	myAjax.url="php/getImageList.php";
	myAjax.params = "dir=" + images_url;
	myAjax.method = "POST";
	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 in Titelleiste anzeigen
	document.title = ag_data.album; 

	//Thumbnails anzeigen
	agShowThumbs();
}
  
  myAjax.onError=function(msg) {
    alert(msg);
  }
  
  myAjax.doRequest();
}

//--------------------Thumbnails anzeigen
function agShowThumbs() {
	divArray = new Array();
	ajaxgallery.innerHTML = "";
	for (i=0; i<(ag_data.images).length; i++) {
		//Thumbnail-Container (div) erstellen
		var newDiv = document.createElement("div");
		ajaxgallery.appendChild(newDiv);
		newDiv.onclick = agShowImage;
		newDiv.className = "ag_thumb";
		newDiv.setAttribute("id", "ag_thumb_"+i);
		//Tabelle mit Thumbnail-Image schreiben und Container zuweisen    
		var newThumb  = "<a name=\""+ag_data.images[i].filename+"\"></a>";
		newThumb += "<table cellspacing=\"0\" cellpadding=\"0\"><tr><td>";
		newThumb += "<img src=\""+(ag_data.images_url)+"thumbs/thumb-";
		newThumb += (ag_data.images[i].filename);
		newThumb += "\" alt=\""+ag_data.images[i].title;
		newThumb += "\" title=\""+ag_data.images[i].title+"\" />";
		newThumb += "</td></tr></table>";
		newDiv.innerHTML = newThumb;   
		divArray.push(newDiv);
	}
  
	//Hash-Wert auswerten
	if (window.location.hash) {
		agShowImageByHash();
	} 
	
	for (i=0; i<(ag_data.images).length; i++) {
		//Thumbnail-Container (div) erstellen
		var newDiv = document.createElement("div");
		ajaxgallery.appendChild(newDiv);
		newDiv.onclick = agShowImage;
		newDiv.className = "ag_cache";
		newDiv.setAttribute("id", "ag_cache_"+i);
		newDiv.style.visibility = "hidden";
		newDiv.style.width = 0;
		//Tabelle mit cache-Image schreiben und Container zuweisen    
		var newThumb  = ""
		newThumb += "<table cellspacing=\"0\" cellpadding=\"0\"><tr><td>";
		newThumb += "<img src=\""+(ag_data.images_url);
		newThumb += (ag_data.images[i].filename);
		newThumb += "\" alt=\""+ag_data.images[i].title;
		newThumb += "\" title=\""+ag_data.images[i].title+"\" width=\"0\" />";
		newThumb += "</td></tr></table>";
		newDiv.innerHTML = newThumb;   
	}

}


//--------------------Foto gross zeigen
function agShowImage() {
	//Abbrechen bei aktuellem Bild
	if (this==ag_activeImage) {
		return null;
	}

	if (ag_activeImage){
		oldIndex = agExtractIndex(ag_activeImage.id);
	}

	showImage(this);
	return;
}

//--------------------Index aus Thumb extrahieren
function agExtractIndex(id) {
  return id.replace(/ag_thumb_/, "");
}

//--------------------Direkt großes Bild anzeigen
function agShowImageByHash() {
	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;
		}
	}
}

//--------------------Elemente f&uuml;r Inplace-Editing erstellen
function agCreateEditHeadline() {
	ag_text = document.createElement("div");
	ag_text.id="ag_text";

	//Überschrift
	ag_pic_headline = document.createElement("h1");
	ag_pic_headline.id="ag_pic_headline";
	ag_pic_headline.innerHTML="";
	ag_pic_headline.onclick=agShowEditHeadline;
	ag_pic_headline.style.display='inline';
	ag_pic_headline.style.border='1';
	ag_text.appendChild(ag_pic_headline);

	//Edit-Feld
	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);
}

//--------------------Eingabefeld anzeigen, Überschrift 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();
}

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

//--------------------Neue Überschrift speichern
function agSaveHeadline(event) {
	if (!event) {
		event = window.event;
	}

	if (event.keyCode != 13) {
		return null;
	}

	agHideEditHeadline();
	ag_pic_headline.innerHTML = "Saving...";

	var imageTitle = encodeURIComponent(ag_edit_pic_headline.value);
	var imageFile = encodeURIComponent(ag_data.images[ag_activeIndex].filename);

	var myAjax = new Ajax();
	myAjax.url="php/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();
}

//--------------------Ü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 Zeichenkette AOERROR: am Anfang von msg?
	if (msg.indexOf("AGERROR:") == 0) {
		return true;
	} 
	else {
		return false;
	}
}

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

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


//--------------------Fenstergröße berechnen
function calcWindowSize() {
	var winWidth, winHeight;

	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		winWidth = window.innerWidth;
		winHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		//IE 6+ in 'standards compliant mode'
		winWidth = document.documentElement.clientWidth;
		winHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		winWidth = document.body.clientWidth;
		winHeight = document.body.clientHeight;
	}

	return [winWidth,winHeight];
}

//--------------------Callback Pfeil Links
function kbRight() {
	if (ag_activeIndex != ((ag_data.images).length - 1)){
		oldIndex = ag_activeIndex;
		ag_activeIndex++;
		var nextImage = divArray[ag_activeIndex];
		showImage(nextImage);
	}
	else {
		alert("Ende");
	}
}

//--------------------Callback Pfeil Rechts
function kbLeft() {
	if (ag_activeIndex != 0){
		oldIndex = ag_activeIndex;
		ag_activeIndex--;
		var nextImage = divArray[ag_activeIndex];
		showImage(nextImage);
	}
	else {
		alert("Anfang");
	}

}

//--------------------Bild groß anzeigen
function showImage(nextImage) {
	//Andere CSS-Klasse zuweisen und Textteil anhängen  
	nextImage.className="ag_big";
	nextImage.appendChild(ag_text);

	//Vormals großes Bild wieder verkleinern
	if (ag_activeImage) {
		ag_activeImage.className="ag_thumb";
		if (oldIndex > 0){
			ag_activeImage.getElementsByTagName("img")[0].src = 
				ag_data.images_url +
			'thumbs/thumb-'+ag_data.images[oldIndex].filename;
		}
		ag_activeImage.getElementsByTagName("img")[0].width = oldWidth;
		ag_activeImage.getElementsByTagName("img")[0].height = oldHeight;
	}

	//Neues Bild vergrößern
	ag_activeImage = nextImage;
	ag_activeIndex = agExtractIndex(nextImage.id);
	oldWidth = nextImage.getElementsByTagName("img")[0].width;
	oldHeight = nextImage.getElementsByTagName("img")[0].height;

	nextImage.getElementsByTagName("img")[0].src = 
	ag_data.images_url+ag_data.images[ag_activeIndex].filename;

	var sizeArray = calcWindowSize();
	nextImage.width = sizeArray[0];
	nextImage.height = sizeArray[1];

	var width = ag_data.images[ag_activeIndex].width;
	var height = ag_data.images[ag_activeIndex].height;

	var ratioW = width / sizeArray[0];
	var ratioH = height / sizeArray[1];
	var ratio = Math.max(ratioW, ratioH);
	nextImage.getElementsByTagName("img")[0].width = width / ratio;
	nextImage.getElementsByTagName("img")[0].height = height / ratio;

	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;
}