var origBGImgAttribs;
var navHeight;

window.addEvent('domready', function() {

	// resize image holder to fill screen
	function resizeBG() {
		$('holder').setStyle('height', window.getSize().y - navHeight);
		if (window.getSize().x/(window.getSize().y - navHeight) < origBGImgAttribs.x/origBGImgAttribs.y) {					
			$('bgimg').setStyles({
				'height': window.getSize().y - navHeight,
				'width': 'auto',
				'marginTop': 0
			});
			// horizontally centre the images
			$('bgimg').setStyle('margin-left', (window.getSize().x - $('bgimg').getSize().x) / 2);					
		} else {
			$('bgimg').setStyles({
				'width': window.getSize().x,
				'height': 'auto',
				'marginLeft': 0
			});
			// vertically centre the images
			$('bgimg').setStyle('margin-top', (window.getSize().y-navHeight - $('bgimg').getSize().y)/2)
		}
	}
	
	// set #nav height var (this won't change)
	navHeight = $('nav').getSize().y;
	
	$('bgimg').fade('hide');
	
	// adjust the height of the "holder" to compensate for nav
	$('holder').setStyle('height', window.getSize().y - navHeight);
	
	// load bg image
	$('bgimg').addEvent('load', function() {
		origBGImgAttribs = this.getSize();
		resizeBG();
		this.set('tween', {'duration':2000, 'transition': Fx.Transitions.Cubic.easeOut}).fade('in');
		$('loadingtext').fade('out');
	});
	
	// create and centre 'loading' text
	new Element('div', {'id': 'loadingtext', 'text': 'loading image…'}).set('tween', {'duration': 200})
		.setStyle('padding-top', ((window.getSize().y - $('nav').getSize().y)/2) + "px").inject('holder');
				
	// simple (and non-foolproof) way to disable easy saving of image
	new Element('div', { 'id': 'overlay' }).inject($('bgimgholder'));
	
	window.addEvent('resize', resizeBG);
				
});