/* CSS Javascript Gallery created by David Bunce david@dodifferent.org.uk */
 
 
 window.addEvent('load',function() {
	/* settings */
	var showDuration = 6000; /* Bigger number means a slower slide show transition */
	/* end settings */
	
	// Begin code by setting the variables
	var container = $('scroller');
	var helperContainer = $('helpers');
	var controlContainer = $('controlContainer');
	var controlPauseContainer = $('controlPauseContainer');
	var imageArray = container.getElements('div');
	var currentIndex = 0;
	var interval; 
	var listGalleryElements = [];
	var listGalleryElementsActive = 'show-active';
	
	// Declare the 'Start' button
	var controlGalleryStart = new Element('a', {
		id: 'controlGalleryStart', 
		href: '#',
		'class': 'carousel-pause',
		text: '',
		width: '30px'
		}).inject(controlPauseContainer);
	
	
	var controlGalleryStop;
	
	// Overall function to start the thing going
	var start = function() { 
		interval =  show.periodical(showDuration);  
	}; 
	
	// Overall function to stop
	var stop = function()  { $clear(interval); };
	
	// Handles the math related to which image is showing and which number is considered 'active'
	var show = function(to) {
		imageArray[currentIndex].fade('out');
		listGalleryElements[currentIndex].removeClass(listGalleryElementsActive);
		imageArray[currentIndex = ($defined(to) ? to : (currentIndex < imageArray.length - 1 ? currentIndex+1 : 0))].fade('in'); 
		listGalleryElements[currentIndex].addClass(listGalleryElementsActive); 		
	}; 
	
	
	// This is the main loop - here the business is done
	imageArray.each(function(div,i){
		listGalleryElements.push(new Element('a',{
		text: i+1,
		href: '#',
		'class': 'listGalleryElements' + (i == 0 ? ' ' + listGalleryElementsActive :  ''),
		events: { // Determines what happens when you click on a number
			click: function(e) {
				if(e) e.stop();
					stop();
					show(i);
					$('controlGalleryStart').dispose(); // Need to make sure you can restart, so pass the user the start function choice
						var toggleStop  = new Element('a', {
						id: 'controlGalleryStop', 
						href: '#',
						'class': 'carousel-resume',
						width: '30px',
						events: {
							click: function(f) {
								$('controlGalleryStop').dispose();
								controlGalleryStart.inject(controlPauseContainer);
								start();
							}
						}
			}).inject(controlPauseContainer);
					}
				}
		}).inject(controlContainer)); 
	if(i > 0) { div.set('opacity',0); }
	}); 
	
	// This controls the start-stop function. It's a simple toggle between two elements
	controlGalleryStart.addEvents({
		click: function(e) { 
			if(e) e.stop();
			stop();
			$('controlGalleryStart').dispose(); // Out with the old . . . 
			var toggleStop  = new Element('a', { // And in with the new!
				id: 'controlGalleryStop', 
				href: '#',
				'class': 'carousel-resume',
				text: '',
				width: '30px',
				events: {
					click: function(f) {
								$('controlGalleryStop').dispose();
								controlGalleryStart.inject(controlPauseContainer);
								start();
							}
					}
			}).inject(controlPauseContainer);
		}
	}); 
	
	interval =  show.periodical(showDuration); 
 });