Please take a look at the code, I'm trying to use a JS namespace. Works fine when the JS is coded in the HTML file, however it doesn't work when I try to lift the JS into an external file. Any ideas where I'm going wrong? Thanks.

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My JS Namespace Template Project</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<link href="content.js" type="text/javascript" />

</head>
<body>
	<input id='btn01' type='button' value='Do Something' /><p/>
  <div id='content'></div>
</body>
</html>
Code:
	var CBP = CBP || {};
	
	CBP.g_system_name = 'CBP'; 
	
	CBP.Show = {
		
		Msg: function() {
			var config = {
				fname: 'fred',
				lname: '',
				age: '24',
				postcode: 'XXX YYY'
			}
			CBP.Detail.Record(config);
		}
	}
	
	CBP.Detail = {
		
		Record: function(p_config) {
			var fname = p_config.fname;
			var lname = p_config.lname || 'unknown';
			var age = p_config.age;
			var postcode = p_config.postcode;
			
			var buf = new CBP.fnStringBuilder;
			buf.append('System Name: ' + CBP.g_system_name + "<br/>");
			buf.append('First Name: ' + fname + "<br/>");
			buf.append('Last Name: ' + lname + "<br/>");
			buf.append('Age Name: ' + age + "<br/>");
			buf.append('Postcode Name: ' + postcode);
			$('#content').html(buf.toString());
		}
	}
	
	CBP.fnStringBuilder = function() {
		
		this.arr = [];
		this.append = function(p_txt) {
			this.arr.push(p_txt);
		};
		this.toString = function() {
			return this.arr.join('');
		};
	}

	$('document').ready(function() {
		$('#btn01').click(function() { CBP.Show.Msg(); } );
	});