/*
Proworx.Fader
=============
Constructor Arguments:
- CSS selector pointing to the initial image (only the first match will be used)
- Path to other images
- Array of other images file names
- Interval time in seconds
- Fade duration time in seconds

Notes:
Other than opacity and visibility, no styles are automatically applied to images.
You should ensure that all positioning properties are specified in your style
sheets, to ensure the images fade in on top of one another.
*/

if (typeof Proworx == 'undefined') {
	var Proworx = {};
}
Proworx.Fader = new Class({
    initialize: function(selector, path, images, interval, duration) {
        var initial = $E(selector);
		this.path = path;
		this.images = [initial].merge(images);
		this.interval = interval * 1000;
		this.duration = duration * 1000;
        this.container = initial.getParent();		
        this.effects = [];
		this.index = 0;
		this.loadImages();
		this.timer = this.rotate.periodical(this.interval, this);
    },
	loadImages: function() {
		this.images.each(function(image, i) {
			if (typeof image == 'string') {
				var img = new Image();
				img.src = this.path + image;
				image = this.images[i] = new Element('img', {src: this.path + image}).setOpacity(0);
				this.container.appendChild(image);
			}
			this.effects[i] = image.effect('opacity', {duration: this.duration, transition: Fx.Transitions.linear});
		}.bind(this));
	},
	rotate: function() {
		var index = (this.index == this.images.length - 1) ? 0 : this.index + 1;
		
		this.effects[index].element.setStyle('z-index', 1);
		this.effects[this.index].element.setStyle('z-index', 0);
			
		this.effects[index].start(0, 1);
		var delay = function(effect) {
			effect.set(0);
		}
		delay.delay(this.duration, this, this.effects[this.index]);
		
		this.index = index;	
	}
});