IE 9, site pinning, overlay icons and SharePoint

One of the new thing in IE 9 is the site pinning. A cool new feature that allows a users to add a tab in IE9 to the taskbar. After the tab is added to the taskbar we can, from IE 9, interact with it, like overlay icons and ther is it where SharePoint comes in, as the data provider. I create an announcements list and read the current count from it and set the overlay icons to match the count all through JavaScript.

The results of adding two list items to announcements list

My code

This is the code in the PlaceHolderAdditionalPageHead content placeholder

<script src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.4.2.min.js" type="text/javascript"></script>

This is the code in the PlaceHolderMain content placeholder

<span id="statusInfomation">Loading...</span>
<script type="text/javascript">
var loadingIcon = "/_layouts/images/jumplist/search.ico"
 
var	getData = function()
{
	$.getJSON("/ie9test/_vti_bin/listdata.svc/Ie9TestAnno()/$count", function (data)
	{
		if(data != 0 && data < 6)
		{
			var icon = "/_layouts/images/jumplist/num_" + data + ".ico";
			setOverlayIcon(icon, "Now got " + data);
		}
		else if(data == 0)
		{
			setOverlayIcon("", "Now got " + data);
		}
	});
}
 
function setOverlayIcon(url, text)
{
	$("#statusInfomation").html(text);
	if(url != "")
	{
		window.external.msSiteModeSetIconOverlay(url, text);
	}
	else
	{
		window.external.msSiteModeClearIconOverlay();
	}
}
 
$(document).ready(function()
{
	setOverlayIcon(loadingIcon, "Loading...");
	setInterval(getData, 5000);
});
</script>

In function in line 21, is where I interact with the overlay icons, pure magic :D

- Happy IE 9 coding