// Set up our variables
var childRatio = 2.5; // Ratio of width to height of background image (3000 / 1200);
var minHeight = 600; // Minimum height for background image
var minWidth = 830; // Minimum width for window

window.addEvents({
	'resize': function() {
		Resize($('background'), $('main'));
	},
	'load': function() {
		Resize($('background'), $('main'));
	}
});

function Resize(child, parent) {
	var height = parent.getSize().y > window.getSize().y ? parent.getSize().y : window.getSize().y;	// Get the parent height or window height (whichever is greater)
	height = height > minHeight ? height : minHeight;												// Make sure we're above minimums
	var width = height * childRatio;																// Set the width based on the height
	var windowSize = window.getSize().x;
	windowSize = windowSize > minWidth ? windowSize : minWidth;
	
	if (width < windowSize) {
		width = windowSize;
		height = width / childRatio;
	}
	
	child.setStyles({
		height: height + 'px',
		width: width + 'px',
		left: (windowSize - width) / 2 + "px"
	});
	$('background_wrapper').setStyle('height',height + 'px');
	
	if ($('collection_description')) {
		$('collection_description').setStyle('margin-top', height / 4 * 3 + 'px');
	}
}