<div id=”RecentPosts”></div>

<Script>

// Configurable params

var recentPostNumber = 8;

var rssUrl = “http://blogs.msdn.com/bali_msft/rss.xml”;

var title = “My Recent Posts”;

var newPostAgeInHour = 72;

// Cacluate age of one post. It is all about getting time span in Javascript

// return formate: x min; x hour y min, x day y min, x days, x yeas (ago)

// Refer to: http://www.w3schools.com/jsref/jsref_obj_date.asp

function calculateAge(postDate)

{

var ret = “fresh!”;

CurrentDate = new Date();

TimeSpan = new Date(CurrentDate – postDate);

var mySpanArray = new Array();

mySpanArray[0] = TimeSpan.getUTCFullYear()-1970;
mySpanArray[1] = TimeSpan.getUTCMonth();
mySpanArray[2] = TimeSpan.getUTCDate()-1;
mySpanArray[3] = TimeSpan.getUTCHours();
mySpanArray[4] = TimeSpan.getUTCMinutes();

var TimeSpanTagArray_1 = new Array(“years”, “months”, “days”, “hours”, “minutes”);

var TimeSpanTagArray_2 = new Array(“year”, “month”, “day”, “hour”, “minute”);

// Starting from non-zero element and pick two significant values

for(i = 0; i < mySpanArray.length; i++) {

if(mySpanArray[i] != 0) {

var correctTag = (mySpanArray[i] == 1)?(TimeSpanTagArray_2[i]):(TimeSpanTagArray_1[i]);

ret = mySpanArray[i] + ” “ + correctTag;

if(i+1 < mySpanArray.length && mySpanArray[i+1] != 0) {

correctTag = (mySpanArray[i+1] == 1)?(TimeSpanTagArray_2[i+1]):(TimeSpanTagArray_1[i+1]);

ret = ret + “, “ + mySpanArray[i+1] + ” “ + correctTag;

}

break;

}

}

return ret;

}

// Display the recent posts

// Refer to:

// http://www.w3schools.com/DOM/dom_node.asp

// http://www.w3schools.com/DOM/dom_methods.asp

function displayPosts (xmldoc)

{

var newTag = “<SPAN style=\”COLOR: red\”>(New!)</SPAN>”;

var posts = xmldoc.getElementsByTagName(“item”);

var displayText = “<h3>” + title + “</h3><UL>”;

if (posts.length < recentPostNumber) {

recentPostNumber = posts.length;

}

for(var i = 0; i < recentPostNumber; i++)

{

PostTitle = posts[i].firstChild.firstChild.nodeValue;

PostLink = posts[i].firstChild.nextSibling.firstChild.nodeValue;

PostDateStr = posts[i].firstChild.nextSibling.nextSibling.firstChild.nodeValue;

PostDate = new Date(PostDateStr);

CurrentDate = new Date();

// Calculate age

var _PostAge = calculateAge(PostDate);

var PostAge = “<SPAN style=\”font-size: 80%; color: black\”> (“ +_PostAge + ” ago)</SPAN>”;

// Show a new tag for posts happening last days defined by ‘newPostAgeInHour’

var myNewTag = “”;

if((CurrentDate.getTime() – PostDate.getTime())/1000/60 < newPostAgeInHour * 60) {

myNewTag = newTag;

}

// Get background color

var BKColor = (i%2 == 0)?(“#B8CCE4″):(“#DBE5F1″);

displayText = displayText + “<LI style=\”background-color:” + BKColor + “\”><A href=\”" + PostLink + “\”>” + myNewTag + PostTitle + PostAge + “</A></LI>”

}

displayText = displayText + “</UL>”;

var target = document.getElementById(“RecentPosts”);

target.innerHTML=displayText;

}

// Call back

function complete(){

if (req.readyState == 4) {

if (req.status == 200) {

displayPosts (req.responseXML);

}

}

}

// Initial async call

function getPosts()

{

if (window.XMLHttpRequest) {

req = new XMLHttpRequest();

}else if (window.ActiveXObject) {

req = new ActiveXObject(“Microsoft.XMLHTTP”);

}

if(req){

req.open(“GET”, rssUrl, true);

req.onreadystatechange = complete;

req.send(null);

}

}

// Entry point

getPosts();

</Script>