<style type="text/css">
	#twitter_data { font-family: Helvetica, Arial, sans-serif; }
	#twitter_data .item { margin-bottom: 6px; }
	#twitter_data img { width: 30px; height: 30px; }
	#twitter_data .twitterIcon { float: left; padding: 2px 10px 2px 2px; }
	#twitter_data .bubbleLeft { float: left; height: 54px; padding: 10px 2px 0px 14px; background: url(bubble.png) left top no-repeat; }
	#twitter_data .bubbleRight { float: left; height: 54px; width: 6px; background: url(bubble.png) right top no-repeat; }
	#twitter_data .subheading { font-size: 10px; color: #747d8a; text-shadow: 0px 1px 0px rgba(255,255,255,0.5); margin-bottom: 3px; }
	#twitter_data .tweetMessage { font-size: 12px; color: #0c1f3f; text-shadow: 0px 1px 0px rgba(255,255,255,0.4); }
</style>

<div id="twitter_data"><span style="font-style:italic;font-size:12px;">Loading tweets</span></div>

<script language="Javascript">

var twitter_id = 'billgates';
var twitter_count = 5;
var twitter_elem_id = 'twitter_data';

$(document).ready(function() {
	var url = 'http://twitter.com/statuses/user_timeline/'
	+ twitter_id
	+ '.json?callback=twitterCallback&count='
	+ twitter_count;
	var script = document.createElement('script');
	script.setAttribute('src', url);
	document.body.appendChild(script);
});

function twitterCallback(obj){
  var html = "";
  for(var i=0 ; i<twitter_count && i != obj.length; i++){
	html += "<div class='item'>";
		html += "<div class='twitterIcon'><img src='" +  obj[i].user.profile_image_url + "'> </div>";
		html += "<div class='bubbleLeft'>";
			html += "<div class='subheading'><strong>Tweet</strong> from <strong>" + obj[i].user.name + "</strong></div>";
			html += "<div class='tweetMessage'>" + obj[i].text + "</div>";
		html += "</div>";
		html += "<div class='bubbleRight'>&nbsp;</div>";
	html += "</div>";
	html += "<br clear='all' />";
}
  document.getElementById(twitter_elem_id).innerHTML = html;
}
</script>