/**
	slideshow.js v1.0 
	by Tony Collings, yes... yours truly !! 
	Tested against IE6/7/8 and FF2/3 
	Freely distributable under MIT-style license.
 
	Arguments:
		arrImages - An array of images to use in the slideshow.
		options - an object. See options Below.
	
	Options:
		delay - Time between each slide. 1000 = 1 second
		shownav - Boolean. true will show navigational elements to allow the user to automatically click through 

	Example:
		(start code)
			arrImages = new Array(
				{'src':'{path to image}','href':'{url image links to(optional)}','title':'{Alt tag of the image}'}
			); 
			oSlideshow = new Slideshow(arrImages,{
				delay:5000,
				shownav:true
			});
		(end) 
 
 */
 
 
var Slideshow = new Class({

    initialize: function(arrImages,options){
		// Setup some initial properties
        this.arrImages = arrImages; 
		this.options = $extend({
			sAJAXAnimation : 'images/icons/large-ajax-loader.gif',
			sNavigationElement: 'slideNavigation',
			sImageContainerElement: 'container',
			iFadeDuration : 3500 
		}, options || {});

		this.iCurrentSlide = 0;
		// Preload and display Image
		var oImageData = {
			'sTitle' : this.arrImages[this.iCurrentSlide].title,
			'sURL' : this.arrImages[this.iCurrentSlide].href,
			'sImageSrc' : this.arrImages[this.iCurrentSlide].src
		};	
		//this.imagePreload(oImageData);
		//var iContainerHeight = $(this.options.sImageContainerElement).getSize();
		$(this.options.sImageContainerElement).setStyle('height','479px');
		$(this.options.sImageContainerElement).setProperty('html','<a href="'+oImageData.sURL+'" title="'+oImageData.sTitle+'"><img src="'+oImageData.sImageSrc+'" alt="'+oImageData.sTitle+'" border="0" /></a>');
		// Show navigation 
		if(this.options.shownav){
			this.arrImages.each(function(item, index){
				// Create navigational elements for each slide
				var oNavigationalElement = new Element('div', {
					'id': 'button_'+index,
					'class': 'navigationalElement',
					'html': '<a href="javascript:gotoSlide('+index+');">'+(index+1)+'</a>'
					}
				);
				oNavigationalElement.inject($(this.options.sNavigationElement));
			},this); // arrImages.each(function(item, index)	
			
			// CSS Hacking to position navigation elements
			var iPadding = 425-($(this.options.sNavigationElement).getSize().x)-50;
			$(this.options.sNavigationElement).setStyle('padding-left',iPadding);
			// END 
			$('button_'+this.iCurrentSlide).setProperty('class','navigationalElement navigationSelected');
		}
		// And begin.... 
		this.iCurrentSlide++;
		this.start();
    },
	click: function(){
	// Not used atm
	},
	changeImage : function(){
		var iSizeOfImagesArray = this.arrImages.length;
		if(this.iCurrentSlide >= iSizeOfImagesArray) this.iCurrentSlide = 0;
		var iPreviousSlide = (this.iCurrentSlide == 0)?iSizeOfImagesArray:this.iCurrentSlide;
		var sTitle = this.arrImages[this.iCurrentSlide].title;
		var sURL = this.arrImages[this.iCurrentSlide].href;
		var sImageSrc = this.arrImages[this.iCurrentSlide].src;
		var oImageContainer = $(this.options.sImageContainerElement);
		if(this.options.shownav){
			arrImages.each(function(item, index){
				$('button_'+index).setProperty('class','navigationalElement');
			});
			$('button_'+this.iCurrentSlide).setProperty('class','navigationalElement navigationSelected');
		}
		oImageContainer.setStyle('opacity',0);
		oImageContainer.setProperty('html','<a href="'+sURL+'" title="'+sTitle+'"><img src="'+sImageSrc+'" alt="'+sTitle+'" border="0" /></a>');
		this.oFadeFX = new Fx.Tween(oImageContainer,  {property: 'opacity', duration: this.options.iFadeDuration, transition: Fx.Transitions.Quint.easeOut }).start(0,1);
		this.iCurrentSlide++;
	},
	pause : function(){
		$clear(this.intervalID);
	},
	start : function(){
		this.iCurrentSlide = this.iCurrentSlide;
		this.intervalID = this.changeImage.periodical(this.options.delay,this);
	},
	gotoSlide : function(iSlide){
		if(this.oFadeFX && $type(this.oFadeFX == 'object')) this.oFadeFX.cancel();
		this.pause();
		this.iCurrentSlide = iSlide;
		this.changeImage();
		this.start();
	},
	// Not used... causes too much 'flickering'
	imagePreload : function(oImageData){
		var oImageContainer = $(this.options.sImageContainerElement);
		oImageContainer.setProperty('html','<span class="AJAXPreloader"><img src="'+this.options.sAJAXAnimation+'" alt="Loading..." border="0" /></span>');
		this.oPreloadImage =  new Asset.image(oImageData.sImageSrc, {
			onload: function(){
				oImageContainer.setProperty('html','<a href="'+oImageData.sURL+'" title="'+oImageData.sTitle+'"><img src="'+oImageData.sImageSrc+'" alt="'+oImageData.sTitle+'" border="0" /></a>');
			}
		});
	}
	
});