var photosAtOnce = 3;
	var thumb_width = 100;
	var thumb_height = 75;
	var full_width = 430;
	var full_height = 300;
	
	var showDiv = document.getElementById( 'photoShow' );
	var listDiv = document.getElementById( 'photoShowScrollList' );
	var stageDiv = document.getElementById( 'photoShowStage' );
	var captionDiv = document.getElementById( 'photoShowCaption' );
	var nextButton = document.getElementById( 'photoShowNextButton' );
	var prevButton = document.getElementById( 'photoShowPrevButton' );
	var upButton = document.getElementById( 'photoShowScrUpButton' );
	var downButton = document.getElementById( 'photoShowScrDownButton' );
	
	var listHeight = listDiv.style.height;
	
	var currentShowingIndex = 0;
	var currentTopList = 0;
	var currentCaption = document.createTextNode( '' );
	captionDiv.appendChild( currentCaption );
	
	var autoadv = false;
	
	
	nextButton.onclick = function() 
	{
		clearTimeout( autoadv );
		if ( currentShowingIndex < images.length - 1 )
		{
			stagePhotoByIndex( currentShowingIndex + 1 );
		}
		else
			return false;
	}
	
	prevButton.onclick = function() 
	{
		clearTimeout( autoadv );
		if ( currentShowingIndex > 0 )
		{
			stagePhotoByIndex( currentShowingIndex - 1 );
		}
		else
			return false;
	}
	
	upButton.onclick = function() 
	{
		if ( currentTopList > 0 )
			scrollListUp();
	}
	
	downButton.onclick = function() 
	{
		if ( currentTopList + photosAtOnce < scrollList.length )
			scrollListDown();
	}
	
	function loadingVisible( vis )
	{
		if ( !vis )
			stageDiv.style.backgroundImage = "none";
		else
			stageDiv.style.backgroundImage = "url( images/loading.png )";
	}	
	
	var stageImg = document.createElement( 'img' );
	stageDiv.appendChild( stageImg );
	
	stageImg.onload = function showImage()
	{
		this.style.visibility="visible";
		loadingVisible( false );
		
		/*if ( this.offsetWidth < full_width )
			this.style.marginLeft = ( ( stageDiv.offsetWidth - this.offsetWidth ) / 2 ) + "px";
		if ( this.offsetHeight < full_height )
			this.style.marginTop = ( ( full_height - this.offsetHeight ) / 2 ) + "px";*/
	}	
	
	function stagePhotoByIndex( idx )
	{
		clearTimeout( autoadv );
		if ( images[idx] != undefined && ( currentShowingIndex != idx || currentShowingIndex == 0 ) )
		{
			loadingVisible( true );
			stageImg.style.visibility="hidden";
			stageImg.src = "images/photo.php?w="+ full_width +"&h="+ full_height +"&f="+ images[idx][0]; //images[idx][1];
			
			/*while ( !stageImg.complete )
				stageImg.style.visibility="hidden";*/
			
			/*stageImg.style.visibility="visible";*/
			
			stageImg.style.margin.Left = ( stageDiv.offsetWidth - stageImg.offsetWidth ) / 2;
			captionDiv.childNodes[0].nodeValue = "Photo " + ( idx + 1 );
			if ( images[idx][2] != '' )
				captionDiv.childNodes[0].nodeValue += ": " + images[idx][2];
			
			currentShowingIndex = idx;
		}
	}
	
	var scrollList = new Array( images.length );
	var scrollThumbSeparation = 100;
	function makeScrollList()
	{
		var divWidth = listDiv.offsetWidth;
		var divHeight = listDiv.offsetHeight;
		
		scrollThumbSeparation = divHeight / photosAtOnce;
		
		for ( i = 0; i < images.length; i++ )
		{
			img = new Image;
			scrollList[i] = document.createElement( 'div' );
			scrollList[i].setAttribute( 'class', 'thumbdiv' );
			
			atag = document.createElement( 'a' );
			atag.setAttribute( 'href', 'javascript:stagePhotoByIndex('+i+')' );
			atag.style.margin = '0';
			atag.style.padding = '0';
			//scrollList[i].setAttribute( 'onclick',  );
			listDiv.appendChild( scrollList[i] );
			
			img.src = "images/photo.php?w="+ thumb_width +"&h="+ thumb_height +"&f="+ images[i][0];
			//img.style.position = "absolute";
			
			scrollList[i].style.width = thumb_width; //img.offsetWidth;
			scrollList[i].style.height = thumb_height; //img.offsetHeight;

			atag.appendChild( img );
			scrollList[i].appendChild( atag );
			
			scrollList[i].style.top = ( scrollThumbSeparation * i + ( scrollThumbSeparation - scrollList[i].childNodes[0].childNodes[0].offsetHeight ) / 2 ) + 'px';
			/*img.style.marginLeft = ( ( thumb_width - scrollList[i].childNodes[0].childNodes[0].offsetWidth ) / 2 ) + 'px';*/
			scrollList[i].style.left = 0; // ( ( listDiv.offsetWidth - scrollList[i].firstChild.offsetWidth ) / 2 ) + 'px';
		}
	}
	
	makeScrollList();
	
	var scrollInterval = 0;
	var scrollIntervalCount = 0;
	function scrollListDown()
	{
		if ( currentTopList + photosAtOnce > 0 && scrollIntervalCount == 0 )
		{		
			scrollIntervalCount = 0;
			scrollInterval = setInterval( "scrollListFrac( "+scrollThumbSeparation+",1 );", 20 );
		}
	}
	
	function scrollListUp()
	{
		if ( currentTopList > 0 && scrollIntervalCount == 0 )
		{
			scrollIntervalCount = 0;
			scrollInterval = setInterval( "scrollListFrac( "+scrollThumbSeparation+",-1 );", 20 );
		}
	}
	
	function scrollListFrac( dist, dir )
	{
		if ( scrollIntervalCount < 10 )
			frac1 = Math.ceil( -1 * ( ( Math.sqrt( dist ) / 10 ) ) * Math.pow( scrollIntervalCount - 1, 2 ) + dist );
		else
			frac1 = 0;
		
		frac2 = Math.ceil( -1 * ( ( Math.sqrt( dist ) / 10 ) ) * Math.pow( scrollIntervalCount, 2 ) + dist );
		
		nudgeListImages( 0, dir * ( frac2 - frac1 ) );// + ( currentTopList * scrollThumbSeparation ) );
		
		if ( scrollIntervalCount++ > 10 )
		{
			window.clearInterval( scrollInterval );
			currentTopList = currentTopList + dir;
			scrollIntervalCount = 0;
		}
		
		return scrollIntervalCount;
	}
	
	function nudgeListImages( xDiff, yDiff )
	{
		for ( i = 0; i < scrollList.length; i++ )
		{
			scrollList[i].style.top = ( Math.floor( scrollList[i].style.top.split( 'p' )[0] ) + yDiff ) + 'px';
			scrollList[i].style.left = ( Math.floor( scrollList[i].style.left.split( 'p' )[0] ) + xDiff ) + 'px';
		}
	}
	
	function setListImageOffset( y )
	{
		for ( i = 0; i < scrollList.length; i++ )
		{
			scrollList[i].style.top = y + 'px';
		}
	}
	
	function nextStageImage()
	{
		if ( currentShowingIndex < images.length - 1 )
		{
			stagePhotoByIndex( currentShowingIndex + 1 );
			autoadv = setTimeout( "nextStageImage()", 5000 );
		}
		else
			return false;
	}
	
	
	
	stagePhotoByIndex( 0 );
	autoadv = setTimeout( "nextStageImage()", 7000 );