<div id="userCover" style="display:none;">
</div>

<div id="userInfoBox">
    <div class="table" style="width: 100%;">
        <div class="tableCell" style="vertical-align:middle; width: 70%;">
            <div class="userInfoField table">
                <i class="fa fa-user tableCell" aria-hidden="true"></i> <span class="tableCell" id="userCreated">_</span>
            </div>

            <div class="userInfoField table">
                <i class="fa fa-clock-o tableCell" aria-hidden="true"></i> <span class="tableCell" id="userLogon">_</span>
            </div>

            <div class="userInfoField table">
                <i class="fa fa-comment tableCell" aria-hidden="true"></i> <span class="tableCell" id="userPostCount">_</span>
            </div>

            <div class="userInfoField table">
                <i class="fa fa-envelope-o tableCell" aria-hidden="true"></i> <span class="tableCell" id="userEmail"><a href="#" class="themeBlue">_</a></span>
            </div>

            <div class="userInfoField table">
                <i class="fa fa-users tableCell" aria-hidden="true"></i> <span class="tableCell" id="userRank">_</span>
            </div>
        </div>
        <div class="tableCell" style="vertical-align:middle;">
            <div id="userAvatar" class="">
                <i class="fa fa-user-secret" aria-hidden="true" style="font-size: 19em; margin-top: -56px;"></i>
            </div>
        </div>
    </div>
    <hr style="width: calc(100% + 2em); margin-bottom: -1em; margin-left: -1em;" />
</div>
<div style="width: 100%; text-align: center; margin: 1em 0;"><a href="usercp">User Control Panel</a></div>


<script>

    $.getJSON("_userinfo?id=" + parseGet('id'), function (Response) {
        var user = Response.user;
    if (user == null)
    return false;
    $('#userCover').html(user.username);
    $('#userCover').css("background-color", Response.profile.bannerColor);
    var creationDate = new Date(user.creationDate);
    $('#userCreated').html("Joined " + (creationDate.getMonth() + 1) + '-' + creationDate.getDate() + '-' + creationDate.getFullYear());
    $('#userLogon').html("Last seen " + user.lastLoginString);
    $('#userPostCount').html(user.posts + " Posts");

    if (Response.profile.showEmail) {
        $('#userEmail a').html(user.email);
        $('#userEmail a').attr("href", "mailto:" + user.email);
    }
    $('#userAvatar').html('');
    $('#userAvatar').attr("style", "background-image:url('" + user.avatarURL + "');'");
    $('#userRank').html(user.ranking.name);
    $('#userCover').slideDown('fast');
  });


</script>