/**
 * 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?)

function randOrd(){
return (Math.round(Math.random())-0.5); }

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

	// Constructor
	initialize: function(element, arr, ele, ele2, second) {
    
        var imgArray = arr;
        this.ele = ele;
        this.ele2 = ele2;
        imgArray.sort( randOrd );
                
        //$('header_pictures').style.backgroundImage = "url("+imgArray[0]+")";
        if($(ele))
        $(ele).setStyle({backgroundImage: "url("+imgArray[0]+")"});
        

		this.element = $(element);
		this.options = Object.extend({
			slidetime:	6,
			duration: 	3,
			images: 	imgArray
		}, imgArray || {});
        
		this.frontimage = document.createElement('span');
		if(second)
		  this.frontimage.setAttribute('id', 'frontimage2');
		else
      this.frontimage.setAttribute('id', 'frontimage');
		this.backimage = document.createElement('span');
		if(second)
		  this.frontimage.setAttribute('id', 'backimage2');
		else
    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'
		});
		
		
        this.backimage.className="img";
        this.backimage.setStyle({backgroundImage: "url("+imgArray[0]+")"});



		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.frontimage.className="img";
        this.frontimage.setStyle({backgroundImage: "url("+imgArray[0]+")"});

		this.element.appendChild(this.backimage);
		this.element.appendChild(this.frontimage);

		this.currentbuffer = 0;
		this.imagecursor = 0;
		this.pe = new PeriodicalExecuter(this.shownext.bind(this), this.options.slidetime);

		this.shownext();
        var parrent = $(ele2);
        var oldSpan = $(ele);
        //parrent.removeChild(oldSpan);
	},
	
	// Show Next Image
	shownext: function() {	
		var ef = new Effect.Appear(this.frontimage, {
			duration:this.options.duration, 
			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"});
	}
});