window.addEvent('domready',function() {
			/* settings */
			var showDuration = 4500;
			var container = $('slideshow-container');
			var images = container.getElements('img');
			var currentIndex = 0;
			var interval;
			var toc = [];
			var tocWidth = 20;
			var tocBare = 260;
			var tocActive = 'toc-active';

			var controlers = $('controlers');
			var state = "play";
			
			
			
			/* 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);
				images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
				toc[currentIndex].addClass(tocActive);
			};
			
			var uptateControls = function() {
					if(state == "play") {
						pause.setStyle('display','');
						document.getElementById("pause").style.display="";
						doplay.setStyle('display','none');
						document.getElementById("doplay").style.display="none";
						
					}	else {
						pause.setStyle('display','none');
						pause.style.display="none";	
						document.getElementById("pause").style.display="none";	
						doplay.setStyle('display','');
						document.getElementById("doplay").style.display="";
					}
				
			};
			
			/* new: control: table of contents */
			images.each(function(img,i){

				toc.push(new Element('a',{
					text: " ", //i+1,
					href: 'javascript:void(0);',
					'class': 'toc' + (i == 0 ? ' ' + tocActive : ''),
					events: {
						click: function(e) {
							if(e) e.stop(); 
							stop();
							show(i);
							state = "pause";
							uptateControls();
						}
					},
					styles: {
						left: ((i + 1) * (tocWidth + 10) + tocBare)
					}
				}).inject(container));
				if(i > 0) { img.set('opacity',0);	}
			
				
			});
			
			
			/* new: control: next and previous */
			var next = new Element('a',{
				href: 'javascript:void(0);',
				id: 'next',
				events: {
					click: function(e) {
						if(e) e.stop();
						stop(); show();
					}
				}
			}).inject(container);
			
			
			var pause = new Element('a',{
				href: 'javascript:void(0);',
				id: 'pause',
				text: '',
				events: {
					click: function(e) {
						if(e) {
							if(state == "play") {
								stop();
								state = "pause";
								uptateControls();
							} else {
								start();
								state = "play";
								uptateControls();
							}
						}				
						//stop(); 
						show();
					}
				}
			}).inject(container);

			var doplay = new Element('a',{
				href: 'javascript:void(0);',
				id: 'doplay',
				text: '',
				events: {
					click: function(e) {
						if(e) {
							if(state == "play") {
								stop();
								state = "pause";
								uptateControls();
							} else {
								start();
								state = "play";
								uptateControls();
							}
						}				
						//stop(); 
						show();
					}
				}
			}).inject(container);
			
			
			var previous = new Element('a',{
				href: 'javascript:void(0);',
				id: 'previous',
				text: '',
				events: {
					click: function(e) {
						if(e) e.stop();
						stop(); 
						show(currentIndex != 0 ? currentIndex -1 : images.length-1);
					}
				}
			}).inject(container);
			
		

			
			/* new: control: start/stop on mouseover/mouseout */
			container.addEvents({
				mouseenter: function() { 
					//stop(); 
					controlers.fade('in');
					previous.style.display="";
					next.style.display="";
					uptateControls();
				},
				mouseleave: function() { 
					//start();
					controlers.fade('out');
					previous.style.display="none";
					next.style.display="none";
					uptateControls();
					pause.style.display="none";	
				}
			
			});
			

			
			/* start once the page is finished loading */
			window.addEvent('load',function(){
				start();
				pause.style.display="none";
				next.style.display="none";
				previous.style.display="none";
				doplay.style.display="none";
				
			});
		});