document.observe("dom:loaded", function() 
{ 
	//GLOBAL VARIABLES
	var ssImages	=	$$('.ss-image'),
		counter		=	$('ss-counter'),
		arrayLength	=	ssImages.length,
		wait		=	7000,
		time		=	1,
		i			=	0;
	
	//INITIALIZE
	
	ssImages.each(function(image)
	{
		image.setStyle({'display':'none'})
	});
	
	ssImages[0].setStyle({'display':'block'});
	
	updateCounter();
	
	$$('.ss-control').each(function(control)
	{
		control.observe("click" , function()
		{
			if(this.id == "ss-next")
			{
				clearInterval(start);
				
				var show	=	i+1,
					hide	=	i;
				
				if(i == arrayLength -1)
				{
					imageSwap(0,hide);
					i = 0;
				}
				else
				{
					imageSwap(show,hide);
					i++
				}
				start	=	setInterval(runSlideshow,wait);
				updateCounter();
			}
			else if (this.id == "ss-prev")
			{
				clearInterval(start);
				
				var show	=	i-1,
					hide	=	i;
				
				if(i == 0)
				{
					imageSwap(arrayLength-1,hide);
					i = arrayLength - 1;
				}
				else
				{
					imageSwap(show,hide);
					i--;
				}
				start	=	setInterval(runSlideshow,wait);
				updateCounter();
			}
			else
			{
				clearInterval(start);
			}
		});
	});

		
	//RUN THE SLIDESHOW LOOP
	
	loopSlideshow();
	
	function imageSwap(a,b)
	{
		Effect.Appear(ssImages[a] , {duration:time});
		Effect.Fade(ssImages[b] , {duration:time});
	}
	
	function loopSlideshow()
	{
		start	=	setInterval(runSlideshow,wait);
	}

	function runSlideshow()
	{
		var show	=	i + 1,
			hide	=	i;
		
		if(show == arrayLength)
		{
			imageSwap(0,hide);
			i = 0;
		}
		else
		{
			imageSwap(show,hide);
			i++;
		}
		
		updateCounter();
		
	}
	
	function updateCounter() 
	{
		var textIn = i+1 + ' of ' + arrayLength;
		counter.innerHTML = textIn;
	}
});