Event.observe(window, 'load', function() {
	$$(".container").each(function(c) {
		var imgpack = new ImagePack(c, 25);
	});
});

var ImagePack = Class.create({
	_domNode: null,
	_images: [],
	_delay: 5, //sec
	_index: 0,
	_effectDuration: 2.0,

	initialize: function(el, delay) {
		this._domNode = el;
		this._delay = delay;
		this._images = el.select("img");
		this._images.each(function(i) {
			Element.hide(i);
		});
		
		var first = this._images[0];
		Effect.Appear(first, {duration: this._effectDuration}); 
		var pe = new PeriodicalExecuter(this._go.bindAsEventListener(this), this._delay);
	},
	
	_go: function() {
		var nextIndex = (this._index + 1 == this._images.length) ? 0 : this._index + 1;
		var nextImage = this._images[nextIndex];
		var currImage = this._images[this._index];
		Effect.Fade(currImage, {
			duration: this._effectDuration,
			to: 0.25,
			afterFinish: this._swap.bindAsEventListener({currImage: currImage, nextImage: nextImage, inst: this})
			});
		this._index = nextIndex;
	},
	
	_swap: function(args) {
		Element.setStyle(this.currImage, {zIndex: 1});
		Element.setStyle(this.nextImage, {zIndex: 2});
		Effect.Appear(this.nextImage, {
			duration: this.inst._effectDuration,
			afterFinish: this.inst._reset.bindAsEventListener({image: this.currImage})
		});
	},
	
	_reset: function() {
		Element.setStyle(this.image, {zIndex: 0, display: "none"});
	}
});