// global variables
var busy = false; loadedImages = [], headimage = '';

// onLoad event for preloading images
window.addEvent('domready', function(){

	headimage = $$('div#banner');
	headimage = headimage[0];
	headimage.setStyles({'background-color': '#475861', 'background-image': 'none', 'width': '732px', 'height': '200px'});
	var initialImage = headimage.getElement('img');
	if (initialImage) initialImage.destroy();

	// preloading images
	new Asset.images(images, {
		onProgress: function(i) {
			
			this.setStyles({
				'position': 'absolute',
				'opacity': 0,
				'top': 0,
				'left': 0
			});
			// opacity : 1, erstes bild ist sofort da
			// opacity : 0, auch das erste bild wird eingeblendet
			if (i == 0) this.setStyles({'opacity': 1});

			loadedImages[i] = this;
		},
		onComplete: function() {
			// start image rotation when finished preloading images
			doImageRotation(0);
		}
	});
});

// image rotation, starting with i
function doImageRotation(i) {
	
	// setting up rotating indexes for new and old images
	if (i == loadedImages.length) i = 0;
	
	var ii = i-1;
	if (ii == -1) var ii = loadedImages.length - 1;
	
	headimage.grab(loadedImages[i], 'top');
	if (loadedImages.length <= 1) return;
	
	var effect = new Fx.Tween(loadedImages[i], {property: 'opacity', duration: 2500});
	var effectOld = new Fx.Tween(loadedImages[ii], {property: 'opacity', duration: 2500});
	
	effectOld.start(0).chain(function() {loadedImages[ii].dispose();});
	effect.start(1).chain(function() {
		this.start.delay(7000, this, [1]);
	}).chain(function() {
			doImageRotation(i+1);
	});
}