Visual Studio Achievements Widget - Init

<body> <h1>Visual Studio Achievements Widget</h1> <h2>The Visual Studio Achievements Widget</h2><p>So you are racking up points in <a href="http://channel9.msdn.com/Blogs/C9Team/Coming-Soon-Visual-Studio-Achievements">Visual Studio Achievements</a>. You should tell the world about it! Enter the Visual Studio Achievement Widget!</p><p>This widget is a small(<6k), simple and customizable javascript file that you can drop on your own page to give up-to-date status on your current state with Visual Studio Achievements.</p><p>Adding this widget to a blog is trivial. Most blog platforms (WordPress, BlogEngine.NET) have a free form HTML widget. Simply use that and add one of the script examples below to it. You can see an example of the widget live on Karsten's blog at <a href="http://rhizohm.net/irhetoric">http://rhizohm.net/irhetoric</a>.</p><p>Here is an example of the default state of this widget and the code to get this on your page.</p><p><strong>Default</strong>:<br><pre class="brush: html"><script src="http://video.ch9.ms/widgets/VSachievements.min.js?user=geoffreyk" id="ch9VSachievements" defer="defer"></script> </pre></p><p><a href="http://files.channel9.msdn.com/thumbnail/e0691961-5a21-4a86-b9bb-6ad97d2296f8.png" rel="lightbox"><img src="http://files.channel9.msdn.com/thumbnail/e0691961-5a21-4a86-b9bb-6ad97d2296f8.png" alt=""></a></p><p>(scroll down for <a href="#widgetExamples">more examples</a>)</p><p>This script will execute onLoad of the containing HTML page, make a <a href="http://en.wikipedia.org/wiki/JSONP">JSONP</a> call to the <a href="http://channel9.msdn.com/Blogs/C9Team/Visual-Studio-Achievements-API">Visual Studio Achievements API</a> to retrieve the current status of the user, and then generate and insert HTML into the parent document.</p><p>The only requirement is to give the widget a valid Channel 9 username that is registered with Visual Studio Achievements in the query string argument <strong>"user"</strong>. The widget will by default draw it's results immediately after the script tag used to insert it into your page. Everything else is optional.</p><h2 id="widgetHowToCusomize">How to Customize</h2><p>All of the customization for this script is done through the query string in the script embed tag or through CSS that you include on your page. Take a look at the <a href="#widgetExamples">examples</a> to see this in action.</p><p>There are a number of options to control the information that is displayed by the widget. A complete list of these parameters is <a href="#widgetQueryStringParameters">below</a>. Most are pretty self-explanatory and can be figured out just by playing with them.  But here are a few key ones to pay attention to.</p><p><strong>"defaultCSS"</strong></p><p>The widget has a few CSS styles that will include by default. (<a href="#widgetCSS">Listed below</a>). If you want, set this parameter to false and you can have complete control over the CSS. Note that all of the styles included by default are sand-boxed under the .ch9Achievements class. This is the class of the parent container that holds all of the generated HTML. This is to keep the default widget styles from wreaking havoc on the rest of your page. You can also use this class to add your own styles if you find you need a bit more tweaking to get the widget to look right on your page. Use the <a href="#widgetHTML">sample HTML</a> as a guide.</p><p><strong>"displayId"</strong></p><p>If you don't want the script to place it's results immediately after the script tag, you can specify the ID of an element where you would like the widget to place it's results. This is handy if you like to have all of your script tags in the HEAD of your page.</p><p><strong>"mainTitleHeadline"</strong></p><p>The main headline is wrapped in an H3 tag. If this doesn't work for your page, you can change the tag to H1-H7, DIV or SPAN. Use whatever fits best with your page.</p><p><strong>"showTimezoneOffest&quot </body>