/******************************************

Script		: SlideShow
Version		: 0.2
Author		: Benjamin Schoch
Framework	: Mootools

Example usage:

onload / -domready:
show = new SlideShow('slideshow',{random:true, wait:3000, duration:1000, height: 'auto'});

html:
<div id="slideshowContainer">
	<div id="slideshow">
		<img src="images/index/slideshow/01.jpg" alt="MH - Aluglanz" title="MH - Aluglanz" />
		<img src="images/index/slideshow/02.jpg" alt="MH - Aluglanz" title="MH - Aluglanz" />
		<img src="images/index/slideshow/03.jpg" alt="MH - Aluglanz" title="MH - Aluglanz" />
		<img src="images/index/slideshow/04.jpg" alt="MH - Aluglanz" title="MH - Aluglanz" />
	</div><!-- end of slideshow -->
	<p>Bildunterschrift</p>
</div><!-- end of slideshowContainer -->

*******************************************/

var SlideShow = new Class({
	options: {
		random: true, duration: 1000, wait: 2800, height: 0, start: 1
	},
	initialize: function(container,options) {
		this.setOptions(options);
		if(container.match('#')){container=container.replace('#','');}
		containerObj = $(container);
		if(!$(containerObj) || !$type(containerObj).match(/element/)){return false;}
		var elements = $$("#"+container+" img");
		if(!$type(elements).match(/array/) || elements.length < 1){return false;}
		if(this.options.random){this.options.start = $random(1, elements.length);}
		this.overflowStyle = 'hidden';
		if(	elements[0]
				&&
			!($type(this.options.height) == 'number' && this.options.height > 0)
				&&
			!($type(this.options.height) == 'string' && this.options.height.match(/[em|px|pt]{1}$/))
		){
			this.options.height = elements[0].getSize().y;
			if(this.options.height == 0){
				this.options.height = 'auto'
				this.overflowStyle = '';
			}
		}
		containerObj.setStyles({height : this.options.height, position : 'relative', overflow : this.overflowStyle});
		elements.each(function(imgEl, i) {
			imgEl.addClass('ew_slide_' + ++i);
			imgEl.setStyles({display: 'block', opacity: 0, overflow: 'hidden', position: 'absolute', top: 0, left: 0, zIndex: 1});
			if(i == this.options.start) {imgEl.setStyles({opacity: 1, zIndex: 2});
			} else if(i == this.getNextItem(containerObj, this.options.start)) {imgEl.setStyle('opacity', 1);}
		}.bind(this));
		if(elements.length > 1){
			this.start.delay(this.options.wait, this, [containerObj, this.options.start]);
		}
	},
	start: function(el, i) {
		var cur = el.getElement('.ew_slide_' + i);
		var next = this.getNextItem(el, i);
		cur.set('tween', {duration: this.options.duration}).fade('out').get('tween').chain(function() {
			cur.setStyle('z-index', 1);
			el.getElement('.ew_slide_' + next).setStyle('z-index', '2');
			el.getElement('.ew_slide_' + this.getNextItem(el, next)).setStyle('opacity', '1');
			this.start.delay(this.options.wait, this, [el, next]);
		}.bind(this));
	},
	getNextItem: function(el, i) {
		var bool;
		el.getChildren().each(function(imgEl) {
			if(imgEl.hasClass('ew_slide_' + (i+1))) {bool = true;}
		});
		if(bool) {return i+1;
		} else {return 1;}
	}
});
SlideShow.implement(new Options);