var ImageFade = Class.create({
	
	initialize: function(element, options) {
	
		this.element = $(element);
		
		this.options = Object.extend({
			
			// de afbeelding die als eerst getoond wordt, "rand" voor een willekeurige afbeelding
			current: 'rand',
			
			// de tijd in seconden tussen de fades
			interval: 3,
			
			// het aantal seconden wat een afbeelding er over doet om te verdwijnen
			fadeTime: 1,
			
			// het aantal seconden wat een afbeelding er over doet om tevoorschijn te komen
			appearTime: 1
			
		}, options);
		
		// alle afbeeldingen selecteren
		this.images = this.element.select('IMG');
		
		// in het geval er in het begin een random afbeelding getoond moet worden of als de gekozen afbeelding niet bestaat
		if (this.options.current == 'rand' || Object.isUndefined(this.images[this.options.current])) {
			this.options.current = this.randomImageIndex();
		}
		
		// alle afbeeldingen verbergen
		this.images.each(function(img, i) {
			if (i != this.options.current) {
				img.setStyle({
					opacity: 0
				});
			} else {
				this.current = i;
			}
		}.bind(this));
		
		this.history = [this.current];
		
		this.executer = new PeriodicalExecuter(this.changeImage.bind(this), this.options.interval);
	},
	
	/**
	 * Verkrijgt een willekeurige afbeeldingkey.
	 */
	randomImageIndex: function() {
		return Math.floor(Math.random() * (this.images.length));
	},
	
	/**
	 * De functie die de afbeelding wijzigt.
	 */
	changeImage: function() {
		
		var newNum;
		
		// een willekeurige afbeelding kiezen die nog niet eerder is vertoond
		do {
			newNum = this.randomImageIndex();
		} while(this.history.include(newNum));

		// huidige afbeelding verbergen
		new Effect.Morph(this.images[this.current], {
			duration: this.options.fadeTime,
			style: 'opacity: 0'
		});
		// nieuwe afbeelding tonen
		new Effect.Morph(this.images[newNum], {
			duration: this.options.appearTime,
			style: 'opacity: 1'
		});
		
		// als alle afbeelding getoond zijn mag de geschiedenis opnieuw
		if (this.history.length == this.images.length - 1) {
			this.history = [newNum];
		} else {
			this.history.push(newNum);
		}
		
		// huidige afbeelding updaten
		this.current = newNum;
	}
});
ImageFade.BindTo = function(css, options) {
	Event.observe(window, 'load', function() {
		$$(css).each(function(el) {
			new ImageFade(el, options);
		}); 
	});
};