doLoad = function() {
	animatebanner = new AnimateBanner();
	animatebanner.start();
}

AnimateBanner = function() {

	this.DURATION = 10000;
	this.INTERVAL = 10000;

	this.animationCounter = 0;

	this.animationImages = [
		"acoorte", "adv", "ahb", "animation", "chagall", "dufy", "kandinsky", "modigliani", "picasso", "picasso2",
		"psignac", "rembrandt", "ripolles", "utrillo", "vandongen", "vr"
	].sort(function(a,b) {
		return (Math.round(Math.random())-0.5);
	});

	this.animations = [];
	this.flag = 0;

	this.modifiers = new Modifiers();
	this.modifiers.duration = this.DURATION;
	this.modifiers.profile = this.modifiers.SLOWFASTSLOW;
	this.modifiers.removeAfterwards = false;

	/* Animate 0 to 1 */
	el = document.getElementById('animation-0');
	this.animations[this.animations.length] = {
		element: el,
		targetState: {
			opacity: '0'
		}
	};
	el = document.getElementById('animation-bottom-0');
	this.animations[this.animations.length] = {
		element: el,
		targetState: {
			opacity: '0'
		}
	};

	/* Animate 1 to 0 */
	el = document.getElementById('animation-1');
	this.animations[this.animations.length] = {
		element: el,
		targetState: {
			opacity: '100'
		}
	};
	el = document.getElementById('animation-bottom-1');
	this.animations[this.animations.length] = {
		element: el,
		targetState: {
			opacity: '100'
		}
	};

}

AnimateBanner.prototype = {

	start: function() {

		this.timer = setInterval(

			function(){

				// animate it
				Animator.animate(this.animations, this.modifiers);

				// flip the animation targets so we turn them back next time
				this.animations[0].targetState.opacity = (this.flag == 0 ? '100' : '0');
				this.animations[1].targetState.opacity = (this.flag == 0 ? '100' : '0');
				this.animations[2].targetState.opacity = (this.flag == 0 ? '0' : '100');
				this.animations[3].targetState.opacity = (this.flag == 0 ? '0' : '100');

				// set a new image as the target image to animate towards
				document.getElementById('animation-' + (1-this.flag)).getElementsByTagName('img')[0].setAttribute('src', '/website/img/bg_header_' + this.animationImages[this.animationCounter] + ".jpg");
				
				document.getElementById('animation-bottom-' + (1-this.flag)).getElementsByTagName('img')[0].setAttribute('src', '/website/img/bg_footer_' + this.animationImages[this.animationCounter] + ".jpg");

				// flip flag
				this.flag = 1 - this.flag;

				// i++
				this.animationCounter++;
				if (this.animationCounter > this.animationImages.length-1)
					this.animationCounter = 0;

			}.closure(animatebanner),

			this.INTERVAL

		);

	},

	pause: function() {
		window.clearInterval(this.timer);
	}

}