window.addEvent('domready',function() {
	/* settings */
	var showDuration 	= 8000,
		container 		= $('slideshow-container'),
		images 			= container.getElements('img'),
		currentIndex 	= 0,
		interval,
		toc 			= [],
		tocActive 		= 'toc-active',
		thumbOpacity 	= 1,
		hoverSelect		= false,
		autoPlay		= true,
		tocEnable		= false,
		randomSelect	= false,
		hoverPause		= false;
	
	/* new: starts the show */
	var start = function() { if (autoPlay) {interval = show.periodical(showDuration); } };
	var stop = function() { $clear(interval); };
	/* worker */
	var show = function(to) {
		images[currentIndex].fade('out');
		if (tocEnable) { toc[currentIndex].removeClass(tocActive); }
		images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
		if (tocEnable) { toc[currentIndex].addClass(tocActive); }
	};
	
	/* new: create preview area */
	
	var preview = new Element('div',{
		id: 'slideshow-container-controls'
	}).inject(container,'after');
	
	/* new: control: table of contents */
	images.each(function(img,i){
		/* add to table of contents */
		if(i == 0) { tocPreActive = tocActive } else { tocPreActive = 'toc-not-active' }
		if (img.get('alt') != null) { tocAlt = img.get('alt'); } else { tocAlt = "" }
		var tocImg = '<a href="#"><img src="' + img.get('src') + '" alt="' + tocAlt + '" title="' + tocAlt + '"></a>';
		toc.push(new Element('div',{
			'class': tocPreActive,
			styles: {
				opacity: thumbOpacity
			},
			html: tocImg,
			events: {
				click: function(e) {
					if(e) e.stop();
					stop();
					show(i);
					start();
				},
				mouseenter: function() {
					this.fade(1);
					if (hoverSelect) {
						stop();
						show(i);
					}
				},
				mouseleave: function() {
					if(!this.hasClass(tocActive)) this.fade(thumbOpacity);
					if (hoverSelect) {
						start();
					}
				}
			}	
		}).inject(preview));
		if(i > 0) { img.set('opacity',0); }
	});
	if (tocEnable) { preview.setStyle('display', 'block'); } else { preview.setStyle('display', 'none'); }
	
	/* next controls */
	$('next').addEvents({	
		click: function(e) {
				if(e) e.stop();
				stop();
				show();
				start();
			}
	});


	/* control: start/stop on mouseover/mouseout */
	if (hoverPause) {
		container.addEvents({	
			mouseenter: function() { stop(); },
			mouseleave: function() { start(); }
		});
	}	
	if (randomSelect) { show($random(0, images.length - 1)); };
	start();
	
});