var Slideshow = Class.create();
Slideshow.prototype = {
	
	initialize: function(container, imageArray)
	{
		// Extend the container
		this.container = $(container);
		
		// Set the scope of the image array
		this.imageArray = $A(imageArray);
		
		// Initialise the counter for the images and the preloader
		this.imageCounter   = 0;
		this.preloadCounter = 0;
		
		// Make an image preloader
		this.imagePreloader = new Element('img');
		this.imagePreloader.onload = (function() {
			document.fire('image:loaded');
		}).bind(this);
		
		// Set the image loaded flag to false
		this.imagePreloader.loaded = false;
		
		// Load the first image in the array
		this.imagePreloader.writeAttribute('src', this.imageArray[this.imageCounter]);
		
		// Wait until the image has loaded before loading the next image
		this.loadBind = this.loadNextImage.bind(this);
		document.observe('image:loaded', this.loadBind);
		
		// Set the bound function for next image to false
		this.nextImageBind = false;
		
		// Change to the next image after 4 seconds
		this.nextImage.bind(this).delay(4);
	},
	
	nextImage: function()
	{
		// Stop observing loading of images
		if (this.nextImageBind) {
			document.stopObserving('image:loaded', this.nextImageBind);
			this.nextImageBind = false;
		}
		
		// If we have gone past the end of the array, reset the counter
		if (this.imageCounter > this.imageArray.length - 1) {
			this.imageCounter = 0;
		}
		
		// Get the new image
		var newImage = this.imageArray[this.imageCounter];
		
		// Make sure the new image has been loaded
		if (Object.isElement(newImage)) {
			newImage.setStyle({ zIndex: 1 });
			newImage.show();
		} else {
			this.nextImageBind = this.nextImage.bind(this);
			document.observe('image:loaded', this.nextImageBind);
			return false;
		}
		
		// Get the old image
		var oldImage = this.container.down('img');
		oldImage.setStyle({ zIndex: 10 });
		
		// Insert the new image into the container
		this.container.insert(newImage);
		
		var effects = [];
		
		// Fade out the old image
		effects.push(new Effect.Fade(oldImage, {
			sync: true,
			duration: 1.0,
			afterFinish: function(effect) { effect.element.remove(); }
		}));
		
		// Fade out the overlay, if is visible
		/*var overlay = this.container.next('.overlay');
		if (overlay.visible()) {
			effects.push(new Effect.Fade(overlay, { sync: true }));
		}*/
		
		// Parallel the fade out effects
		new Effect.Parallel(effects, {
			duration: 1.0,
			afterFinish: function() {
				// Loop this function after 4 seconds
				this.nextImage.bind(this).delay(4);
			}.bind(this)
		});
		
		// Increment the counter
		this.imageCounter++;
	},
	
	
	// Loads the next image in the image array
	loadNextImage: function()
	{
		// Clone the image and store it in the array
		this.imageArray[this.preloadCounter] = this.imagePreloader.clone();
		
		// Increment the preload counter
		this.preloadCounter++;
		
		// Check if there is an image to preload still
		if (this.imageArray[this.preloadCounter]) {
			// Preload the image
			this.imagePreloader.writeAttribute('src', this.imageArray[this.preloadCounter]);
		} else {
			// Stop preloading images
			document.stopObserving('image:loaded', this.loadBind);
		}
	}
};