var Background = {
	_getViewportDimensions: (function () {
		if (document.documentElement && document.documentElement.clientWidth) {
			return function () {
				var x = document.documentElement;
				var wrapperHeight = $('sitewrapper').getHeight() + $('sitewrapper').getStyle('top').toInt();

				return {
					width: x.clientWidth,
					height: x.clientHeight > wrapperHeight ? x.clientHeight : wrapperHeight,
					aspectRatio: x.clientHeight / x.clientWidth
				}
			}

  		} else if (document.body && document.body.clientWidth) {
			return function () {
				var x = document.body;
				var wrapperHeight = $('sitewrapper').getHeight() + $('sitewrapper').getStyle('top').toInt();

				return {
					width: x.clientWidth,
					height: x.clientHeight > wrapperHeight ? x.clientHeight : wrapperHeight,
					aspectRatio: x.clientHeight / x.clientWidth
				}
			}

		} else if (window.innerWidth) {
			return function () {
				var wrapperHeight = $('sitewrapper').getHeight() + $('sitewrapper').getStyle('top').toInt();

				return {
					width: window.innerWidth-18,
					height: window.innerHeight-18 > wrapperHeight ? window.innerHeight-18 : wrapperHeight,
					aspectRatio: window.innerHeight / window.innerWidth
				}
			}
		}
	})(),

	image: {
		width: 1000,
		height: 700,
		element: undefined,
		aspectRatio: 0.7
	},

	init: function () {
		window.addEvent('resize', Background.resize);
		window.addEvent('domready', Background.resize);
		window.addEvent('load', function () {
			window.setTimeout(Background.resize, 1); //fixes weird rendering glitch in IE
		});
	},

	resize: function (event) {
		Background.image.element = Background.image.element || $('background').getElement('img');

		var viewport = $('background').getCoordinates();
		var offset   = {};

		//als schalen op de hoogte overlap geeft, die gebruiken
		if ((viewport.width * Background.image.aspectRatio) > viewport.height) {
			Background.image.element.width  = viewport.width;
			Background.image.element.height = viewport.width * Background.image.aspectRatio;

			offset.top  = -((Background.image.element.height - viewport.height) / 2);
			offset.left = 0;

		//als schalen op de breedte overlap geeft, die gebruiken
		} else if ((viewport.height / Background.image.aspectRatio) > viewport.width) {
			Background.image.element.height = viewport.height;
			Background.image.element.width  = viewport.height / Background.image.aspectRatio;

			offset.top  = 0;
			offset.left = -((Background.image.element.width - viewport.width) / 2);

		//als het precies past, niet aankomen
		} else {
			Background.image.width  = viewport.width;
			Background.image.height = viewport.height;	
		}

		Background.image.element.setStyles({
			'margin-left': offset.left,
			'margin-top': offset.top,
			'opacity': 100
		});
	}
}

Background.init();