<!--

/*******************************************************************************************
 *                                                                                         *
 *                   JSGallery by T~O~B~I~A~S  D~A~M~I~S~C~H                               *
 *                   Version 4.0                                                           *
 *                                                                                         *
 *                   Free to use and change for non-commercial use, as long as this        *
 *                   NOTICE IS NOT REMOVED (same as usual :-)                              *
 *                                                                                         *
 *                   Homepage: http://www.lichtundschatten.gmxhome.de                      *
 *                   Bug reports, improvements & everything else to                        *
 *                   t o b i a s _ d a m i s c h @ g m x . a t                             *
 *                                                                                         *
 *******************************************************************************************/

/*******************************************
 * changes the content of an id-ed element *
 *******************************************/
function change(divid, message)
{
	document.getElementById(divid).innerHTML = message;
}

/*** end change ***/


/*************************************************
 * the constructor class of the whole gallery    *
 * contains all the methods (except change())    *
 * for creating and using the Gallery            *
 *************************************************/

function JSGallery(base, varname, megapics, showprogress, bodytablestyle, bigtablestyle, bartdstyle, bardivstyle, outerbardivstyle, bodytdstyle, defaulttdstyle, popcss, picstyle, cellwidth, cellheight)
{
	this.base = base;
	this.images = new Array();
	this.varname = varname;
	this.megapics = megapics;
	this.showprogress = showprogress;
	this.bodytablestyle = bodytablestyle;
	this.bigtablestyle = bigtablestyle;
	this.bartdstyle = bartdstyle;
	this.bardivstyle = bardivstyle;
	this.outerbardivstyle = outerbardivstyle;
	this.bodytdstyle = bodytdstyle;
	this.defaulttdstyle = defaulttdstyle;
	this.popcss = popcss;
	this.picstyle = picstyle;
	this.cellwidth = cellwidth;
	this.cellheight = cellheight;
	
	
	
	function JSImage(bigfile, description, imagebordercolor, overimagebordercolor, divbgcolor, overdivbgcolor, popcss, height, width)
	{
		this.name = bigfile.substring(0, bigfile.length-4);
		this.description = description;
		this.ending = bigfile.substring(bigfile.length-4, bigfile.length);
		this.big = bigfile;

		this.imagebordercolor = imagebordercolor;
		this.overimagebordercolor = overimagebordercolor;
		this.divbgcolor = divbgcolor;
		this.overdivbgcolor = overdivbgcolor;
		this.popcss = popcss;
		this.height = height;
		this.width = width;

		//this objects have only preloading importance
		this.bigImage = new Image();
		this.normal = new Image();
		this.over = new Image();


		/*** this function generates and opens a popup from a JSImage object ***/
		this.popup = popup;
		function popup()
		{
			eval("" + this.name + "_window = window.open(\"\", \"w_" + this.name + "\", \"directories, screenX=200, screenY=200, width=" + this.width + ",height=" + (this.height+50) + "\")\;");
			var foo;
			if(megapics)
			foo = "<!DOCTYPE HTML PUBLIC \\\"-//W3C//DTD HTML 4.0 Transitional//EN\\\">\\n\\n<html>\\n<head>\\n	<title>" + this.name + "</title>\\n	<script language=\\\"JavaScript\\\">\\n  <!\" + \"--\\nfunction activate(){\\n		if(document.layers)\\n					{document.layers['bild'].visibility='show'\\\;}\\n			//else if(document.all.['bild'].style) \\n					//{document.all['bild'].style.visibility='visible'\\\;}						\\n			else if(document.getElementById) \\n					{document.getElementById(\\\"bild\\\").style.visibility = \\\"visible\\\"\\\;}\\n		} \\n  --\" + \">\\n</sc\" + \"ript>\\n<style type=\\\"text/css\\\">\\n<!\" + \"--\\n" + this.popcss + "\\n--\" + \">\\n</style>\\n</head>\\n\\n<body bgColor=\\\"" + this.divbgcolor + "\\\" topmargin=\\\"0\\\" leftmargin=\\\"0\\\" marginheight=\\\"0\\\" marginwidth=\\\"0\\\">\\n\\n<table width=\\\"100%\\\" height=\\\"100%\\\"><tr><td align=\\\"center\\\"><img src=\\\"" + base + "loadingbar.gif\\\" width=101 height=24 border=\\\"0\\\"></td></tr></table>\\n\\n<div id=\\\"bild\\\" style=\\\"position:absolute\\\; left:0px\\\; top:0px\\\; width:10px\\\; height:10px\\\; visibility:hidden\\\; z-index:10\\\">\\n<table cellpadding=\\\"0\\\" cellspacing=\\\"0\\\" border=\\\"0\\\">\\n<tr><td colspan=\\\"3\\\"><a href=\\\"" + base + "megasize/" + this.big + "\\\" target=\\\"_new\\\"><img src=\\\"" + base + "fullrez/" + this.big + "\\\" onload=\\\"activate()\\\" border=\\\"0\\\"></a></td></tr>\\n<tr><td colspan=\\\"3\\\"></td></tr>\\n<tr><td class=\\\"texttd\\\">" + this.description + "</td>\\n<td></td>\\n<td width=\\\"10\\\"></td></tr>\\n<tr><td colspan=\\\"3\\\"></td></tr>\\n</table>\\n</div> \\n\\n</body>\\n</html>";
			else foo = "<!DOCTYPE HTML PUBLIC \\\"-//W3C//DTD HTML 4.0 Transitional//EN\\\">\\n\\n<html>\\n<head>\\n	<title>" + this.name + "</title>\\n	<script language=\\\"JavaScript\\\">\\n  <!\" + \"--\\nfunction activate(){\\n		if(document.layers)\\n					{document.layers['bild'].visibility='show'\\\;}\\n			//else if(document.all.['bild'].style) \\n					//{document.all['bild'].style.visibility='visible'\\\;}						\\n			else if(document.getElementById) \\n					{document.getElementById(\\\"bild\\\").style.visibility = \\\"visible\\\"\\\;}\\n		} \\n  --\" + \">\\n</sc\" + \"ript>\\n<style type=\\\"text/css\\\">\\n<!\" + \"--\\n" + this.popcss + "\\n--\" + \">\\n</style>\\n</head>\\n\\n<body bgColor=\\\"" + this.divbgcolor + "\\\" topmargin=\\\"0\\\" leftmargin=\\\"0\\\" marginheight=\\\"0\\\" marginwidth=\\\"0\\\">\\n\\n<table width=\\\"100%\\\" height=\\\"100%\\\"><tr><td align=\\\"center\\\"><img src=\\\"" + base + "loadingbar.gif\\\" width=101 height=24 border=\\\"0\\\"></td></tr></table>\\n\\n<div id=\\\"bild\\\" style=\\\"position:absolute\\\; left:0px\\\; top:0px\\\; width:10px\\\; height:10px\\\; visibility:hidden\\\; z-index:10\\\">\\n<table cellpadding=\\\"0\\\" cellspacing=\\\"0\\\" border=\\\"0\\\">\\n<tr><td colspan=\\\"3\\\"><img src=\\\"" + base + "fullrez/" + this.big + "\\\" onload=\\\"activate()\\\" border=\\\"0\\\"></td></tr>\\n<tr><td colspan=\\\"3\\\"></td></tr>\\n<tr><td class=\\\"texttd\\\">" + this.description + "</td>\\n<td></td>\\n<td width=\\\"10\\\"></td></tr>\\n<tr><td colspan=\\\"3\\\"></td></tr>\\n</table>\\n</div> \\n\\n</body>\\n</html>";
			//alert(foo);
			eval("" + this.name + "_window.document.open();");                   //opening...
			eval("" + this.name + "_window.document.write(\"" + foo + "\");");
			eval("" + this.name + "_window.document.close();");                  //...and closing the document tells mozilla not to wait for anything (show the sandclock), and is more correct anyway
		}
	}
	
	//does the image adding
	this.add = addImage;
	function addImage(bigfile, description, imagebordercolor, overimagebordercolor, divbgcolor, overdivbgcolor, height, width)
	{
		if (height == (null || 'undefined' || 0)) height = 500;
		if (width == (null || 'undefined' || 0)) width = 500;
		this.images[this.images.length] = new JSImage(bigfile, description, imagebordercolor, overimagebordercolor, divbgcolor, overdivbgcolor, this.popcss, height, width);
	}
	
	
	/*** sets the widths of the JSImages after preloading so they can be printed out to the new constructors ***/
	this.setWidth = setWidth;
	function setWidth()
	{
		this.preload();
		
		var i = 0;
		while(i < this.images.length)
		{
			this.images[i].width = this.images[i].bigImage.width;
			this.images[i].height = this.images[i].bigImage.height;
			i++;
		}
	}
	
	/*** prints the new constructors ***/
	this.printConstructors = printConstructors;
	function printConstructors()
	{
		var retval = "\n";
		var i = 0;
		while(i < this.images.length)
		{	//                                              bigfile,                            description,                            imagebordercolor,                            overimagebordercolor,                          divbgcolor,                        overdivbgcolor, height, width
			retval += this.varname + ".add(\"" + this.images[i].big + "\", \"" + this.images[i].description + "\", \"" + this.images[i].imagebordercolor + "\", \"" + this.images[i].overimagebordercolor + "\", \"" + this.images[i].divbgcolor + "\", \"" + this.images[i].overdivbgcolor + "\", " + this.images[i].height + ", " + this.images[i].width + ");\n";
			i++;
		}
		return retval;
	}

	
	this.preload = preload;
	function preload()
	{
		var i = 0;
		var loaded = 0;
		var total = this.images.length;
		var percent = 0;
		if(showprogress) change(varname + "bar", "<div style=\"align: center; text-align: center;\">Preloading Gallery... " + percent + "%, " + loaded + "/" + total + "</div><div style=\"" + outerbardivstyle + "\"><div style=\"" + bardivstyle + " width: " + percent + "%;\"></div></div>");
		while(i < this.images.length)
		{
			this.images[i].bigImage.onload = changeBar;
			this.images[i].bigImage.onerror = function()
			                                  {
			                                  	alert("Image could not be loaded. ");
			                                  	changebar();
			                                  };
			this.images[i].bigImage.src = this.base + "fullrez/" + this.images[i].big;
			i++;
		}

		function changeBar()
                {
                       loaded++;
                       percent = Math.round((loaded / total) * 100);
                       if(showprogress)
	               {
	     		       if(percent != 100)
	                         change(varname + "bar", "<div style=\"align: center; text-align: center;\">Preloading Gallery... " + percent + "%, " + loaded + "/" + total + "</div><div style=\"" + outerbardivstyle + "\"><div style=\"" + bardivstyle + " width: " + percent + "%;\"></div></div>");
	                       else
	                         change(varname + "bar", "<div style=\"align: center; text-align: center;\">Finished. " + percent + "%, " + loaded + "/" + total + "</div><div style=\"" + outerbardivstyle + "\"><div style=\"" + bardivstyle + " width: " + percent + "%;\"></div></div>");
	               }
                }
	}

	this.preloadThumbs = preloadThumbs;
	function preloadThumbs(x)
	{
		var preloadgif = new Image();
		preloadgif.src = this.base + "loadingbar.gif";
		var width = x*this.cellwidth;
		if(Math.floor(this.images.length / x) == this.images.length / x)
		  var height = (this.images.length / x)*this.cellheight;
		else
		  var height = (Math.floor(this.images.length / x) + 1)*this.cellheight;
		var i = 0;
		var loaded = 0;
		var total = this.images.length*2;
		var percent = 0;
		if(showprogress) change(varname + "bar", "<div style=\"align: center; text-align: center;\">Preloading Gallery thumbnails... " + percent + "%, " + loaded + "/" + total + "</div><div style=\"" + outerbardivstyle + "\"><div style=\"" + bardivstyle + " width: " + percent + "%;\"></div></div>");
		while(i < this.images.length)
		{
			this.images[i].over.onload = changeBar;
			this.images[i].normal.onload = changeBar;
			this.images[i].over.onerror = function()
			                                {
			                                	alert("Image could not be loaded. ");
			                                	changeBar();
			                                };
			this.images[i].normal.onerror = function()
			                                {
			                                	alert("Image could not be loaded. ");
			                                	changeBar();
			                                };
			this.images[i].over.src = this.base + "overthumbs/" + this.images[i].name + this.images[i].ending;
			this.images[i].normal.src = this.base + "thumbs/" + this.images[i].name + this.images[i].ending;
			i++;
		}

		function changeBar()
                {
                       loaded++;
                       percent = Math.round((loaded / total) * 100);
     		       if(percent != 100)
     		       {
                                if(showprogress) change(varname + "bar", "<div style=\"align: center; text-align: center;\">Preloading Gallery thumbnails... " + percent + "%, " + loaded + "/" + total + "</div><div style=\"" + outerbardivstyle + "\"><div style=\"" + bardivstyle + " width: " + percent + "%;\"></div></div>");
                       }
                       else
                       {
				if(showprogress) change(varname + "bar", "<div style=\"align: center; text-align: center;\"><a href=\"javascript: " + varname + ".preload()\">Preload</a></div><div style=\"" + outerbardivstyle + "\"></div>");
                         	eval("" + varname + ".draw(" + x + ")");
                       }
                }
	}

	
	this.place = place;
	function place(x)
	{
		if(Math.floor(this.images.length / x) == this.images.length / x)
		  var y = this.images.length / x;
		else
		  var y = Math.floor(this.images.length / x) + 1;
		var retval = "<table style=\"" + this.bigtablestyle + "\">";
		if(showprogress) retval += "<tr><td style=\"" + this.bartdstyle + "\" id=\"" + this.varname + "bar\"></td></tr>";
		retval += "<tr><td id=\"" + this.varname + "body\" style=\"" + this.bodytdstyle + "; width: " + x*(this.cellwidth+2) + "; height: " + y*(this.cellheight+6) + ";\"></td></tr></table>";
		return retval;
	}
	
	var foo = 0;
	
	this.draw = drawGallery;
	
	function drawGallery(x)
	{
		
		if(Math.floor(this.images.length / x) == this.images.length / x)
		  var y = this.images.length / x;
		else
		  var y = Math.floor(this.images.length / x) + 1;
		
		var verticalpadding;
		var horizontalpadding;

		var tx = 0;
		var ty = 0;
		var retstring = "<table cellpadding=\"0\" cellspacing=\"0\" class=\"" + this.bodytablestyle + "\">\n";

		var i = 0;
		while(ty < y)
		{
			retstring += "   <tr>\n";
			while(tx < x)
			{	
				if(this.images[i]) //if object exists...
				{
					verticalpadding = (this.cellheight - this.images[i].normal.height)/2;
					//alert(i + " " + this.images[i].normal.height);
					horizontalpadding = (this.cellwidth - this.images[i].normal.width)/2;
					retstring += "      <td style=\"" + this.defaulttdstyle + "background-color: " + this.images[i].divbgcolor + ";\" onMouseOver=\"this.style.backgroundColor = '" + this.images[i].overdivbgcolor + "'; in_document_" + this.images[i].name + ".src = '" + this.base + "overthumbs/" + this.images[i].name + this.images[i].ending + "'; in_document_" + this.images[i].name + ".style.borderColor = '" + this.images[i].overimagebordercolor + "'\" onMouseOut=\"this.style.backgroundColor = '" + this.images[i].divbgcolor + "'; in_document_" + this.images[i].name + ".style.borderColor = '" + this.images[i].imagebordercolor + "'; in_document_" + this.images[i].name + ".src = '" + this.base + "thumbs/" + this.images[i].name + this.images[i].ending + "'\"><div style=\"padding-top:" + verticalpadding + "px; padding-bottom: " + verticalpadding + "px; padding-right: " + horizontalpadding + "px; padding-left: " + horizontalpadding + "px;\" onClick=\"" + this.varname + ".images[" + i + "].popup()\">\n";
				}
				else //draw an emptd td / div
				{
					verticalpadding = this.cellheight/2;
					horizontalpadding = this.cellwidth/2;
					retstring += "      <td style=\"" + this.defaulttdstyle + "\"><div style=\"padding-top:" + verticalpadding + "px; padding-bottom: " + verticalpadding + "px; padding-right: " + horizontalpadding + "px; padding-left: " + horizontalpadding + "px;\">\n";
				}
				
				if(i < this.images.length)
				{
					
					retstring += "         <img alt=\"" + this.images[i].description + "\" src=\"" + this.base + "thumbs/" + this.images[i].name + this.images[i].ending + "\" name=\"in_document_" + this.images[i].name + "\" onMouseOver=\"\"; onMouseOut=\"\" style=\"" + this.picstyle + " border-color: " + this.images[i].imagebordercolor + ";\"> \n";
					i++;
				}
				retstring += "      </div></td>\n";
				tx++;
			}
			retstring += "   </tr>\n";
			tx = 0;
			ty++;
		}
		retstring += "</table>\n";
		//draws the generated table to the predefined element that we have written by place()
		change(this.varname + "body", retstring);
	}
		
}

