<div class="twitter_box"><ul id="twitter_data"><li>loading...</li>

<script type="text/javascript">

function twitterCallback2(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
return '<span class="link"><a href="'+url+'" target="_parent">'+url+'</a></span>'; /* here you can format posted links */
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+'<span>'+reply.substring(1)+'</span>'; /* here you can format the twitter hash-tag (@name) */
});
statusHTML.push('<li><div class="text">'+status+'</div><div class="date">'+relative_time(twitters[i].created_at)+'</div></li>');
}
document.getElementById('twitter_data').innerHTML = statusHTML.join('');
}

function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var d = new Date(time_value);
var curr_date = d.getDate(time_value);
var curr_month = d.getMonth(time_value);
curr_month++;
var curr_year = d.getFullYear(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);

if (delta < 60) {
return 'today';
} else if(delta < 120) {
return 'today';
} else {
return curr_date + '.' + curr_month + '.' + curr_year;
}
}

</script>

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/01241.json?callback=twitterCallback2&count=3"></script></div>


<style type="text/css">

.twitter_box {
font-family: Georgia, serif;
font-size:1.5em;
line-height: 1.4em;
padding: 1em;
border: 1px dotted #cccccc;
border-radius:6px;
overflow:hidden;
width: 300px;
}

.text { background-color: #ffffff; }
.link { background-color: #ffffff; }
.date { background-color: #ffffff; }

ul { list-style: none; padding:0px; margin:0px; }
li { display:inline; margin:0px; padding:0px; list-style:none; }

a:link, a:hover, a:visited { text-decoration: none; }

</style>