var index;//index ins Array
		var size;//Anzahl der Bilder
		var elements=new Array();//speichert Bilder
		var images = new Array();
		var dates = new Array();
		var comments = new Array();
		var thumbs = new Array();
		var displayedThumbs = new Array(5);
		var currentThumb; //absolute index of current thumb
		var currentThumbIndex; //absolute index of current thumb

		var positionNames = new Array(5);
		
		/* boolean arrays to check if images are already preloaded */
		var imageIsPrecached = new Array();
		var thumbIsPrecached = new Array();
		
		/* arrays to preload images */
		var precachedImages = new Array();
		var precachedThumbs = new Array();

		var xmlDoc =  document.implementation.createDocument("","MyXML", null);
		
		
		var doFade = 1;
		
		var visibleState=0; /* 0: gallery; 1: archives */
		
		var pageLoaded = 0;
		
		
		/* from http://40withegg.com/2007/1/5/a-non-cpu-intensive-javascript-wait-loop */
		/*function waitForLoad() {
		   if (pageLoaded == 1){
			  initAfterLoad();
		   } else {
			  // THIS IS RECERSIVE!  
			  // WE'LL KEEP SCHEDULING
			// THE CHECK UNTIL isThePageLoaded()==true
			  setTimeout('waitForLoad()', 1000);
		   }
		}*/
		
		
		
		function init() {
		
			positionNames[0] = "thumb_m2";
			positionNames[1] = "thumb_m1";
			positionNames[2] = "thumb";
			positionNames[3] = "thumb_p1";
			positionNames[4] = "thumb_p2";
			
			
		
		
	
			size=xmlDoc.getElementsByTagName("imageElement").length;
			//alert(size);
			elements=xmlDoc.getElementsByTagName("imageElement");
			//document.body.innerHTML += size + "<br/>";
			//alert("schleife");
			for (var i = 0; i < size; ++i){
				var len = elements[i].childNodes.length;
				//alert(len);
				//document.body.innerHTML += "i: " + i + ", len:" + len + "<br/>";
				for (var j = 0; j < len; ++j){
					//document.body.innerHTML += "j: " + j + "<br/>";
					var node = elements[i].childNodes[j];
					if(node.nodeType == 1){
						//document.body.innerHTML += node.tagName + "<br/>";
						if(node.tagName == "comment"){
							comments[i] = node.textContent;
							//document.body.innerHTML += node.innerHTML + "<br/>";
						} else if(node.tagName == "image"){
							images[i] = node.getAttribute("src");
							ixf.imgs[i] = images[i];
						} else if(node.tagName == "date"){
							dates[i] = node.getAttribute("day") + "/" + node.getAttribute("month") + "/20" + node.getAttribute("year");
						} else if(node.tagName == "thumbnail"){
							thumbs[i] = node.getAttribute("src");
						}
					}
				}
				thumbIsPrecached[i] = false;
				imageIsPrecached[i] = false;
				
				
				
			
			}
			
		
			//setTimeout('waitForLoad()', 1000); //wait until document is loaded, then init elements
			
			
			
			index=size-1;
			document.getElementById("image").src=images[index];
			document.getElementById("comments").innerHTML = dates[index] + "&nbsp;&nbsp;&nbsp;<em>" + comments[index] + "</em>";

			document.getElementById("thumb").style.backgroundImage = "url('"+thumbs[index]+"')";
			displayedThumbs[2] = index;
			document.getElementById("thumb").style.opacity = "0.8";
			
			currentThumb = index;
			currentThumbIndex = 2; //the center
			
			if (index - 2 > 0){
				document.getElementById(positionNames[0]).style.backgroundImage = "url('"+thumbs[index-2]+"')";
				displayedThumbs[0] = index-2;
			} else {
				document.getElementById(positionNames[0]).style.border = "1px solid black";
				displayedThumbs[0] = -1;
			}
			if (index - 1 > 0){
				document.getElementById(positionNames[1]).style.backgroundImage = "url('"+thumbs[index-1]+"')";
				displayedThumbs[1] = index-1;
			} else {
				document.getElementById(positionNames[1]).style.border = "1px solid black";
				displayedThumbs[1] = -1;
			}
			document.getElementById(positionNames[3]).style.border = "1px solid black";
			displayedThumbs[3] = -1;
			document.getElementById(positionNames[4]).style.border = "1px solid black";
			displayedThumbs[4] = -1;
			//document.getElementById("date").innerHTML = dates[index];
			//document.getElementById("comment").innerHTML = comments[index];
			//cacheImages();
			

			///ins init schieben!
			precacheImages();
			precacheThumbs();
			
		}
		
		
		window.onload=function(){
			documentLoaded = 1;
			xmlDoc.load("images.xml");
		}
		
		
		
		
		
		
		
		
		
		
		
		
		function precacheImage(num){
			if (imageIsPrecached[num] == false){
				precachedImages[num] = new Image(800,384);
				precachedImages[num].src = images[num];
				imageIsPrecached[num] = true;
			}
		}
		
		
		function precacheThumbRow(startFrom){
			
			for (var i = 0; i < 5; ++i){
				if ((startFrom + i) >= 0 && (startFrom + i) < size){
					if (thumbIsPrecached[startFrom + i] == false){
						precachedThumbs[startFrom + i] = new Image(156,75);
						precachedThumbs[startFrom + i].src = thumbs[startFrom +i];
						thumbIsPrecached[startFrom + i] = true;
					}
				}	
			}	
		}
		
		
		function precacheImages(){
			
			
			if (index - 2 >= 0){
				precacheImage(index - 2);	
			}
			if (index - 1 >= 0){
				precacheImage(index - 1);	
			}
			if (index + 1 < size){
				precacheImage(index + 1);	
			}
			if (index + 2 < size){
				precacheImage(index + 2);	
			}
			
			//TODO precache "jumpable" locations (from month starts etc)
			
		}
		
		
		function precacheThumbs(){
			
			if (displayedThumbs[0] > 0){
				precacheThumbRow(displayedThumbs[0] - 5);
			}
			if (displayedThumbs[4] < (size - 1)){
				precacheThumbRow(displayedThumbs[4] + 1);
			}
			
			//TODO precache "jumpable" locations (from month starts etc)
			
		}
		
		
		function next(){
			//index=(index+1)%size;

			if (index != size - 1){ //no wraparound
				
				if (getDisplayedThumbIndex(index) == 4){
					centerIndex = index + 3;
				} else {
					centerIndex = index + 1;
				}
				
				
				
				index = index + 1;
					
				setImage(index);
				
				
				
				if (getDisplayedThumbIndex(index) == -1){
					centerThumbsOn(centerIndex);	
				}
			}

		}
		
		function prev(){
			/*if(index>0){
				index=index-1;
			}
			else{
				index=size-1;
			}*/
			
			if (index != 0){ //no wraparound
				
				var centerIndex;
				
				if (getDisplayedThumbIndex(index) == 0){
					centerIndex = index - 3;
				} else {
					centerIndex = index - 1;
				}
				
				index = index -1;
				
				setImage(index);

				if (getDisplayedThumbIndex(index) == -1){
					centerThumbsOn(centerIndex);	
				}
			}
		}
		
		
		
		function setImage(num){
			index = num;
			if (doFade == 1){
				crossfade(document.getElementById('image'), images[index], 1, comments[index]);
			} else {
				document.getElementById("image").src=images[index];
			}
			document.getElementById("comments").innerHTML = dates[index] + "&nbsp;&nbsp;&nbsp;<em>" + comments[index] + "</em>";
			//document.getElementById("date").innerHTML = dates[index];
			//document.getElementById("comment").innerHTML = comments[index];
			for (var i = 0; i < 5; ++i){
				document.getElementById(positionNames[i]).style.opacity = "0.3";
			}
			
			var thumbIndex = getDisplayedThumbIndex(num);

			if (thumbIndex != -1){
				document.getElementById(positionNames[thumbIndex]).style.opacity = "0.8";
				currentThumbIndex = thumbIndex;
			} else {
				//TODO neue thumbs setzen - entweder zentrieren, wenn großer sprung, oder links/rechts, wenn "seitenwechsel" -> bei prev/next checken/machen?
			}

			precacheImages();
			
			//document.getElementById("thumb").style.backgroundImage = "url('"+thumbs[index]+"')";
			//document.getElementById("thumb").style.opacity = "0.9";
		}

		function minus_five(){
			
			if(displayedThumbs[0] > 0){
				centerThumbsOn(displayedThumbs[0] - 3);
			}
		}
		
		
		
		function plus_five(){
			if(displayedThumbs[4] != -1 && displayedThumbs[4] != (size - 1)){
				centerThumbsOn(displayedThumbs[4] + 3);
			}
		}
		
		
		
		function centerThumbsOn(num){
			var startIndex;
			
			for (var i = 0; i < 5; ++i){
				document.getElementById(positionNames[i]).style.backgroundImage = "";
				document.getElementById(positionNames[i]).style.border = "1px solid black";
				document.getElementById(positionNames[i]).style.opacity = "0.3";
			}
			
			startIndex = num -2;
			
			/* adjust start so that the last thumb will be at least three thumbs */
			if (startIndex < -2) { 
				startIndex = -2;
			} else if (startIndex > size - 3){
				startIndex = size - 3; 
			}
			
			for (var i = 0; i < 5; ++i){
					
				if (((startIndex + i) >= 0)  && ((startIndex + i) < size)){
					document.getElementById(positionNames[i]).style.backgroundImage = "url('"+thumbs[startIndex + i]+"')";
					if( (startIndex + i) == index){
						document.getElementById(positionNames[i]).style.opacity = "0.8";
						currentThumbIndex = startIndex + i;;
					} else {
						document.getElementById(positionNames[i]).style.opacity = "0.3";
					}
					document.getElementById(positionNames[i]).style.border = "1px solid gray";
					displayedThumbs[i] = startIndex + i;
				} else {
					displayedThumbs[i] = -1;	
				}
			}
			
			precacheThumbs();
			
			
		}
		
		
		
		function goToFirst(){
			centerThumbsOn(0);
			setImage(0);
		}
		
		function goToLast(){
			centerThumbsOn(size - 1);
			setImage(size - 1);
		}
		
		function goTo(num){
			centerThumbsOn(num);
			setImage(num);
		}
		
		/** thumbnail functions **/
		function thumbOver(thumbIndex){
			if(displayedThumbs[thumbIndex] != -1){
				document.getElementById(positionNames[thumbIndex]).style.opacity = "1.0";
				document.getElementById("comments").innerHTML = dates[displayedThumbs[thumbIndex]] + "&nbsp;&nbsp;&nbsp;<em>" + comments[displayedThumbs[thumbIndex]] + "</em>";
			}
		}
		
		function thumbOut(thumbIndex) {
			if(displayedThumbs[thumbIndex] != -1){
				if (displayedThumbs[thumbIndex] != index){
					document.getElementById(positionNames[thumbIndex]).style.opacity = "0.3";
				} else {
					document.getElementById(positionNames[thumbIndex]).style.opacity = "0.8";
				}
				document.getElementById("comments").innerHTML = dates[index] + "&nbsp;&nbsp;&nbsp;<em>" + comments[index] + "&nbsp;&nbsp;&nbsp;</em>";	
			}
		}
		
		function setImageFromThumb(thumbIndex){
			setImage(displayedThumbs[thumbIndex]);
		}
		
		
		function switchFade(){
			doFade = (doFade + 1) % 2;
			if(doFade == 1){
				document.getElementById("fader").innerHTML = "Effects: on";
			} else {
				document.getElementById("fader").innerHTML = "Effects: off";
			}
		}
		
		
		//Funktion init wird aufgerufen, sobald das XML-Dokument geladen ist
		xmlDoc.addEventListener("load",init,false);
		
		
		


		
		
		
		function getDisplayedThumbIndex(num){
			for (var i = 0; i < 5; ++i){
				if (displayedThumbs[i] == num){
					return i;
				}
			}
			return -1;
		}
		
		

		function highlight(num){
			document.getElementById(num).style.opacity = "1.0";
		//document.getElementById(num).style.marginBottom = "0px";
			var commentName = "comment";
			document.getElementById(commentName).innerHTML = "Lorem Ipsum dolor sit amet";
		
		
		}
	
		function unhighlight(num){
			document.getElementById(num).style.opacity = "0.3";
		//document.getElementById(num).style.marginBottom = "0px";
			var commentName = "comment";
			document.getElementById(commentName).innerHTML = "";
		}
	
		
		function switchVisibility(){
			if (visibleState == 0){
				document.getElementById("content").style.display = "none";
				document.getElementById("archives").style.display = "block";
				visibleState = 1;
			} else {
				document.getElementById("archives").style.display = "none";
				document.getElementById("content").style.display = "block";
				visibleState = 0;
			}
		}