function SO() 
{
  //Private fields
  var profile = {
    id: null,
    profileUrl: null,
    displayName: null,
    reputation: null,
    badgeHtml: null
  }
  var htmlTemplate = new Template(
    "<h2>Stack Overflow</h2>" +
    "<ul class='contentList'>" +
    "  <li>Handle: {0}</li>" +
    "  <li>Reputation: {1}</li>" +
    "  <li>More at <a href={2}>my profile page</a></li>" +
    "</ul>"
  );

  //Private methods
  function loadVars(json)
  {
    profile.id          = json.id;
    profile.profileUrl  = json.profileUrl;
    profile.displayName = json.displayName;
    profile.reputation  = json.reputation;
    profile.badgeHtml   = json.badgeHtml;
    buildHTML();
  }

  function buildHTML()
  {
    $("#rightColumn").prepend(
      htmlTemplate.format(
        profile.displayName + " " + profile.badgeHtml, 
        profile.reputation, 
        profile.profileUrl
      )
    );
  }

  //Public methods
  this.render = function()
  {
    $.ajax({
      url:"http://stackoverflow.com/users/flair/88383.json", 
      success: loadVars,
      dataType: "jsonp"
    });
  }

}

function Template(str)
{
	var templateString = str;

	this.format = function ()
	{
		var retVal = templateString;
		for(var i = 0; i < arguments.length; i++)
		{
			retVal = retVal.replace("\{"+i+"\}", arguments[i]);
		}
		return retVal;
	}
}

$(function() {
  new SO().render();
});