$(document).ready(function() {

            function rankingCallback(prefix, data) {
                var percentile = parseInt(((data.totalUsers - data.rank) / data.totalUsers) * 100);
                $("#" + prefix + "-ranking").attr('title', 'ranking ' + data.rank + " of " + data.totalUsers).html(" ●  top " + (100 - percentile) + "%");
            }

            function flairCallback(prefix, data) {
                $("#" + prefix + "-reputation-score").html(data.reputation);
                $("#" + prefix + "-badges").html(data.badgeHtml);
                $("#" + prefix + "-gravatar").attr("href", data.profileUrl).html(data.gravatarHtml);
                $("#" + prefix + "-display-name").attr("href", data.profileUrl).html(data.displayName);
            };

            function buildFlairContainer(container, prefix, title, site, userId) {
                var template =
                    '<div class="valuable-flair">'
                    + '    <div class="gravatar"><a id="~p~-gravatar" title="See my profile on ~t~" target="_blank"></a></div>'
                    + '    <div class="userInfo">'
                    + '        <span class="username" title="See my profile on ~t~">'
                    + '            <img src="http://sstatic.net/~p~/favicon.ico" alt="" />'
                    + '            <a id="~p~-display-name" target="_blank">&nbsp;</a></span>'
                    + '        <br />'
                    + '        <span id="~p~-reputation-score" title="reputation score">&nbsp;</span>'
                    + '        <span id="~p~-ranking">&nbsp;</span>'
                    + '        <br />'
                    + '        <div id="~p~-badges">&nbsp;</div>'
                    + '    </div>'
                    + '</div>';
                $(container).append(template.replace(/~p~/g, prefix).replace(/~t~/g, title));
                $.getJSON("http://" + site + "/users/flair/" + userId + ".json?callback=?",
                function(data) {
                    flairCallback(prefix, data);
                });
                $.getJSON("http://skysanders.net/tools/sorep/SEStats.ashx?site=" + site + "&userId=" + userId + "&callback=?",
                    function(data) {
                        rankingCallback(prefix, data);
                    });
            }


            buildFlairContainer("#flair", "so", "StackOverflow", "stackoverflow.com", "242897");


        });