// current/next slide Image object
var ss_currentSlide = new Image();
ss_currentSlide.src = "/photos/city/_MG_3544.jpg";
var ss_nextSlide = null;

// add/remove paths from this list to change image selection
var ss_imagePaths = Array(
	"/photos/city/_MG_3544.jpg",
	"/photos/city/_MG_1260.jpg",
	"/photos/city/_MG_0670.jpg",
	"/photos/city/IMG_0062.jpg",
	"/photos/city/20_02nov06.jpg",
	"/photos/nature/IMG_0920.jpg",
	"/photos/nature/IMG_0056.jpg",
	"/photos/nature/IMG_7082.jpg",
	"/photos/nature/IMG_7057.jpg",
	"/photos/nature/IMG_8561.jpg"
);
var ss_currentImage = 0;	// index of the current/next image in the path array

var ss_ticks = 0;			// time reference
var ss_delay = 0;			// remaining delay before next slide, depending on the time required to load the next image
var ss_switching = false;	// accounts for partial opacity at end of run

/*
	GetTicks()
	
	Returns the time in milliseconds (can be used much like ticks)
*/
function GetTicks()
{
	return (new Date()).getTime();
}

/*
	SetImageOpacity()
	
	Sets <im>'s opacity to <op> (a fraction of 1).
	Accounts for different browsers.
*/
function SetImageOpacity(im, op)
{
	if (im.filters) { im.style.filter = "alpha(opacity=" + Math.round(op * 100) + ")"; }
	if (typeof(im.style.opacity) != "undefined") im.style.opacity = op;
}

/*
	PrepNextSlide()
	
	Saves a time reference and loads the next image.
	A listener will be called when the image is loaded.
*/
function PrepNextSlide()
{
	ss_currentImage = (ss_currentImage + 1) % ss_imagePaths.length;

	ss_ticks = GetTicks();
	ss_nextSlide = new Image();

	if (typeof(ss_nextSlide.addEventListener) != "undefined")
	{
		// correct way to do this, but doesn't work with older browsers
		ss_nextSlide.addEventListener("load", NextSlidePrepped, false);
	}
	else
	{
		// not legit, but workaround with older browsers
		ss_nextSlide.onLoad = NextSlidePrepped();
	}
	ss_nextSlide.src = ss_imagePaths[ss_currentImage];
}

/*
	NextSlidePrepped()
	
	Listener set up in PrepNextSlide() for when the next image in the slideshow
	is loaded.
	
	Each slide is (ideally) swapped after 5 seconds. If loading took more than
	5 seconds, image is swapped right away. Otherwise, image will be swapped in
	what time remains until it's been 5 seconds.
*/
function NextSlidePrepped()
{
	ss_delay = ss_ticks + 5000 - GetTicks();
	if (ss_delay < 0) ss_delay = 0;

	setTimeout("NextSlide()", ss_delay);
}

/*
	NextSlide()
	
	Saves a time reference for when current slide begins its hiding and
	initiates the switch.
*/
function NextSlide()
{
	ss_ticks = GetTicks();
	setTimeout("HideCurrentSlide()", 0);
}

/*
	HideCurrentSlide()
	
	Gradually hides the current slide (as a percentage of the half-second
	allowed for hiding it). Faster browsers will generate a smoother
	transition, but it will always last half a second.

	Once the half-second has passed, the slide is completely hidden (we
	can't be sure that the 0% mark was reached, as it would be a coincidence).

	Once the slide is completely hidden, the image's source and height is
	swapped for the next image's source and height. That image will start being
	shown in 250ms — a little delay to allow the browser to make the switch,
	otherwise, the old image might be partially shown and break the transition.
*/
function HideCurrentSlide()
{
	var currentTicks = GetTicks();

	if (currentTicks < (ss_ticks + 500))
	{
		// continue hiding
		SetImageOpacity(document.getElementById("current_image"), (500 - (currentTicks - ss_ticks)) / 500);
		setTimeout("HideCurrentSlide()", 1);
	}
	else if (!ss_switching)
	{
		// make sure the image is completely hidden first
		SetImageOpacity(document.getElementById("current_image"), 0);
		
		ss_switching = true;
		setTimeout("HideCurrentSlide()", 1);
	}
	else
	{
		ss_switching = false;
		
		// switch image and start showing it
		ss_currentSlide = ss_nextSlide;
		ss_nextSlide = null;
		
		document.getElementById("current_image").src = ss_currentSlide.src;
		document.getElementById("current_image").height = ss_currentSlide.height;
		
		ss_ticks = GetTicks() + 250;
		setTimeout("ShowCurrentSlide()", 250);
	}
}

/*
	ShowCurrentSlide()
	
	Gradually shows the new slide (as a percentage of the half-second
	allowed for hiding it). Faster browsers will generate a smoother
	transition, but it will always last half a second.

	Once the half-second has passed, the slide is completely shown (we
	can't be sure that the 0% mark was reached, as it would be a coincidence).

	Finally, the process starts over.
*/
function ShowCurrentSlide()
{
	var currentTicks = GetTicks();
	if (currentTicks < (ss_ticks + 500))
	{
		// continue showing
		SetImageOpacity(document.getElementById("current_image"), (currentTicks - ss_ticks) / 500);
		setTimeout("ShowCurrentSlide()", 1);
	}
	else
	{
		// done — make sure the image is completely visible
		SetImageOpacity(document.getElementById("current_image"), 100);
		PrepNextSlide();
	}
}