window.addEvent('domready',function() {
	var showDuration = 8000;
	var container = $('box');
	var images = container.getElements('a');
	var handles = $$('#handles>a');
	var currentIndex = 0;
	var interval;
	/* opacity and fade */
	images.each(function(img,i){ 
		if (i>0)
			img.setStyle('opacity',0);
	});
	handles[0].addClass('active');
	
	$$(handles).each(function(item, index) {
		item.addEvent('click', function(){
			$$(handles).removeClass('active');
			item.addClass('active');
			images[currentIndex].fade('out');
			currentIndex = index;
			images[currentIndex].fade('in');
			$$(images).setStyle('z-index',0);
			images[currentIndex].setStyle('z-index',1);
		});
	});
	/* worker */
	var show = function() {
		images[currentIndex].fade('out');
		currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0;
		$$(handles).removeClass('active');
		handles[currentIndex].addClass('active');
		images[currentIndex].fade('in');
		$$(images).setStyle('z-index',0);
		images[currentIndex].setStyle('z-index',1);
	};
	/* start once the page is finished loading */
	window.addEvent('load',function(){
		interval = show.periodical(showDuration);
	});
});