/*
 +-----------------------------------------------------------------------+
 | 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:                                                           |
 |   - if galleryname has umlauts (äöü) sometimes there will occur an    |
 |     XML-error                                                         |
 |                                                                       |
 +-----------------------------------------------------------------------+
 | Author: Roman Gruber <roman@phusion.ch>                               |
 +-----------------------------------------------------------------------+
*/

//gallery_pic = 0;
//var overview_page=1;
//var from=0;
//var until=0;
//gallery_img = new Image();
var gal;
var gal_interval;
var gal_evt;

function gallery(gallery, img){
	thisgalObj = this;
	this.evt = new Array();
	this.ids = new Array;

	this.ids["gallery_div"] = strrand(20);
	this.ids["gallery_div_page"] = strrand(20);
	this.ids["gallery_close"] = strrand(20);
	this.ids["gallery_ov"] = strrand(20);
	this.ids["gallery_prev"] = strrand(20);
	this.ids["gallery_next"] = strrand(20);
	this.ids["gallery_nr"] = strrand(20);
	this.ids["gallery_image"] = strrand(20);
	this.ids["gallery_image_tag"] = strrand(20);
	this.ids["gallery_load_div"] = strrand(20);

	if(gallery != null){
		this.gallery = gallery;
		this.gallery_xml = getxml("func/xmlgallery.php?gallery="+this.gallery);
	}else{
		this.img = img;
		this.gallery_xml = getxml("func/xmlgallery.php?img="+this.img);
	}

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

	this.gallery = xmldoc.getElementsByTagName("list")[0].getElementsByTagName("img");

	this.gallery_images = new Array();
	for(i=0;i<this.gallery.length;i++){
		this.gallery_images[i] = this.gallery[i].childNodes[0].nodeValue;
	}

	this.draw();
	debug.info("Gallery '"+gallery+"' initialized");
}