/*** end JSGallery ***/

var werke = new JSGallery("werke/", /* base folder of the pictures relative to this file or abolute */
                          "werke",  /* name of the variable of this object */
                          true,     /* should this gallery use mega-size pictures, which are opened when one clicks on a gallery pic in a popup? these pics are stored in 'basefolder/megasize' */
                          false,     /* should a progress bar and text be shown? */
                          "border: black solid 0px; background-color: lightyellow; border-collapse: collapse; align: center; padding: 0px; margin: 0px;", /* style of the big body table */
                          "border-collapse: collapse; border: black solid 1px;", /* style of the big table containing THE WHOLE GALLERY (including progress bar, if any) */
                          "font-family: lucida console; font-size: 14px; height: 40px; background-color: gray; border: black solid 1px; padding: 3px; margin: 0px;", /* style of the <td> element containing the progress bar */
                          "height: 100%; margin: 0px; background-color:#bbbbbb;", /* style of the <div> element containing the progress bar */
                          "height: 20px; padding: 0px; background-color: white; width: 100%; border: black solid 1px", /* style of the outer div containing the bar */
                          "background-color: #333333; padding: 0px; margin: 0px;", /* style of the <td> element containing the whole "body" of the gallery (all the thumbnails) */
                          "margin: 0px; padding: 0px; cursor: pointer;",          /* style of a very normal <td> element that contains a single thumbnail */
                          "body {font-family: lucida console; font-size: 14px;} .texttd{color: white; padding-left: 15px; padding-top: 15px;}", /* css styles of the popup document */
                          "border: solid 1px;", /*style of a thumbnail pic, define only border size and geometrical appearance of the thumbnail border here */
                          180, /* width of one single thumbnail cell */
                          250  /* height of one single thumbnail cell */
                          );

