var scale = 250;
var opacity = 1;
var resizedelay;


// INIT
// Starts the logo animation on body onload().
function init(){
	setup();
	// TODO: Check for #anchor and link directly to that content.
	setTimeout('document.getElementById("landingpage").style.display = "block"; animatelogo()', 500);	
}


// ANIMATE LOGO
function animatelogo(){	
	// Scale logo
	scale = Math.min(500, scale + (500 + 5 - scale) * 0.025);
	document.getElementById('landingpagelogo').style.width = scale + 'px';
	// Fade in logo
	opacity += opacity * 0.06;	
	document.getElementById('landingpagelogo').style.opacity = opacity / 100;
	document.getElementById('landingpagelogo').style.filter = 'alpha(opacity=' + opacity +');'; 	// For IE8 and earlier.	
	if (scale < 500 || opacity < 100) {																// Check if we need to animate more...
		setTimeout('animatelogo()', 20);																// 20 = 50 FPS										
	}
}


// WINDOW.RESIZE
// Calls setup() when browser window is resized.
window.onresize = function(event) {
	clearTimeout(resizedelay);
	resizedelay = setTimeout("setup()", 100);
}


// SETUP
// Positions and scales background, content, menu and logo.
function setup(){
	// Idea:
	// The idea is to make the background fill the entire browser window if possible.
	// We do not scale the content below 800x640px - It messes up the layout of content elements.
	// We do not crop more than 15% of the background in any direction - It ruins the background.
	// Structure and method:
	// The #wrapper fills up the entire browser window.
	// The #wrapper hides any overflow.
	// The #background is nested inside the #wrapper.
	// The #background is positioned absolute and always keeps a 16:9 aspect ratio.	
	// If the #background is scaled to COVER the #wrapper, the #background almost certainly will be larger than the #wrapper on one axis.
	// This overflow will be hidden by the #wrapper.
	// However, if the overflow is more than 15% of the #background we will not scale the #background to COVER the #wrapper - too much of the background is lost.
	// Instead we will scale the #background to be FIT inside the #wrapper.
	// Here we go...

	// Get browser window width and height.
	var w=window.innerWidth||document.documentElement.clientWidth||document.getElementsByTagName('body')[0].clientWidth;
	var h=window.innerHeight||document.documentElement.clientHeight||document.getElementsByTagName('body')[0].clientHeight;
	
	// Figure out if we should use minimum size or we should scale background to 100% width or 100% height.
	if (w<800 || h<450){
		// Set #wrapper to minimum size.
		document.getElementById('wrapper').style.width = '800px';
		document.getElementById('wrapper').style.height = '450px'
		var w = 800;
		var h = 450;
		var t = true;			// true: use 100% width.
	} else {
		// Reset #wrapper size in case the browser window has been below the minimum size before.
		document.getElementById('wrapper').style.width = '';
		document.getElementById('wrapper').style.height = '';
	 	// Calculate how much will be cropped vertically if the background use 100% width (assuming background is in 16:9 aspect ratio).
		var t = w / 16 * 9;				// Calculate what the height would be.
		var th = 100 - t / h * 100;		// Calculate how many percent would be cropped.
		// Calculate how much will be cropped horizontally if the background use 100% height (assuming background is in 16:9 aspect ratio).
		var t = h / 9 * 16;				// Calculate what the width would be.
		var tw = 100 - t / w * 100;		// Calculate how many percent would be cropped.
		// Figure out if the background should COVER or FIT the browser window.
		// Of tw and th, one is negative and one is positive.
		// The negative indicates, that if the background use 100% on that axis, it will not cover the browser window on the other axis.
		// Therefore we want to use 100% on whichever axis is positive.
		if (tw > th){
			var t = true;		// true: use 100% width.  
		} else {
			var t = false;		// false: use 100% height.
		}
		// However, if more than 15% will be cropped we will not COVER the browser window, but instead FIT the background.
		if (Math.max(tw,th) > 15){
			var t = !t;
		}
	}
	
	// Scale and position background and content.
	if (t){
		// If we decided to use 100% width...
		document.getElementById('background').style.width = '100%';									// Set background width.
		document.getElementById('background').style.height = (w / 16 * 9) + 'px';					// Calculate and set background height.
		document.getElementById('background').style.left = '0px';									// Align background to left.
		// If the background covers the browser window we crop top and bottom equally.
		// If the background does not cover browser window we align the background to the top.
		if (w / 16 * 9 > h) {
			document.getElementById('background').style.top = ((h - w / 16 * 9) / 2) + 'px';		// Offset background vertically to crop top and bottom equally.
		} else {
			document.getElementById('background').style.top = '0px';								// Align background to top.	
		}	
		document.getElementById('content').style.width = '100%';									// Set content width.	
		document.getElementById('content').style.height = Math.min(h,w / 16 * 9) + 'px';			// Calculate and set content height.
		document.getElementById('content').style.left = '0px';										// Align content to left
	} else {
		// If we decided to use 100% height...
		document.getElementById('background').style.height = '100%';
		document.getElementById('background').style.width = (h / 9 * 16) + 'px';					// Calculate and set background width. 
		document.getElementById('background').style.left = ((w - h / 9 * 16) / 2) + 'px';			// Offset background horizontally to crop left and right equally.
		document.getElementById('background').style.top = '0px';									// Align background to top.
		document.getElementById('content').style.height = '100%';									// Set content height.	
		document.getElementById('content').style.width = Math.min(w,h / 9 * 16) + 'px';				// Calculate and set content width.
		document.getElementById('content').style.left = Math.max(0,(w - h / 9 * 16) / 2) + 'px';	// Align content horizontally.
	}
	
	// Position menu and logo
	var t = (document.getElementById('content').offsetHeight / 2 - document.getElementById('menu').offsetHeight / 2);
	document.getElementById('menu').style.top = t + 'px';
	document.getElementById('logo').style.height = Math.min(200, t - 40) + 'px';
}