//Binden der Klasse an die HTML Elemente
window.addEvent('domready', function(e) {
	//e = new Event(e).stop();
	$$('.slideshow').each(function(objHTMLElement) {
		new Slideshow({container:objHTMLElement});
	});
});

var Slideshow = new Class({
	Implements: Options,

	options: {
		container: null
	},

	objContainer: null,
	arrImages: [],
	curImage: 0,

	initialize: function(options) {
		//options übernehmen
		this.setOptions(options);
		this.objContainer = this.options.container;

		//Elemente der Slideshow finden
		if(this.objContainer != null) {
			var arrObjects = null;

			//zurück-Links
			arrObjects = this.objContainer.getElements('.slideshow_prev')
			arrObjects.each(function($object) {
				$object.addEvent('click', function(e) {
					e = new Event(e).stop();
					this.prevImage();
				}.bind(this));
			}.bind(this));

			//vor-Links
			arrObjects =this.objContainer.getElements('.slideshow_next')
			arrObjects.each(function($object) {
				$object.addEvent('click', function(e) {
					e = new Event(e).stop();
					this.nextImage();
				}.bind(this));
			}.bind(this));

			//Image Elemente der Slideshow finden
			if(this.objContainer.getElement('.slideshow_canvas')) {
				this.arrImages = this.objContainer.getElement('.slideshow_canvas').getElements('img');
			}

			//Anzahl der Bilder
			arrObjects = this.objContainer.getElements('.slideshow_number_of_images')
			arrObjects.each(function($object) {
				$object.set('text', this.arrImages.length);
			}.bind(this));
		}

		//Alle Bilder ausblenden und das aktuelle (erste) Bild einblenden
		this.arrImages.each(function(image, i) { image.fade('hide'); });
		this.showImage(this.curImage);
		if(this.objContainer.getElement('.slideshow_canvas')) { this.objContainer.getElement('.slideshow_canvas').setStyle('display', 'block'); }
	},

	setCurrentImageText: function(currentImageNumber) {
		var $arrObjects = this.objContainer.getElements('.slideshow_current_image')
		$arrObjects.each(function($object) {
			$object.set('text', currentImageNumber);
		}.bind(this));
	},

	showImage: function(imageId) {
		if(this.arrImages.length > 0) {
			this.arrImages[this.curImage].fade('out');

			if(imageId < 0) { imageId = this.arrImages.length-1; }
			this.curImage = Math.abs(imageId % this.arrImages.length);


			this.setCurrentImageText((this.curImage+1));
			this.arrImages[this.curImage].fade('in');
		}
		else { this.setCurrentImageText(0); }
	},

	prevImage: function() {
		this.showImage(this.curImage-1);
	},

	nextImage: function() {
		this.showImage(this.curImage+1);
	}
});