gCurrImgIndex = 0;
	gNextImg = new Image();

	
	//-------------------------------------------------------------
	// Preload the next slide...
	//-------------------------------------------------------------
	function preloadNextSlide()
	{
		gNextImg = new Image();
		
		// Increment the counter. Reset when reaches end of list.
		if ( gCurrImgIndex < slideShowImgs.length -1 ) {
			gCurrImgIndex = gCurrImgIndex + 1;
		} else {
			gCurrImgIndex = 0;
		}
		
		nextImgPath = slideShowImgs[gCurrImgIndex];
		//alert('Preloading next img path: ' + nextImgPath);	
		
		gNextImg.src = nextImgPath;
		//alert(gNextImg)
		
	}

	//-------------------------------------------------------------
	// Init the slide show. Called from the page's onload()
	//-------------------------------------------------------------
	function initSlideShow()
	{
		window.setTimeout( 'showNextSlide()', slideShowDelay );
		
		// Start loading the next slide.
		preloadNextSlide();
		
		
	}
	
	
	
	
	//-------------------------------------------------------------
	// Trigger the next slide...
	//-------------------------------------------------------------
	function showNextSlide()
	{
		// See if the next image is already loaded, and if not start preloading it.
		if ( gNextImg.complete == false ) {
			//alert('Image is not finished loading: ' + gNextImg.src );
			// Wait a bit and call this function again a bit later.
			window.setTimeout( 'showNextSlide()', 250 );
			return;
		} 
		
		//alert('Image IS Loaded! : ' + gNextImg.src );
		
		// Hide old slide
		//var slideElement = document.getElementById( slideShowImageID );
		//hide( slideShowImageID );
		
		
		// Fade in new slide
		var slideElement = document.getElementById( slideShowImageID );
		hide( slideShowImageID );
		
		
		if( supportsOpacity( slideElement )) {
			//slideElement.src = slideShowImgs[gCurrImgIndex];		// actually changes the image.
			// first set 0% opacity to make it completely transparent
			setOpacity( slideElement, 0 );
			//show( slideShowImageID );
			// when we set display = "block" it's still invisible
			slideElement.style.display = "block";
			
			slideElement.src = slideShowImgs[gCurrImgIndex];		// actually changes the image.
			slideElement.alt = slideShowImgsalt[gCurrImgIndex];
			// call the function to gradually increase opacity
			fadeIn( slideShowImageID );
			
			
		} else {
			slideElement.src = slideShowImgs[gCurrImgIndex];
			slideElement.alt = slideShowImgsalt[gCurrImgIndex];// actually changes the image.
			// can't modify opacity, so just make it visible...
			elem.style.display = "block";
			//show( slideShowImageID );
		}
		
		
		
		// preload the next slide
		preloadNextSlide();
		
		// Start the timer again!
		window.setTimeout( 'showNextSlide()', slideShowDelay );
		
		
	}
	
	//-------------------------------------------------------------
	// Hide an element
	//-------------------------------------------------------------
	function hide( id ) 
	{
    	var elem = document.getElementById( id );
    	elem.style.display="none";
	}
	
	//-------------------------------------------------------------
	// Hide an element
	//-------------------------------------------------------------
	function show( id ) 
	{
    	var elem = document.getElementById( id );
    	elem.style.display="none";
	}
	




	function supportsOpacity( el ) {
		if ( el.style.opacity != 'undefined' )
			return true;
		if( el.style.MozOpacity != 'undefined' )
			return true;
		if ( el.style.filter != 'undefined' )
			return true;
		return false;
	}

	function setOpacity( el, opaciLevel ) {
		if ( el.style.opacity != 'undefined' ) {
			el.style.opacity = opaciLevel;
		} else if( el.style.MozOpacity != 'undefined' ) {
			el.style.MozOpacity = opaciLevel;
		} else if ( el.style.filter != 'undefined' ) {
			var oplvl = Math.round(opaciLevel*100);
			el.style.filter="alpha(opacity=" + oplvl + ")";
		}
	}
	
	function fadeIn( id, currentOpacity ) {
		var counterLimit = 20;
		var slideElement = document.getElementById( id );
		
		// trying to handle the weirdo update timing issues when changing images.
		//if ( slideElement.src != slideShowImgs[gCurrImgIndex] ) {
			//slideElement.src = slideShowImgs[gCurrImgIndex];		// actually changes the image.
		//}
		
		if( !currentOpacity ) {
			currentOpacity = 1;
		}
		if( currentOpacity > counterLimit ) {
			return;
		}
		setOpacity( slideElement, ( currentOpacity/counterLimit ) );
		currentOpacity++;
		var func = "fadeIn( '" + id + "', " + currentOpacity + ")";
		window.setTimeout( func, 50);
	}