gallery.prototype={
	load:function(img){
		debug.info("Image '"+img+"' loading started");
//		document.getElementById(this.ids["gallery_image"]).innerHTML = "<img src='img/icons/load.gif' alt='Loading' title='Loading' />";
//		alert(document.getElementById(this.ids["gallery_image"]).innerHTML);

		this.loading();

		this.img = img;
		this.in_gallery = false;
		for(i=0;i<this.gallery.length;i++){
			if(this.gallery_images[i] == this.img){
				this.in_gallery = true
				this.active = i;
			}
		}

		this.stat();

		this.image = new Image();
		this.image.src = this.img;

	//	if(this.image.complete == false){
			this.evt["load"] = registerObjectEventHandler(this.image, "load", this, "this.insert()", true);
//		}else{
//			this.insert();
//		}

	},

	loading:function(){
		if(document.getElementById(this.ids["gallery_div_page"])){
			this.size = getwindowsize();
			this.gallery_load_div = document.createElement("div");
			this.gallery_load_div.innerHTML = "<img src='img/icons/load.gif' alt='Loading' title='Loading' />";
			this.gallery_load_div.style.backgroundColor = "black";
			this.gallery_load_div.className = "gallery_load_div";
			this.gallery_load_div.style.position = "absolute";
			this.gallery_load_div.style.left = ((this.size["width"]-42)/2)+"px";
			this.gallery_load_div.style.top = ((this.size["height"]-42)/2)+"px";
			this.gallery_load_div.style.Zindex = "1000";
			this.gallery_load_div.style.width = "32px";
			this.gallery_load_div.style.height = "32px";
			this.gallery_load_div.style.padding = "5px";
			this.gallery_load_div.style.zIndex = "1001";
			this.gallery_load_div.id = this.ids["gallery_load_div"];
			document.getElementById(this.ids["gallery_div_page"]).appendChild(this.gallery_load_div);
			setopacity(this.ids["gallery_load_div"], 6);
		}
	},

	draw:function(img){
		this.galdiv = document.createElement("div");	
		this.galdiv.className = "gallery_div_universe";

		this.galdiv.style.height = "100%";
		this.galdiv.style.width = "100%";
		this.galdiv.style.position = "fixed";
		this.galdiv.id = this.ids["gallery_div"];

		this.innergaldiv = document.createElement("div");	
		this.innergaldiv.style.position = "fixed";
		this.innergaldiv.className = "gallery_div";
		this.innergaldiv.id = this.ids["gallery_div_page"];
		this.html = "<table id='"+this.ids["gallery_close"]+"' style='width:100%; height:100%;'>";
		this.html += "<tr><td colspan=3 height=50 id='"+this.ids["gallery_ov"]+"'></td></tr>";
		this.html += "<tr><td colspan=3 onClick='gal.hide()'>&nbsp;</td></tr>";
		this.html += "<tr><td onClick='gal.hide()'>&nbsp;</td>";
		this.html += "<td style='width:50px; height:50px;'><table border=0 cellspacing=0 cellpadding=0 style='width:100%; height:100%;'><tr><td><div style='width:10px; height:10px; background-image: url(img/icons/lo.gif);'></div></td><td colspan='3' style='background-color:white;'></td><td><div style='width:10px; height:10px; background-image: url(img/icons/ro.gif);'></div></td></tr><tr><td style='background-color:white;'></td><td style='width:20px; background-color:white;'>&nbsp;</td><td style='white-space:nowrap; background-color:white;'><a href='#' onclick='gal.prev(); return false;'><img id='"+this.ids["gallery_prev"]+"' src='img/icons/gal_prev.gif' style='text-align:text-top; border:0px none;'></a><span>&nbsp;(</span><span id='"+this.ids["gallery_nr"]+"'>"+(this.active+1)+"</span><span>/"+this.gallery.length+")&nbsp;</span><a href='#' onclick='gal.next(); return false;'><img id='"+this.ids["gallery_next"]+"' src='img/icons/gal_next.gif' style='text-align:text-top; border:0px none;'></a></td><td style='width:20px; background-color:white; text-align:right;'><img src='img/icons/gal_close.png' style='border:0px none; cursor:pointer;' onClick='gal.hide();'></td><td style='background-color:white;'></td></tr><tr><td style='background-color:white;'></td><td colspan='3'><div id='"+this.ids["gallery_image"]+"' class='gallery_pic'></div></td><td style='background-color:white;'></td></tr><tr><td><div style='width:10px; height:10px; background-image: url(img/icons/lu.gif);'></div></td><td colspan='3' style='background-color:white;'></td><td><div style='width:10px; height:10px; background-image: url(img/icons/ru.gif);'></div></td></tr></table></td>";
		this.html += "<td onClick='gal.hide()'>&nbsp;</td></tr>";
		this.html += "<tr><td colspan=3 onClick='gal.hide()'>&nbsp;</td></tr></table>";
		this.innergaldiv.innerHTML = this.html;
	},

	show:function(){
		debug.info("show gallery");
		document.body.appendChild(this.galdiv);
		document.body.appendChild(this.innergaldiv);
		setopacity(this.ids["gallery_div"], 8);
		this.evt["keydown"] = registerObjectEventHandler(document, "keydown", this, "this.handlekeys", true);
		this.evt["scroll"] = registerObjectEventHandler(document, "DOMMouseScroll", this, "this.handlescroll", 
		true);
		document.body.style.overflow = "hidden";
	},

	hide:function(){
		debug.info("hide gallery");
		removeObjectEventHandler(document, "keydown", this.evt["keydown"], true);
		removeObjectEventHandler(document, "DOMMouseScroll", this.evt["scroll"], true);
		document.body.removeChild(this.galdiv);
		document.body.removeChild(this.innergaldiv);
		document.body.style.overflow = "";
	},

	bigger:function(){
		var image_tag = document.getElementById(this.ids["gallery_image_tag"]);
		var width = image_tag.style.width;
		var height = image_tag.style.height;
		
		if(width == ""){
			width = this.image.width;
			height = this.image.height;
		}

		width = parseInt(width);
		height = parseInt(height);

		var wsize = getwindowsize();

		width = width + (width/10);
		height = height + (height/10);

		if(width < (wsize["width"] - 40) && height < (wsize["height"]-120)){
			image_tag.style.position = "static";
			image_tag.style.width = width+"px";
			image_tag.style.height = height+"px";
		}
	},

	smaller:function(){
		var width = document.getElementById(this.ids["gallery_image_tag"]).style.width;
		var height = document.getElementById(this.ids["gallery_image_tag"]).style.height;
		
		if(width == ""){
			width = this.image.width;
			height = this.image.height;
		}

		width = parseInt(width);
		height = parseInt(height);

		width = (width/110)*100;
		height = (height/110)*100;
		if(width > 100){
			document.getElementById(this.ids["gallery_image_tag"]).style.width = width+"px";
			document.getElementById(this.ids["gallery_image_tag"]).style.height = height+"px";
		}
	},

	handlekeys:function(evt){
		evt = (evt) ? evt : ((event) ? event : null);
		if (evt) {
			var charCode = (evt.charCode) ? evt.charCode : evt.keyCode;
			var realkey = String.fromCharCode(charCode);
			if(evt.keyCode){
				if(evt.keyCode == 39){
					this.next();
				}else if(evt.keyCode == 37){
					this.prev();
				}else if(evt.keyCode == 27){
					this.hide();
				}else if(evt.keyCode == 107){
					this.bigger();
				}else if(evt.keyCode == 109){
					this.smaller();
				}else if(evt.keyCode == 13){
					this.hide();
				}
			}
		}
	},

	handlescroll:function(evt){
		evt = evt ? evt : window.event;
		this.raw = evt.detail ? evt.detail : evt.wheelDelta;

		if(this.raw > 0){
			this.smaller();
		}else if(this.raw < 0){
			this.bigger();
		}
	},

	stat:function(){
		if(document.getElementById(this.ids["gallery_ov"])){
			var htmloverview = "<table border='0' style='width:100%;'><tr><td></td>";
			for(i=0;i<this.gallery_images.length;i++){
				if(this.active == i){
					htmloverview += "<td width='15px'><img src=\"img/icons/dot_white.gif\"></td>";
				}else{
					htmloverview += "<td width='15px'><img src=\"img/icons/dot_black.gif\" style='cursor:pointer;' onClick=\"gal.load('"+this.gallery_images[i]+"')\"></td>";
				}
			}
			htmloverview += "<td></td></tr><table>";
			document.getElementById(this.ids["gallery_ov"]).innerHTML = htmloverview;
		}
	},

	insert:function(){
		debug.info("Image '"+this.img+"' loading completed");
		if(document.getElementById(this.ids["gallery_div_page"])){
			//alert(document.getElementById(this.ids["gallery_div_page"]).innerHTML);
			document.getElementById(this.ids["gallery_div_page"]).removeChild(this.gallery_load_div);
		}

		var wspace = 100;
		var hspace = 170;

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

		if(document.getElementById(this.ids["gallery_nr"])){
			document.getElementById(this.ids["gallery_nr"]).innerHTML = (this.active+1);
		}

		if(document.body.clientWidth < (this.image.width+wspace) || document.body.clientHeight < (this.image.height+hspace)){
			this.mergeobj = new merge(this.ids["gallery_image"], "<img id='"+this.ids["gallery_image_tag"]+"' onClick='gallery_resize()' style='width:"+width+"px; height:"+height+"px; url(img/icons/zoomin.cur), pointer;' src=\""+this.image.src+"\">");
			this.mergeobj.start();

			//no animation
			//document.getElementById(this.ids["gallery_image"]).innerHTML = "<img id='"+this.ids["gallery_image_tag"]+"' onClick='gallery_resize()' style='width:"+width+"px; height:"+height+"px; url(img/icons/zoomin.cur), pointer;' src=\""+this.image.src+"\">";
		}else{
			this.mergeobj = new merge(this.ids["gallery_image"], "<img id='"+this.ids["gallery_image_tag"]+"' style='width:"+width+"px; height:"+height+"px;' src=\""+this.image.src+"\">");
			this.mergeobj.start();

			//no animation
			//document.getElementById(this.ids["gallery_image"]).innerHTML = "<img id='"+this.ids["gallery_image_tag"]+"' style='width:"+width+"px; height:"+height+"px;' src=\""+this.image.src+"\">";
		}

		if(document.getElementById(this.ids["gallery_prev"]) && document.getElementById(this.ids["gallery_next"])){
			var btn_prev = document.getElementById(this.ids["gallery_prev"]);
			var btn_next = document.getElementById(this.ids["gallery_next"]);
	//		btn_prev.src = "img/icons/gal_prev.gif";
	//		btn_next.src = "img/icons/gal_next.gif";
			clearTimeout(this.prev_timer);
			clearTimeout(this.next_timer);
			this.prev_timer = setTimeout("document.getElementById('"+this.ids["gallery_prev"]+"').src = 'img/icons/gal_prev.gif';", 500);
			this.next_timer = setTimeout("document.getElementById('"+this.ids["gallery_next"]+"').src = 'img/icons/gal_next.gif';", 500);
		}
	},

	next:function(){
		debug.info("\"next\" pressed");

		if(document.getElementById(this.ids["gallery_next"])){
			var btn = document.getElementById(this.ids["gallery_next"]);
			btn.src = "img/icons/gal_next_active.gif";
		}
		if(this.active == (this.gallery_images.length-1)){
			this.load(this.gallery_images[0]);
		}else{
			this.load(this.gallery_images[(this.active+1)]);
		}
	},
	
	prev:function(){
		debug.info("\"prevous\" pressed");

		if(document.getElementById(this.ids["gallery_prev"])){
			var btn = document.getElementById(this.ids["gallery_prev"]);
			btn.src = "img/icons/gal_prev_active.gif";
		}
		if(this.active == 0){
			this.load(this.gallery_images[this.gallery_images.length-1]);
		}else{
			this.load(this.gallery_images[(this.active-1)]);
		}
	},

	handleEvent:function(event, func){
		if(event.type == "keydown" || event.type == "DOMMouseScroll" || event.type == "mousemove"){
			eval(func+"(event)");
		}else{
			eval(func);
		}
	}
}