/**
 * Class Effect.SlideShow
 * 
 * Version: 0.2
 * Created: 27/02/2007
 * Author: Tim Lockwood <tim@lemonbiscuit.com>
 * Copyright: 2007 Lemonbiscuit Ltd <http://www.lemonbiscuit.com/>
 *
 * License:
 * This work is licensed under the Creative Commons Attribution 2.0 UK: England & Wales License.
 * To view a copy of this license, visit http://creativecommons.org/licenses/by/2.0/uk/
 * 
 * Usage: 
 * Include scriptaculous & prototype as normal, then this file.  Create your static image on 
 * the page (preferably a div with background image) with position:absolute and height, width, etc set.
 * 
 * On the calling page, just create a new Effect.Slideshow (preferably after the
 * page has loaded) and pass an array of image URLs to it.
 *
 * new Effect.SlideShow($('mystaticimageid', ['image1.jpg', 'image2.jpg', 'image3.jpg']);
 *
 */ 

// TODO: Some refinement of the node creation process needed to reduce script size
//       and take advantage of the Node.builder functionality in SAU

// TODO: Preloading images (or at least ensuring that the fade doesn't start before 
//       image is fully loaded, possible?)


Effect.SlideShow = Class.create();
Object.extend(Object.extend(Effect.SlideShow.prototype, Effect.Base.prototype), {

	// Constructor
	initialize: function(element, images) {
		this.element = $(element);
		this.options = Object.extend({
			slidetime:	3,
			duration: 	1,
			images: 	images
		}, arguments[1] || {});

		
		this.frontimage = document.createElement('div');
		this.frontimage.setAttribute('id', 'frontimage');
		
		this.backimage = document.createElement('div');
		this.backimage.setAttribute('id', 'backimage');

		Element.setStyle(this.backimage, 
      	{
			height:Element.getStyle(this.element, 'height'),
			width:Element.getStyle(this.element, 'width'),
			top:Element.getStyle(this.element, 'top'),
			left:Element.getStyle(this.element, 'left'),
			position:'absolute'
		});
		Element.setStyle(this.frontimage, 
      	{
			height:Element.getStyle(this.element, 'height'),
			width:Element.getStyle(this.element, 'width'),
			top:Element.getStyle(this.element, 'top'),
			left:Element.getStyle(this.element, 'left'),
			position:'absolute'
		});

		this.element.parentNode.appendChild(this.backimage);
		this.element.parentNode.appendChild(this.frontimage);
		
		this.currentbuffer = 0;
		this.imagecursor = 0;
		
		this.pe = new PeriodicalExecuter(this.shownext.bind(this), this.options.slidetime);
		this.shownext();
	},
	
	// Show Next Image
	shownext: function() {	
	
		var ef = new Effect.Appear(this.frontimage, {
			duration:this.options.duration, 
			from:0.2, 
			afterFinish: this.onappearfinish.bind(this)
		});
		
	},
	
	// Appear effect onfinish callback
	onappearfinish: function() {
		this.imagecursor++;
		if(this.options.images[this.imagecursor] == undefined) {
			this.imagecursor = 0;
		}			
		
		// Copy the frontbuffer to the back buffer
		Element.setStyle(this.backimage, {
			background: Element.getStyle(this.frontimage, 'background-image')
		});
		
		// Hide the front buffer.
		Element.setOpacity(this.frontimage, 0);
		
		// Load the new image into the front buffer ready for the next clock tick.
		Element.setStyle(this.frontimage, {
			background:"url('" + this.options.images[this.imagecursor] + "') no-repeat"});
	}
});