var layout = {
	
	resize: function() {
	
		//get the available size for the top and bottom backgrounds
		var h = document.body.offsetHeight - $('bm').offsetHeight;
		
		//if 0 or less, do nothing
		if( h < 1 ) return;
		
		//get the height of the top (40% of the available space)
		var th = Math.floor( ( h / 100 ) * 40 );
		
		//ensure a minimum of 10 pixels
		if( th < 10 ) th = 10;
		
		//set the heights
		$('bt').setStyle({ height: th + 'px' });
		$('bb').setStyle({ height: ( h - th ) + 'px' });
	
		//shift padding for IE < 8
		var ieversion = getInternetExplorerVersion();
		if ( ieversion > 0 && ieversion < 8 && !IsIE8Browser() ) $('c').setStyle( { paddingLeft: '3px' } );
	
	}

}

// position the top and bottom backgrounds of the layout when the page has loaded and is resized
Event.observe( document, 'dom:loaded', layout.resize );
Event.observe( window, 'resize', layout.resize );


function getInternetExplorerVersion() {
    var rv = -1; // Return value assumes failure.
    if (navigator.appName == 'Microsoft Internet Explorer') {
        var ua = navigator.userAgent;
        var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null)
            rv = parseFloat(RegExp.$1);
    }
    return rv;
}
function IsIE8Browser() {
    var rv = -1;
    var ua = navigator.userAgent;
    var re = new RegExp("Trident\/([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null) {
        rv = parseFloat(RegExp.$1);
    }
    return (rv == 4);
}