var currentImage = 1;
var timer;
var running = "true";

/*
 * function slideShow()
 * Description: This function plays a slideshow of multiple divs that have ids as = "img1" "img2" "img3" ...
 * 
 */
function slideShow(){
	console.log("sliding");
	/*if(typeof(myVar) == 'undefined')  return;*/
	console.log("still sliding");
	if (currentImage ==  1){
		previousImage= Gwimages;
	} else {
		previousImage = currentImage - 1;
	}

	/*FADE OUT ALL IMAGES EXCEPT FOR THE IMAGE WE'RE ABOUT TO SHOW*/
	i = 1;
	while(i<=Gwimages){
		if(i != currentImage){
			var fadeOut= dojo.fadeOut({
				node: 'img' + i,
				duration: 2000
			});
			fadeOut.play();
		
			/* if BROWSER = IE then hide child nodes also */
			if (navigator.appVersion.indexOf("MSIE") != -1){
				var children = document.getElementById('img' + i).getElementsByTagName('*');
				for (j=0; j<children.length;j++){
					var fadeOutChild= dojo.fadeOut({
								node: children[j],
								duration: 2000
								});
					if (children[j].name == "watermark"){
						children[j].style.opacity = "0"; 
						children[j].style.filter= "alpha(opacity=0)";
					} else {
						fadeOutChild.play();
					}
				}
			}
		}
		i++;
	}

	/* FADE IN NEW IMAGE */
	var fadeIn= dojo.fadeIn({
		node: 'img' + currentImage,
	        duration: 2000
		});
	fadeIn.play();
	
	
	/* if BROWSER = IE then fade in child nodes also */
	if (navigator.appVersion.indexOf("MSIE") != -1){
		var currentChilds = document.getElementById('img' + currentImage).getElementsByTagName('*');
		var fadeInChild
		for (i=0; i<currentChilds.length;i++){
			if (currentChilds[i].name=="watermark"){
				currentChilds[i].style.opacity = "0.5";
				currentChilds[i].style.filter= "alpha(opacity=50)";
			} else {
				fadeInChild= dojo.fadeIn({
					node: currentChilds[i],
					duration: 2000
				});
				fadeInChild.play();
			}
		}
	}
	
	// SET THE NEXT IMAGE
	if (currentImage == Gwimages){
		// IF LAST IMAGE OF SET, NEXT IMAGE WILL BE THE FIRST AGAIN
		currentImage= 1;
	} else {
		currentImage++;
	}
	console.log("current image: " + currentImage);
	//CALL SLIDESHOW FUNCTION AFTER 5 SECONDS
	timer = setTimeout("slideShow()",5000);
}


/*
 * function toggleSlideshow()
 * Description: this function toggles the slideshow. If it is playing, it will be paused and the playwatermark will be replaced by a
 * 				pauze watermark.
 */
function toggleSlideshow(){
	console.log(running);
	if (running == "true") {
		/* SET TO PAUZE */
		running = "false";
		clearTimeout(timer);
		
		/* CHANGE WATERMARK FOR ALL IMAGES */
		var images = document.getElementsByTagName('img');
		for (i=0; i < images.length; i++){
		    imgclass= images[i].className;
		    if (imgclass=="watermark"){
		        images[i].src= "/" + webdbname + "/pauzeWatermark.gif";
		    } 
		}
	} else {
		/* SET TO PLAY */
		running = "true";
		
		var images = document.getElementsByTagName('img');
		for (i=0; i < images.length; i++){
		    imgclass= images[i].className;
		    if (imgclass=="watermark"){
		        images[i].src= "/" + webdbname + "/playWatermark.gif";
		    } 
		}
		
		/* RESTART THE SLIDESHOW */
		timer = setTimeout("slideShow()",5000);
	}
}