var state = 1;
var timerID;

// function to switch through a series of images
function changeImage() 
{
	var image = document.getElementById("image");
	var image_caption = document.getElementById("image-caption");

	clearTimeout( timerID );

	switch(state)
	{
	   
	   case 0:
	      image.src = "images/derek2.jpg";
	      image_caption.innerHTML = " ";
	      state = 1;
	      break;
	   case 1:
	      image.src = "images/derek.jpg";
	      image_caption.innerHTML = " ";
	      state = 2;
	      break;
	   case 2:
	      image.src = "images/derek-edges.jpg";
	      image_caption.innerHTML = "<a href=\"edges.php\">What's this?</a>";
	      state = 3;
	      break;
	   case 3:
	      image.src = "images/derek-cluster.jpg";
	      image_caption.innerHTML = "Visiting <a href=\"http://www.sharcnet.ca/\">SharcNet</a>";
	      state = 4;
	      break;
	   case 4:
	      image.src = "images/smallderek.jpg";
	      image_caption.innerHTML = "Taking a nap...";
	      state = 5;
	      break;
	   case 5:
	      image.src = "images/derek-biking-small.jpg";
	      image_caption.innerHTML = "<a href=\"biking.php\">Biking</a>";
	      state = 0;
	      break;
	   default:
	      state=0;
	}
	timerID = setTimeout ( changeImage, 5000 );
}

// Anonymous function to start timer and set event handlers after page loads
window.onload = function() {
   timerID = setTimeout ( changeImage, 5000 );
   document.getElementById("image").onclick = changeImage;
};