// JavaScript Document
	window.addEvent('domready',function() {
		
		/* settings */
		var showDuration = 20000;
		var container = $('slideshow-container');
		var images = container.getElements('img');
		var currentIndex = 0;
		var interval;
		var toc = [];
		var tocActive = 'toc-active';
		var thumbOpacity = 0.5;
		var SlideContainerOpacity = 0.8;
		
		/* new: create caption area */
		var captionDIV = new Element('div',{
			id: 'slideshow-container-caption',
			styles: {
				//display:none,
				opacity: SlideContainerOpacity
			}
		}).inject(container);
		var captionHeight = captionDIV.getSize().y;
		captionDIV.setStyle('height',0);
		
		/* new: starts the show */
		var start = function() { interval = show.periodical(showDuration); };
		var stop = function() { $clear(interval); };
		/* worker */
		var show = function(to) {
			images[currentIndex].fade('out');
			toc[currentIndex].removeClass(tocActive).fade(thumbOpacity);
			toc[currentIndex].setStyle('border','1px solid #ccc');
			images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
			images[currentIndex].setStyle('cursor','pointer');
			images[currentIndex].set('onclick','window.open("' + document.getElementById("link_" + images[currentIndex].get('src')).value + '")');
			toc[currentIndex].addClass(tocActive).fade(1);
			toc[currentIndex].setStyle('border','1px solid #e61f5a');
			if(document.getElementById("caption_" + images[currentIndex].get('src'))) {
				cap = document.getElementById("caption_" + images[currentIndex].get('src')).value.split('::');
				heightTo = cap[0];
				captionText = cap[1];
			}
			captionDIV.set('tween',{
				onComplete: function() {
					captionDIV.set('tween',{
						onComplete: $empty
					}).tween('height',heightTo);
					/* parse caption */
					var captionText = '';
					if(document.getElementById("caption_" + images[currentIndex].get('src'))) {
						cap = document.getElementById("caption_" + images[currentIndex].get('src')).value.split('::');
						height = cap[0];
						captionText = cap[1];
						captionDIV.set('html', '<div style="padding:8px;">' + (captionText ? captionText : '') + '</div>');
					}
				}
			}).tween('height',0);
		};
		
		/* new: create preview area */
		var preview = new Element('div',{
			id: 'slideshow-container-controls'
		}).inject(container,'after');
		preview.setStyle('padding-left','6px');
		
		/* new: control: table of contents */
		images.each(function(img,i){
			/* add to table of contents */
			toc.push(new Element('img',{
				src: "min_" + img.get('src'),
				title: img.get('alt'),
				styles: {
					opacity: thumbOpacity
				},
				events: {
					click: function(e) {
						if(e) e.stop();
						stop();
						show(i);
						start();
					},
					mouseenter: function() {
						this.fade(1);
					},
					mouseleave: function() {
						if(!this.hasClass(tocActive)) this.fade(thumbOpacity);
					}
				}	
			}).inject(preview));
			if(i > 0) { img.set('opacity',0); }
			
		});
		
		/* new: control: next and previous */
		var next = new Element('div',{
			id: 'next'
		}).inject(container);
		var nextLink = new Element('a',{
			href: '#',
			id: 'next',
			events: {
				click: function(e) {
					if(e) e.stop();
					stop(); show();
				}
			}
		}).inject(next);
		nextLink.set('html', '<img src="images/right.png" style="width:31px;height:54px" alt=">>" />');

		var previous = new Element('div',{
			id: 'previous'
		}).inject(container);
		var previousLink = new Element('a',{
			href: '#',
			id: 'previous',
			events: {
				click: function(e) {
					if(e) e.stop();
					stop(); show(currentIndex != 0 ? currentIndex -1 : images.length-1);
				}
			}
		}).inject(previous);
		previousLink.set('html', '<img src="images/left.png" style="width:31px;height:54px" alt=">>" />');

		/* control: start/stop on mouseover/mouseout */
		container.addEvents({
			mouseenter: function() { stop(); },
			mouseleave: function() { start(); }
		});

		show(0);
		start();
	});