// JavaScript Document

/*------------------- SimpleSlideshow------------------------------

a mootools class for a very, very basic slideshow.

Setting up:

HTML:
	simply place all the img tags inside a container div eg:
	<div id="container">
		<img src="img1" class="default" />
		<img src="img2" />
		<img src="img3" />
		<img src="img4" />
    </div>

CSS:
	#container{
		position:relative;
		width and height as required 
	}
	#container img{
		position:absolute;
		top:0;
		left:0;
		visibility:hidden;
	}
	#container img.default{
		visibility:visible;
	}
	
Then inlude mootools and this script in your html and call the script with this...

<script type="text/javascript">
	window.addEvent('domready', function(){ new SimpleSlideshow('container', 6000); }
</script>

the constructor takes 2 arguments - the 1st is the id of the container the 2nd is the amount of time (in miliseconds) each image will pause
*/

SimpleSlideshow = new Class({
	
		container : '',
		imgs : [],
		holdDuration: 0,
		index:0,
		Implements: Options,
                options : {
			
			fadeOptions : {duration:2000}
		},
	
		/*
		CONSTRUCTOR
		new SimpleSlideshow(container:string, holdDuration:integer, [options:object] ):object
		
		Arguments:
			container - the id of the container div
			holdDuration - the amount of time in miliseconds each image will hold
		*/
		
		initialize: function(container, holdDuration, options){
			this.container = $(container);
			this.holdDuration = holdDuration;
			this.setOptions(options);
			this.imgs = this.container.getElements('img');
			this.imgs.each(function(img, i){
                                
				if(i>0) img.setOpacity(0);
                                img.setStyle('visibility', 'visible');
				img.set('tween', this.options.fadeOptions)
			}, this);
			this.gotoNext.periodical(this.holdDuration, this);
		},
		
		gotoNext: function(){
			var newIndex = this.index + 1;
                        if(newIndex > this.imgs.length - 1) newIndex = 0;
			this.imgs[this.index].tween('opacity',0);
			this.imgs[newIndex].tween('opacity',1);
			this.index = newIndex;
		}
});