/*
 +-----------------------------------------------------------------------+
 | js/gallery.js                                                         |
 |                                                                       |
 | This file is part of the Phusion Webengine                            |
 | Copyright (C) 2008-2009, Roman Gruber                                 |
 | Licensed under the GNU GPL                                            |
 |                                                                       |
 | PURPOSE:                                                              |
 |   Provides functions to navigate through a gallery, resize images and |
 |   navigate via thumbnails. The gallery is stored in a database and    |
 |   and transported via XML. (see func/xmlgallery.php)                  |
 |                                                                       |
 | KNOWN BUGS:                                                           |
 |   - îf galleryname has umlauts (äöü) sometimes there will occur an    |
 |     XML-error                                                         |
 |                                                                       |
 +-----------------------------------------------------------------------+
 | Author: Roman Gruber <roman@phusion.ch>                               |
 +-----------------------------------------------------------------------+
*/

gallery_images = new Array();
gallery_pic = 0;
var overview_page=1;
var from=0;
var until=0;
//gallery_img = new Image();

//gallery_init
//initiates the gallery 
function gallery_init(gallery_name, start){
	overview_page=1;

	if(typeof(start)=='undefined'){
		this.start = 0;
	}else{
		this.start = parseInt(start, 10);
	}
	if(gallery_name == ""){
		return;
	}
	gallery_images.splice(0, gallery_images.length);

	galdiv = document.createElement("div");	
	galdiv.className = "gallery_div_universe";
	//galdiv.style.height = document.body.scrollHeight;
	//galdiv.style.width = document.body.scrollWidth;

	galdiv.style.height = "100%";
	galdiv.style.width = "100%";

	//alert(document.body.offsetWidth+"x"+document.body.offsetHeight);
	galdiv.id = "gallery_div";
//	galdiv.onclick = function () {
//		document.body.removeChild(document.getElementById("gallery_div"));
	//	}

	innergaldiv = document.createElement("div");	
	innergaldiv.className = "gallery_div";
	innergaldiv.id = "gallery_div_page";
	html = "<table border='0' style='width:100%; height:100%;'>";
	html += "<tr><td colspan=3 height=50 id='gallery_ov'></td></tr>";
	html += "<tr><td colspan=3 height=50 bgcolor='#FFFFFF'><a href='#' onClick='gallery_prev()'>&nbsp;<<&nbsp;Zurück</a>&nbsp;|&nbsp;<a href='#' onClick='gallery_next()'>Weiter&nbsp;>></a>&nbsp;|&nbsp;<a href='#' onClick='gallery_overview()'>Gallerieübersicht</a></td></tr>";
	html += "<tr><td colspan=3 onClick='gallery_remove()'>&nbsp;</td></tr>";
	html += "<tr><td onClick='gallery_remove()'>&nbsp;</td>";
	html += "<td id='gallery_image' class='gallery_pic'></td>";
	html += "<td onClick='gallery_remove()'>&nbsp;</td></tr>";
	html += "<tr><td colspan=3 onClick='gallery_remove()'>&nbsp;</td></tr></table>";
	innergaldiv.innerHTML = html;

	document.body.appendChild(galdiv);
	document.body.appendChild(innergaldiv);
	setopacity("gallery_div", 8);
	
	window.scrollTo(0, 0);
	document.body.style.overflow = "hidden";

	document.getElementById("gallery_image").style.width = 300;
	document.getElementById("gallery_image").style.height = 150;
	document.getElementById("gallery_image").innerHTML = "<img src=\"img/icons/load.gif\"><br><font>Gallerie \""+gallery_name+"\" wird geladen...</font>";

	gallery_xml = getxml("func/xmlgallery.php?gallery="+gallery_name);

	try{ //Internet Explorer 
		xmldoc=new ActiveXObject("Microsoft.XMLDOM"); 
		xmldoc.async="false"; 
		xmldoc.loadXML(gallery_xml); 
	}catch(e){
		try{ //Firefox, Mozilla, Opera, etc.
			parser=new DOMParser();
			xmldoc=parser.parseFromString(gallery_xml,"text/xml");
		}catch(e){
			alert(e.message);
			return;
		}
	}

	var gallery = xmldoc.getElementsByTagName("gallery")[0].getElementsByTagName("pic");
	var thumbs = xmldoc.getElementsByTagName("gallery")[0].getElementsByTagName("thumbs_large")[0].childNodes[0].nodeValue;

	for(i=0;i<gallery.length;i++){
		gallery_images[i] = new Array();
		gallery_images[i]["name"] = gallery_name;
		gallery_images[i]["thumbs"] = thumbs;
		if(gallery[i].getElementsByTagName("title")[0].childNodes[0].nodeValue == " - "){
			gallery_images[i]["title"] = "";
		}else{
			gallery_images[i]["title"] = gallery[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+": ";
		}

		if(gallery[i].getElementsByTagName("desc")[0].childNodes[0].nodeValue == " - "){
			gallery_images[i]["desc"] = "";
		}else{
			gallery_images[i]["desc"] = gallery[i].getElementsByTagName("desc")[0].childNodes[0].nodeValue;
		}

//		gallery_images[i]["title"] = gallery[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
//		gallery_images[i]["desc"] = gallery[i].getElementsByTagName("desc")[0].childNodes[0].nodeValue;
		gallery_images[i]["url"] = gallery[i].getElementsByTagName("url")[0].childNodes[0].nodeValue;

	}

	if(gallery.length == 0){
		document.getElementById("gallery_image").innerHTML = "<font>Gallerie \""+gallery_name+"\" wurde nicht gefunden.</font><br><br><input type='button' class='button' value='Zurück' onClick='gallery_remove()'>";
	}else{
		document.getElementById("gallery_ov").innerHTML = gallery_stat();
		gallery_this(this.start);
	}

}

function gallery_next(){
	gallery_pic++;
	if(gallery_pic == gallery_images.length){ gallery_pic = 0; }
	gallery_pic_show();
}

function gallery_prev(){
	if(gallery_pic == 0){ gallery_pic = gallery_images.length; }
	gallery_pic--;
	gallery_pic_show();
}

function gallery_this(i){
	document.onkeydown = handlekeys_pic;
	gallery_pic = i;
	gallery_pic_show();
}

function gallery_pic_show(){
	document.getElementById("gallery_ov").innerHTML = gallery_stat();
	document.getElementById("gallery_image").innerHTML = "<img src=\"img/icons/load.gif\"><br><font>Bild ("+(gallery_pic+1)+"/"+gallery_images.length+") wird geladen...</font>";
	gallery_img = new Image();
	gallery_img.src = gallery_images[gallery_pic]["url"];
	if(gallery_img.complete == false){
		gallery_img.onload=function(){
			gallery_insert();
		}
	}else{
		gallery_insert();
	}
}



function gallery_insert(){
	var pic = gallery_pic;
	var wspace = 100;
	var hspace = 170;

//	alert(document.body.clientWidth+"x"+document.body.clientHeight+"/"+gallery_img.width+"x"+gallery_img.height);
	//calc image width and height
	var width = gallery_img.width;
	var height = gallery_img.height;
	if(document.body.clientWidth < (gallery_img.width+wspace)){
		width = document.body.clientWidth-wspace;
		height = Math.round(gallery_img.height/gallery_img.width*(document.body.clientWidth-wspace));
		if(document.body.clientHeight < (height+hspace)){
			height = document.body.clientHeight-hspace;
			width = Math.round(gallery_img.width/gallery_img.height*(document.body.clientHeight-hspace));
		}
	}else if(document.body.clientHeight < (gallery_img.height+hspace)){
		height = document.body.clientHeight-hspace;
		width = Math.round(gallery_img.width/gallery_img.height*(document.body.clientHeight-hspace));
	}

	document.getElementById("gallery_image").style.width = width+2;
	document.getElementById("gallery_image").style.height = height+40;
	if(document.body.clientWidth < (gallery_img.width+wspace) || document.body.clientHeight < (gallery_img.height+hspace)){
		document.getElementById("gallery_image").innerHTML = "<font>"+gallery_images[pic]["name"]+" ("+(pic+1)+"/"+gallery_images.length+")</font><br><img id='gallery_image_tag' onClick='gallery_resize()' style='width:"+width+"; height:"+height+"; cursor: url(img/icons/resize.gif), auto;' src=\""+gallery_img.src+"\"><br><font><b>"+gallery_images[pic]["title"]+"</b>"+gallery_images[pic]["desc"]+"</font>";
	}else{
		document.getElementById("gallery_image").innerHTML = "<font>"+gallery_images[pic]["name"]+" ("+(pic+1)+"/"+gallery_images.length+")</font><br><img id='gallery_image_tag' style='width:"+width+"; height:"+height+";' src=\""+gallery_img.src+"\"><br><font><b>"+gallery_images[pic]["title"]+"</b>"+gallery_images[pic]["desc"]+"</font>";
	}
}

function gallery_stat(){
	htmloverview = "<table border='0' style='width:100%;'><tr><td></td>";
	for(i=0;i<gallery_images.length;i++){
		//if(i == 100){
		//		htmloverview += "<td></td></tr><tr><td></td>";
		//}
		if(gallery_pic == i){
			htmloverview += "<td width='15'><img src=\"img/icons/dot_white.gif\"></td>";
		}else{
			htmloverview += "<td width='15'><img src=\"img/icons/dot_black.gif\" style='cursor:pointer;' onClick=\"gallery_this("+i+")\"></td>";
		}
	}
	htmloverview += "<td></td></tr><table>";
	return htmloverview;
}

function gallery_resize(){
	var wspace = 100;
	var hspace = 170;

	var width = gallery_img.width;
	var height = gallery_img.height;
	var overflow = "";
	if((parseInt(document.getElementById("gallery_image_tag").style.width, 10)+wspace) > document.body.clientWidth){ 
		width = document.body.clientWidth-wspace;
		height = Math.round(gallery_img.height/gallery_img.width*(document.body.clientWidth-wspace));
		overflow = "hidden";
		if(document.body.clientHeight < (height+hspace)){
			height = document.body.clientHeight-hspace;
			width = Math.round(gallery_img.width/gallery_img.height*(document.body.clientHeight-hspace));
		}

	}else if((parseInt(document.getElementById("gallery_image_tag").style.height, 10)+hspace) > document.body.clientHeight){
		width = Math.round(gallery_img.width/gallery_img.height*(document.body.clientHeight-hspace));
		height = document.body.clientHeight-hspace;
		overflow = "hidden";
	}

	if(overflow == "hidden"){
		window.scrollTo(0, 0);
	}

	document.body.style.overflow = overflow;

	document.getElementById("gallery_image").style.width = width+2;
	document.getElementById("gallery_image").style.height = height+40;
	document.getElementById("gallery_image_tag").style.width = width;
	document.getElementById("gallery_image_tag").style.height = height;
}

function gallery_remove(){
	document.body.removeChild(document.getElementById("gallery_div"));
	document.body.removeChild(document.getElementById("gallery_div_page"));
	document.body.style.overflow = "";
	document.onkeydown = "";
}

function gallery_overview(){
	htmloverview = "<table id='gallery_overview' border='0' style='width:0;'><tr>";
	var width=3;
	var height=2;
	from = (overview_page-1)*width*height;
	until = overview_page*width*height;
	var x=0;
	var y=0;
	var finish=0;
	for(i=from;i<until;i++){
		if(x == width){
				y++;
				htmloverview += "</tr><tr>";
				x=0;
				if(y == height){
					break;
				}

		}
		if(gallery_images.length > i){
			htmloverview += "<td onClick=\"gallery_this("+i+")\" style=\"cursor:pointer; vertical-align:middle; text-align:center; padding:10; \" onmouseover=\"this.style.backgroundColor= '#DCDCDC';\" onmouseout=\"this.style.backgroundColor= '';\"><img src=\""+gallery_images[i]["thumbs"]+"/"+gallery_images[i]["url"]+"\" style=''></td>";
		}else{
			htmloverview += "<td>&nbsp;</td>";
			finish = 1;
		}
		x++;
	}

	htmloverview += "<tr><td colspan='"+width+"'><a href='#' onClick='gallery_overview_prev()'>&nbsp;<<&nbsp;Zurück</a>&nbsp;|&nbsp;<a href='#' onClick='gallery_overview_next()'>Weiter&nbsp;>>&nbsp;</a></td></tr>";
	htmloverview += "</tr><table>";

	document.getElementById("gallery_image").innerHTML = htmloverview;
	document.getElementById("gallery_image").style.width = '1';
	document.getElementById("gallery_image").style.height = '1';
	document.onkeydown = handlekeys_ov;
}

function gallery_overview_next(){
	overview_page++;
	if(until >= gallery_images.length){ overview_page = 1; }
	gallery_overview();
}

function gallery_overview_prev(){
	if(overview_page == 1){ overview_page = Math.ceil(gallery_images.length/until)+1; }
	overview_page--;
	gallery_overview();
}

function handlekeys_pic(evt) {
	evt = (evt) ? evt : ((event) ? event : null);
	if (evt) {
		var charCode = (evt.charCode) ? evt.charCode : evt.keyCode;
		var realkey = String.fromCharCode(charCode);
		if(evt.charCode){
			if(evt.charCode == 39){
				gallery_next();
			}else if(evt.charCode == 37){
				gallery_prev();
			}
		}else if(evt.keyCode){
			if(evt.keyCode == 39){
				gallery_next();
			}else if(evt.keyCode == 37){
				gallery_prev();
			}
		}
	}
}

function handlekeys_ov(evt) {
	evt = (evt) ? evt : ((event) ? event : null);
	if (evt) {
		var charCode = (evt.charCode) ? evt.charCode : evt.keyCode;
		var realkey = String.fromCharCode(charCode);
		if(evt.charCode){
			if(evt.charCode == 39){
				gallery_overview_next();
			}else if(evt.charCode == 37){
				gallery_overview_prev();
			}
		}else if(evt.keyCode){
			if(evt.keyCode == 39){
				gallery_overview_next();
			}else if(evt.keyCode == 37){
				gallery_overview_prev();
			}
		}
	}
}