var contentHeight = 720;

document.observe('dom:loaded', function() {
	
	heightInt = getPossibleHeaderHeight(contentHeight, document.viewport.getHeight());
	if(heightInt>=0) {
		setHeadHeight(heightInt);
	} else {
		setHeadHeight(0);
	}
	

});

Event.observe(window, 'resize', function() {
	heightInt = getPossibleHeaderHeight(contentHeight, document.viewport.getHeight());
	if(heightInt>=0) {
		setHeadHeight(heightInt);
	} else {
		setHeadHeight(0);
	}
});

function getPossibleHeaderHeight(contentHeight, viewportHeight) {
	height = parseInt(( viewportHeight - contentHeight) / 2);
	return height;
}

function setHeadHeight(headHeight) {
	$$('.head')[0].setStyle({'height' : (headHeight+32)+"px"});
}