werke.add("Afrikanischer_Vogel.jpg", "Afrikanischer Vogel (120x100)", "black", "red", "#333333", "black", 430, 342);
werke.add("Blauer_Fisch.jpg", "Blauer Fisch (110x180)", "black", "red", "333333", "black", 430, 320);
werke.add("Sieg_und_Niederlage.jpg", "Sieg und Niederlage (125x47)", "black", "red", "333333", "black", 430, 157);
werke.add("Ahnengalerie.jpg", "Ahnengalerie (100x80)", "black", "red", "#333333", "black", 430, 312);
werke.add("Sonnenaufgang.jpg", "Sonnenaufgang (100x80)", "black", "red", "333333", "black", 430, 334);
werke.add("Kommunikation.jpg", "Kommunikation (120x100)", "black", "red", "333333", "black", 430, 315);
werke.add("Afrikanisches_Huhn.jpg", "Afrikanisches Huhn (95x82)", "black", "red", "#333333", "black", 430, 346);
werke.add("Kopffuessler.jpg", "Kopffuessler (80x65)", "black", "red", "333333", "black", 430, 323);
werke.add("Roter_Fisch.jpg", "Roter Fisch (100x120)", "black", "red", "333333", "black", 430, 502);
werke.add("Verschleierte_Frauen.jpg", "Verschleierte Frauen (106x110)", "black", "red", "333333", "black", 430, 451);
werke.add("Stachelfisch.jpg", "Stachelfisch (110x97)", "black", "red", "333333", "black", 430, 321);
werke.add("Weisser_Fisch.jpg", "Weisser Fisch (110x97)", "black", "red", "333333", "black", 430, 321);
werke.add("Zauberer.jpg", "Zauberer (66x55)", "black", "red", "333333", "black", 430, 319);
werke.add("Bekaempfung_der_Angst.jpg", "Bekaempfung der Angst (70x50)", "black", "red", "#333333", "black", 430, 285);
werke.add("Die_Schlafende.jpg", "Die Schlafende (112x80)", "black", "red", "333333", "black", 430, 290);
werke.add("Die_Rote_Frau.jpg", "Die Rote Frau (93x70)", "black", "blue", "333333", "black", 430, 288);
werke.add("Hab_Sonne_im_Herzen.jpg", "Hab Sonne im Herzen (87x80)", "black", "red", "333333", "black", 430, 341);

//--> 