//add the resize event listener to the body
	window.onresize= determineBannerProperties;
	window.onload = showAll;
	
	document.body.style.display = "none";
	document.getElementById("bar").style.display = "none";
	//checkForDividerAndAddIt();
	
	//the height and width of the current screen
	var viewportWidth;
	var viewportHeight;
	
	//set the banner properties dynamicly.
	determineBannerProperties();
	function determineBannerProperties() {
		setViewport();
		manipulateElement(document.getElementById("bar"));
		manipulateElement(document.getElementById("flashbanner"));
		
		var dif 			= (viewportHeight/ 10);
		var divider 		= document.getElementById("divider");
		if (divider != null) {
			divider.style.height = dif + "px";
		}
		if (document.getElementById("imgDiv") != null) {
			determineImageSize(document.getElementById("imgDiv"));
		}
	}
	
	function showAll() {
		document.getElementById("bar").style.display = "";
		document.body.style.display = "";
	}
	
	function createElementDivider(elementID) {
		var container 			= document.getElementById( elementID );
		var newdiv 				= document.createElement('div');
		var dif 				= (viewportHeight/ 10);
		newdiv.style.height 	=  dif + "px" ;
		newdiv.setAttribute('id', 'divider');
		container.insertBefore( newdiv , document.getElementById( 'header1' ) );
		
	} 
	
	//alter the given element so the banner will de displayed correctly
	function manipulateElement (bannerElement) {
		//set the height of the bannerElement to viewportHeight - (viewportHeight/ 10)
		var dif = (viewportHeight/ 10);
		bannerElement.style.height = dif + "px";
		bannerElement.style.width = viewportWidth + "px";
	}
	
	//alter the given element so the banner will de displayed correctly
	//the img heigth is on 100%, so we determine  only the width.
	function determineImageSize(image) {
		//get the aspectratio
		var imgHeight = image.height;
		var imgWidth = image.width;
		var ratio = imgWidth/imgHeight;
		var dif = Math.round((viewportHeight/ 10));
		
		//set the correct width/height for the image
		image.height = dif;
		image.width = Math.round((ratio * dif));
	}
	
	
	//determine and set the height and width of the current screen
	function setViewport() {
		// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
		if (typeof window.innerWidth != 'undefined') {
	    	viewportWidth = window.innerWidth - 20;
	    	viewportHeight = window.innerHeight;
		}
	
		// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
		else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
	    	viewportWidth = document.documentElement.clientWidth-10;
	    	viewportHeight = document.documentElement.clientHeight;
		}
	
		// IE 6 en ie 7
		else {
			viewportWidth = document.getElementsByTagName('body')[0].clientWidth -16;
	    	viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
		}
	}
	
	
	function checkForDividerAndAddIt() {
		var cont = document.getElementById("divider");
		if (cont != null) {
			insertDivIntoContainer();
		} else {
			setTimeout("checkForDividerAndAddIt()", 500);
		}
	}