// JavaScript Document

/**
 * @ name		background image scaler
 * @ author		Indra Beurskens - INNteraction.nl
 * @ version		1
 */

// variables
var browser = navigator.appName;
var browserWidth;	// what is the browser width
var browserHeight;	// what is the browser height
var imageWidth;		// what is the image width
var imageHeight;	// what is the image height
var contentDiv;		// the content div
var divHeight;		// get the div height
var divYpos  = 223;	// the y-position from the top
var divBottom=  0;//25;	// de ruimte onderaan de div
var minWidth = 900;	// minimal page width
var tempWidth;
var tempHeight;
var tempCalc;
var tempImg;


// get browser
function windowResize() {
	if( browser == "Netscape" ) {
		browserWidth = window.innerWidth;
		browserHeight = window.innerHeight;
	}
	else if( browser == "Microsoft Internet Explorer" ) {
		browserWidth = document.body.offsetWidth;
		browserHeight = document.body.offsetHeight;
	}
	
	
	// the scrollbar in de breedte
	if(browserWidth > 900) {
		document.body.style.overflowX	= "hidden";
		//alert("browser-width BIGGER: " + browserWidth);
	}
	else {
		document.body.style.overflowX	= "auto";
		//alert("browser-width SMALLER: " + browserWidth);
	}
	
	calculateSize();
}

// calculate the size
function calculateSize() {
	// get current sizes
	/*//document.getElementById('bgImg').style.scale = "100%";
	imageWidth 	= document.getElementById('bgImg').offsetWidth;//.width;//.naturalWidth
	imageHeight = document.getElementById('bgImg').offsetHeight;*/
		tempImg		= new Image();
		tempImg.name= "tempImg";
		tempImg.src	=  document.getElementById('bgImg').src;//"file:///"+
		//tempImg.onload = function() { alert("load OEPs image"); };
		//alert(tempImg.width + ' pixels wide x ' + tempImg.height +' pixels high');
		imageWidth 	= (tempImg.width );// / 2)
		imageHeight = (tempImg.height );// / 2);
	//alert(imageWidth +" - "+ imageHeight);

	divHeight	= (document.getElementById('content').offsetHeight + divYpos + divBottom);
	//divYpos		= document.getElementById('placeholder').offsetTop;
	
	
	// set the background image not to be smaller then 900px
	//bgImg.style.minWidth = minWidth+"px";
	
	
	// calculate with size we need to refere to
	
	// HOOGTE
	if( divHeight >= browserHeight ) {
	// de hoogte van de div is groter als de hoogte van de browser
		tempHeight	= divHeight;
		document.body.style.overflowY	= "auto";
	}
	else {
	// de hoogste van de browser
		tempHeight	= browserHeight;
		document.body.style.overflowY	= "hidden"; // no scroll vertical
	}
	
	// BREEDTE
	if( browserWidth >= minWidth ) {
	// de breedte van de browser is groter als de minimale breedte
		tempWidth	= browserWidth;
	}
	else {
	// de minimale breedte aanhouden
		tempWidth	= minWidth;
	}
	
	
	// welke zijde is het grootste
	if( tempWidth > tempHeight ) {
	// de breedte is het grootst
		tempCalc		= (imageHeight * tempWidth / imageWidth);
		if( tempHeight > tempCalc ) {
		// de hoogte wordt toch te klein, dan uitgaan van de hoogte ipv breedte
			resizeHeight();
		}
		else {
		// gewoon uitgaan van de breedte
			resizeWidth();
		}
	}
	else {
	// de hoogte is de grooste
		tempCalc		= (imageWidth * tempHeight / imageHeight);
		if( tempWidth > tempCalc ) {
		// de breedte wordt toch te klein, dan uitgaan van de breedte ipv hoogte
			resizeWidth();
		}
		else {
		// gewoon uitgaan van de hoogte
			resizeHeight();
		}
	}
	
	document.getElementById("bgDiv").style.width  = tempWidth;
	document.getElementById("bgDiv").style.height = tempHeight;
	
	window.scroll(0,0); //windows position to top
}

function resizeWidth() {
	bgImg.style.width	= tempWidth +"px";
	bgImg.style.height	= (imageHeight * tempWidth / imageWidth) +"px";
}
function resizeHeight() {
	bgImg.style.width  = (imageWidth * tempHeight / imageHeight) +"px";
	bgImg.style.height  = tempHeight +"px";
}