var AjaxSlideShow = new Class({
	Implements: [Options,Events],

	options: {
		container: 'slideshow_container',
		titleContainer: '',
		phpScript: 'slideshow.php',
		containerwidth: 'auto',
		width: 'auto',
		containerheight: 'auto',
		height: 'auto',
		delay: 5000,
		fadeDuration: 500,
		delayFirst: true,
		fadeFirst: true,
		start: 'random',
		autoPlay: true,
		links: [],
		titles: [],
		pager: false,
		pagerContainer: '',
		align: 'center-center'
	},
	
	initialize: function(options) {
		this.setOptions(options);
		this.container = $(this.options.container);
		if(this.options.titleContainer!='') this.options.titleContainer = document.getElementById(this.options.titleContainer);
		this.images = new Array();
		this.imageLinks = new Hash();
		this.loading = false;
		this.fading = false;
		
		if (this.options.links.length>0) {
		  this.options.links.each(function(link){
			this.imageLinks.set(link[0],link[1]);
		  },this);
		  this.container = new Element('a',{
			'href':'javascript:void(0);',
			'target':'_blank',
			'class':'slideshow_link',
			'id':this.options.container+'_link'
		  }).inject(this.container,'bottom');
		}

		this.index = 0;
		
		var width;
		var height;
		
		if ($type(this.options.width)=="number") width = this.options.width;
		if ($type(this.options.height)=="number") height = this.options.height;
		
		this.container.setStyles({
			position: 'relative',
			width: width,
			height: height
		});
	},
	
	start: function(imagePath) {
		this.index = 0;
		this.images.empty();
		this.imagePath = imagePath;
		if(this.options.delayFirst) this.getImageList.delay(this.options.delay,this,imagePath); else this.getImageList(imagePath);
	},
	
	getImageList: function(imagePath) {
		new Request({
			url: this.options.phpScript,
			method: 'get',
			data: 'getImageList='+imagePath,
			onSuccess: this.onListLoad.bind(this)
		}).send();
	},
	
	loadImage: function(index) {
		if(!this.fading) {
			this.cachedImage = null;
			this.loading = true;
			this.cachedImage = new Asset.image(this.imagePath+'/'+this.images[index],{
				onload: this.onLoad.bind(this)
			});

			if (this.options.pager && this.images.length>1) {
				var pagerLinks = this.pagerContainer.getElements('a');
				for(var i=0; i<pagerLinks.length; i++) {
					if(i!=index) {
						pagerLinks[i].removeClass('active');
					} else if(!pagerLinks[i].hasClass('active')) pagerLinks[i].addClass('active');
				}
			}
		}
	},
	
	onListLoad: function(response) {
		if (response!="error") {
			this.images = response.split('|');
			this.container.getChildren().each(function(el){el.fade('out');});
			
			if (this.options.start=="random") {
				this.index = Math.round(Math.random()*(this.images.length-1));
			} else this.index = this.options.start;

			if (this.options.pager && this.options.pagerContainer!='' && this.images.length>1) {
				this.createPager();
			}
			
			this.loadImage(this.index);
		}
	},

	createPager: function() {
		this.pagerContainer = document.getElementById(this.options.pagerContainer);
		var ul = new Element('ul').inject(this.pagerContainer);
		var li;
		var a;
		var title;
		
		for(var i=0; i<this.images.length; i++) {
			li = new Element('li').inject(ul);
			if(this.options.titles.length>=(i+1)) title = this.options.titles[i]; else title = this.images[i];
			a = new Element('a',{
				'id': this.options.container+'-pager-link-'+i,
				'href': 'javascript: void(0);',
				'onclick': 'this.slideShow.loadImage('+i+');',
				'html': i+1,
				'title': title
			}).inject(li);
			a.slideShow = this;
		}
	},

	onLoad: function() {
		this.loading = false;
		this.nextImage = this.cachedImage;
		var imgSize = this.nextImage.getProperties('width','height');

		//var sizeRatio = { width:imgSize.width/imgSize.height, height:imgSize.height/imgSize.width };

		var width = this.options.width;
		var height = this.options.height;
		var containerwidth = this.options.containerwidth;
		var containerheight = this.options.containerheight;
		
		if(width=='auto') width = imgSize.width;
		
		if(containerwidth=='auto') containerwidth = width;
		this.container.setStyle('width',containerwidth+'px');

		if(height=='auto') height = imgSize.height;

		if(containerheight=='auto') containerheight = height;
		this.container.setStyle('height',containerheight+'px');

		//Bild einpassen, wenn es zu groß ist //
		if (imgSize.width>this.options.width) {
			var width = this.options.width;
			var height = '';
		}
		if (imgSize.height>this.options.height) {
			var width = '';
			var height = this.options.height;
		}
		
		this.nextImage.removeProperties('width','height');
		
		//Link Href Ändern, wenn für das Bild ein Link vorhanden ist
		if (this.options.links.length>0) {
			if (this.options.links[this.index]!='') {
				this.container.setProperty('href',this.options.links[this.index]);
			} else this.container.setProperty('href','javascript:void(0);');
		}

		//add title
		if(this.options.titleContainer!='' && this.options.titles.length>0) this.options.titleContainer.set('html',this.options.titles[this.index]);

		//align image
		var top = 0;
		var left = 0;
		var align = this.options.align.split('-');

		switch(align[0]) {
			case 'top': top = 0; break;
			case 'center': top = (containerheight-height)/2; break;
			case 'bottom': top = containerheight-height; break;
		}
		switch(align[1]) {
			case 'left': left = 0; break;
			case 'center': left = (containerwidth-width)/2; break;
			case 'right': left = containerwidth-width; break;
		}

		this.nextImage.setStyles({
			opacity: 0,
			position: 'absolute',
			top: top+'px',
			left: left+'px',
			width: width,
			height: height
		}).inject(this.container,'bottom');

		var duration = this.options.fadeDuration;
		if(this.index==this.options.start && !this.fadeFirst) {
			duration = 0;
			this.fadeFirst = true;
		}

		var imageFadeIn = new Fx.Tween(this.nextImage,{
			duration: duration,
			property: 'opacity',
			onComplete: this.onFadeIn.bind(this)
		});
		
		this.fireEvent('load');
		this.index++;
		if (this.index>=this.images.length) this.index = 0;
		if(this.options.autoPlay) this.loadImage.delay(this.options.delay,this,this.index);
		this.fading = true;
		imageFadeIn.start(0,1);
		if ($defined(this.currentImage)) this.currentImage.fade('out');
	},
	
	onFadeIn: function() {
		if ($defined(this.currentImage)) this.nextImage.replaces(this.currentImage);
		this.currentImage = this.nextImage;
		this.nextImage = null;

		this.fading = false;
	}
});

var slideShow;

function initSlideShow(slideShow,imagePath,options) {
	window.addEvent('domready',function(){
		slideShow = new AjaxSlideShow(options);
		slideShow.start(imagePath);
	});
}

function changeSlideShow(slideShow,imagePath) {
	slideShow.start(imagePath);
}