window.addEvent('domready',function() {
			
			/* settings */
			var showDuration = 5000;
			var whitespaceDuration = 0;
			var transitionSpeed = 1000;
			var container = $('slideshow-container');
			var images = container.getElements('img');
			var currentIndex = 0;
			var interval;
			var toc = [];
			var tocActive = 'toc-active';
			var thumbOpacity = 0.7;
			var firstRun = true;
			
			/* new: create caption area */
			var captionDIV = new Element('div',{
				id: 'slideshow-container-caption',
				styles: {
					//display:none,
					opacity: thumbOpacity
				}
			}).inject(container);
			var captionHeight = captionDIV.getSize().y;
			//captionDIV.setStyle('height',0);
			
			/* create circle controls */
			var circleControlBox = $('slideshow-circle-controls');

			// Set Images tweening property and attach slideshow circle controls
			images.each( function(img, idx) {
				img.set('tween', {duration: transitionSpeed});
				if (idx > 0) img.set('opacity',0);
				// Attach new Circle Control/Indicator
				var _the_circle = new Element('a',{'href':'#',
			                                  'class':'control'});
				circleControlBox.adopt(_the_circle);				
			});
			circleControlBox.controls = circleControlBox.getElements('.control');
			circleControlBox.controls.each(function(_the_circle, i) {
			// set click event for circle indicator control
				_the_circle.addEvents({
					click: function(e) {
						if(e) e.stop();
						stop();
						//start(); ---> DON'T RESTART!!
						show(i);
						
						return false;
					}
				});
			});
			
			// Subscribe to before_show event.
			// Coordinate active Circle Control.
			$subscribe('/slideshow/before_show', function(idx) {
				circleControlBox.controls[idx].addClass('active');
				circleControlBox.controls.each(function(ctrl,c_idx){
					if (c_idx==idx) return;
					ctrl.removeClass('active');
				});
			});
			
			/* new: starts the show */
			var start = function() { interval = show.periodical(showDuration); };
			var stop = function() { $clear(interval);  };
			/* worker */
			var show = function(to) {
				
				delay_time = (firstRun)? 0 : whitespaceDuration;
				
				var __setCaption = function() {
					/* parse caption */
					var title = '';
					var captionText = '';
					if(images[currentIndex].get('alt')) {
						cap = images[currentIndex].get('alt').split('::');
						title = cap[0];
						captionText = cap[1];
						captionDIV.set('html','<h3>' + title + '</h3>' + (captionText ? '<p>' + captionText + '</p>' : ''));
					}
				};
				
				var _fadeOut = function(to) {					
					images[currentIndex].fade('out');
					captionDIV.tween('opacity', 0);
					nextIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0));
					currentIndex = nextIndex;
					$publish('/slideshow/before_show', [currentIndex]);
				};
				var _fadeIn = function() {
					__setCaption();
					images[currentIndex].fade('in');
					captionDIV.tween('opacity', 1);
					$publish('/slideshow/show', [currentIndex]);
				};
				_fadeOut(to);
				_fadeIn();
				firstRun = false;
				
				//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('opacity',1); // .tween('height',captionHeight); 
						/* parse caption */
						//var title = '';
						//var captionText = '';
						//if(images[currentIndex].get('alt')) {
							//cap = images[currentIndex].get('alt').split('::');
							//title = cap[0];
							//captionText = cap[1];
							//captionDIV.set('html','<h3>' + title + '</h3>' + (captionText ? '<p>' + captionText + '</p>' : ''));
						//}
						
						//$publish('/slideshow/show', [currentIndex]);
					//}
				//}).tween('opacity',0); // .tween('height',0);
				//$publish('/slideshow/before_show', [currentIndex]);

			};
			
			/* new: create preview area */
			/*var preview = new Element('div',{
				id: 'slideshow-container-controls'
			}).inject(container,'after');*/
			
			/* new: control: table of contents */
		
			
			/* 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(); });
});