var visible;
var imageClicked = false;
var imgs;
imgs = $$('.slides img');

function onImageClicked(imageNum)
{
	if (imgs != null)
	{
		imageClicked = true;
		for (var i = 1; i <= 8; i++)
		{
			var id = "bullet" + i;
			var bulletImage = document.getElementById(id);
			if (i == imageNum)
			{
				bulletImage.src = "/images/dot1.png";
				document.getElementById("slide" + i).style.visibility = "visible";
				document.getElementById("slide" + i).style.display = "inline";
				document.getElementById("slide" + i).style.opacity = 1.0;
			} 
			else 
			{
				bulletImage.src = "/images/dot2.png";
			}
			
			if (i < imageNum)
			{
				document.getElementById("slide" + i).style.display = "none";
				document.getElementById("slide" + i).style.opacity = 0.0;
			}
		}
		
		visible = imgs.findAll(function(img){ return img.visible(); });
		
		// Stop the slide show, the user is now in control!
		clearInterval(slideShow);
	}
}       	

function runSlides()
{
	imgs = $$('.slides img');
	visible = imgs.findAll(function(img){ return img.visible(); });
  	if (visible.length > 1) 
  	{
  		if (document.getElementById("slide8").style.visibility == "hidden" && !imageClicked)
  		{
  			document.getElementById("slide8").style.visibility = "visible";
  			document.getElementById("slide7").style.visibility = "visible";
  			document.getElementById("slide6").style.visibility = "visible";
  			document.getElementById("slide5").style.visibility = "visible";
  			document.getElementById("slide4").style.visibility = "visible";
  			document.getElementById("slide3").style.visibility = "visible";
  			document.getElementById("slide2").style.visibility = "visible";
  			document.getElementById("slide1").style.visibility = "visible";
  		}
  		
		// Find the number of the image that is about to appear.
  		var imageNum = parseInt(visible.last().id.substring(visible.last().id.length - 1)) + 1;
  		visible.last().fade({ duration: 1.5 });
  		
  		// Update the dot to the current image.
  		for (var i = 1; i <= 8; i++)
		{
			var id = "bullet" + i;
			var bulletImage = document.getElementById(id);
			if (i == imageNum)
			{
				bulletImage.src = "/images/dot1.png";
			} 
			else 
			{
				bulletImage.src = "/images/dot2.png";
			}
		}
  	}
  	else 
  	{
  		imgs.last().appear({ duration: 1.5, afterFinish: function(){ imgs.slice(0,imgs.length-1).invoke('show');  } });
  		
  		// Update the dot to the current image.
  		for (var i = 1; i <= 8; i++)
		{
			var id = "bullet" + i;
			var bulletImage = document.getElementById(id);
			if (i == 1)
			{
				bulletImage.src = "/images/dot1.png";
			} 
			else 
			{
				bulletImage.src = "/images/dot2.png";
			}
		}
  	}
}
var slideShow = 0;
slideShow = setInterval(runSlides, 5000);