function doOnLoad()
{

	bannerAnimator.init();
	
}

var bannerAnimator =
{
	
	// Constants
	
	viewWidth: 700,
	viewHeight: 180,
	imageWidth: 741,
	imageHeight: 444,
	
	// Properties
	
	bannerElement1: null,
	bannerElement2: null,

	bannerElementWidth: null,
	bannerElementHeight: null,
	
	scale: null,
	scaleStart: null,
	scaleEnd: null,
	scaleStep: null,
	
	intervalAnimation: null,
	
	pos: null,
	
	// Methods
	init: function()
	{
		this.pos = 0;

		bannerElement1 = document.getElementById("banner1");
		bannerElement2 = document.getElementById("banner2");

		/*

		var computedStyle;
	
		if (typeof bannerElement1.currentStyle != 'undefined')
		{
			computedStyle = bannerElement1.currentStyle;
		}
		else
		{
			computedStyle = document.defaultView.getComputedStyle(bannerElement1, null);
		}
		
		cssIsEnabled = false;
		
		if (typeof (computedStyle["zIndex"]) != "undefined")
		{
			cssIsEnabled = (computedStyle["zIndex"] == 3);
		}
		
		*/
		

		if (bannerElement1 && bannerElement2)
		//if (bannerElement1 && cssIsEnabled)
		{
			this.bannerElementWidth = parseFloat(bannerElement1.style.width) / (1/16);
			this.bannerElementHeight = parseFloat(bannerElement1.style.height) / (1/16);
			
			/*
			// Add second visual container
			if(!(oTargetDiv = document.getElementById("visual")))
			{
				//return;
			}

			oImageObject = null;
		
			try
			{
				var createElementString = '<img id="banner2" style="position: absolute; left: 0; top: -7.5em; width: 46.3125em; height: 27.75em; z-index: 1;" src="' + bannerElement1.src + '" alt="" />';
				// Attribute erstellen
				oImageObject = document.createElement(createElementString);
			}
			catch(e){}
			
			// Normale DOM Browser
			if(!oImageObject || oImageObject.nodeName != "IMG")
			{
				// nicht IE also kommt mit /n zurecht anstelle /r
				lineBreakType = "n";
				
				// Element erstellen
				oImageObject = document.createElement('img');
			
				// Attribute erstellen
				oImageObject.setAttribute('id', 'banner2');
				oImageObject.setAttribute('style', 'position: absolute; left: 0; top: -7.5em; width: 46.3125em; height: 27.75em; z-index: 1;');
				oImageObject.setAttribute('src', bannerElement1.src);
				oImageObject.setAttribute('alt', '');
		
			}
					
			// Neuen inhalt einhaengen
			oTargetDiv.appendChild(oImageObject);
			
			bannerElement2 = oImageObject;
			*/
			
			this.startAnimation();
		}
	},
	startAnimation: function()
	{
		intervalAnimation = setInterval(function(){bannerAnimator.blend()}, 50);
	},
	stopAnimation: function()
	{
		clearInterval(intervalAnimation);
	},
	blend: function()
	{
	
		// Init banner
		if (this.pos == 0 || this.pos == 200)
		{

			// Phase 1: Use banner 1
			if (this.pos == 0)
			{
				bannerElement = bannerElement1;
			}
			// Phase 2: Use banner 2
			else if (this.pos == 200)
			{
				bannerElement = bannerElement2;
			}
			
			// start
		
			this.scaleStart = (this.viewWidth/this.imageWidth) + Math.random() * (1.5 - (this.viewWidth/this.imageWidth));
			this.scale = this.scaleStart;
			
			startScaledWidth = this.bannerElementWidth * this.scaleStart;
			startScaledHeight = this.bannerElementHeight * this.scaleStart;
	
			bannerElement.style.width = (startScaledWidth) * (1/16) + "em";
			bannerElement.style.height = (startScaledHeight) * (1/16) + "em";
		
			// x: 0 .. -width + viewWidth
			startX = Math.random() * (this.viewWidth - startScaledWidth);
			// y: 0 .. -height + viewHeight
			startY = Math.random() * (this.viewHeight - startScaledHeight);
	
			bannerElement.style.left = startX * (1/16) + "em";
			bannerElement.style.top = startY * (1/16) + "em";

			// end

			minScaleX = (this.viewWidth-startX) / this.bannerElementWidth;
			minScaleY = (this.viewHeight-startY) / this.bannerElementHeight;
			minScale = Math.max(minScaleX, minScaleY);
			
			this.scaleEnd = (this.scaleStart + minScale) / 2;
			
			this.scaleStep = (this.scaleEnd - this.scaleStart) / 100;
			
		}
		if ((this.pos >= 0 && this.pos < 100) || (this.pos >= 200 && this.pos < 300))
		{
			if (this.pos >= 0 && this.pos < 100)
			{
				alpha = this.pos;
				bannerElement1.style.opacity = alpha/100;
				bannerElement1.style.filter = "alpha(opacity=" + alpha + ")";
			}
			if (this.pos >= 200 && this.pos < 300)
			{
				alpha = 100 - (this.pos - 200);
				bannerElement1.style.opacity = alpha/100;
				bannerElement1.style.filter = "alpha(opacity=" + alpha + ")";
			}

			// Scale

			this.scale += this.scaleStep;

			scaledWidth = this.bannerElementWidth * this.scale;
			scaledHeight = this.bannerElementHeight * this.scale;
	
			bannerElement.style.width = (scaledWidth) * (1/16) + "em";
			bannerElement.style.height = (scaledHeight) * (1/16) + "em";

		}
		
		this.pos += 1;
		if (this.pos >= 400)
		{
			this.pos = 0;
		}
		
	}
	
}