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

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

	headimage = $$('div#banner');
	headimage = headimage[0];
	headimage.setStyles({'background-color': '#132146', 'background-image': 'none', 'width': '708px', 'height': '277px'});
	var initialImage = headimage.getElement('img');
	
	// 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() {
			if (initialImage) initialImage.destroy();
			loadedImages = arrayShuffle(loadedImages);
			// start image rotation when finished preloading images
			doImageRotation(0);
		}
	});
	
});

function arrayShuffle(origArray) {
  var tmp, rand;
  for(var i =0; i < origArray.length; i++){
    rand = Math.floor(Math.random() * origArray.length);
    tmp = origArray[i]; 
    origArray[i] = origArray[rand]; 
    origArray[rand] =tmp;
  }
  return origArray;
}


// 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);
	});
}