window.addEvent('domready',function() {

	var mySlideshowHTML = '<div id="slideshow-container"><div class="entry slideshow-item"><a href="http://www.nqht.org/projects/latest_news/north_queensferry_census"><img src="http://www.nqht.org/images/uploads/census.jpg" alt="North Queensferry Census::<p>Historic census surveys from 1841 to 1901 are now available to purchase from the website</p>" /></a></div><div class="entry slideshow-item"><a href="http://www.nqht.org/projects/latest_news/chapel_of_st._james"><img src="http://www.nqht.org/images/uploads/chapel.jpg" alt="Chapel of St. James::<p>The story of one of North Queensferry&#8217;s most historic landmarks, by E Patricia Dennison</p>" /></a></div><div class="entry slideshow-item"><a href="http://www.nqht.org/discover/gallery"><img src="http://www.nqht.org/images/uploads/slideshow-gallery.jpg" alt="Interactive Gallery::<p>" /></a></div></div>';
	var mySlideshow = new Element('div', {id: 'slideshow-container', html: mySlideshowHTML});
	mySlideshow.replaces($('slideshow-single'));
	$('main-feature-text').fade('0','0.8');
	/* settings */
	var showDuration = 8000;
	var container = $('slideshow-container');
	var images = container.getElements('img');
	var currentIndex = 0;
	var interval;
	var toc = [];
	var tocActive = 'toc-active';
	var thumbOpacity = 0.9;
	var captionOpacity = 0.8;

	/* new: create caption area */
	var captionDIV = new Element('div',{
		id: 'slideshow-container-caption',
		styles: {
			//display:none,
			opacity: captionOpacity
		}
	}).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);
		images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
		toc[currentIndex].addClass(tocActive).fade(1);
		captionDIV.set('tween',{
			onComplete: function() {
				captionDIV.set('tween',{
					onComplete: $empty
				}).tween('height',captionHeight);
				/* parse caption */
				var title = '';
				var captionText = '';
				if(images[currentIndex].get('alt')) {
					imgSrc = (images[currentIndex].getParent());
					cap = images[currentIndex].get('alt').split('::');
					title = cap[0];
					captionText = cap[1];
					captionDIV.set('html','<h3>' + title + '</h3>' + (captionText ? '<p>' + captionText + '</p>' + '<p><a href="' + imgSrc + '">Read more...</a></p>' : ''));
				}
			}
		}).tween('height',0);
	};

	/* 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 */
		var myCaption = img.get('alt');
					myCaption = myCaption.split('::');
					title = myCaption[0];
					captionText = myCaption[1];
					captionLink = img.getParent();
					myCaption = '<h3>' + title + '</h3>' + (captionText ? '<p>' + captionText.substring(0, 50) + '...</p>' : '');
		toc.push(new Element('div',{
			html: myCaption,
			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);}

	});

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

	/* start once the page is finished loading */
	window.addEvent('load',function(){ show(0); start(); });

});