var HOVER_CONTAINTER_ID = 'divProfileHover';
var HOVER_CONTAINTER_HTML = '<div id="divProfileHover"></div>';
var DOMAIN = '/';
var RemoteUrl;
var isRemote = 0;
var timerID;
var currentUserName;
var UsersAndMessages = new Array();
document.onmousemove = MouseMoveHandler;
var curElement;
var PERSONAL_MSG_PARA_NAME = "Personal_Message";
var currentMessage = "";

var CONST_URL_USERPROFILE = '<a href="[DOMAIN]Profile/UserProfile.aspx?sid=[SID]">[DISPLAYNAME]</a>';
var CONST_URL_SENDTOCKEN = '<a href="[DOMAIN]profile/sendtoken.aspx?sid=[SID]" class="show-more">[{Send_A_Token_Text}]</a>';
//--------------------------------------------------------------
// ProfileId class
//--------------------------------------------------------------
function ProfileId(sId) {

    //call base constructor
    Serializable.call(this);
    //initialize properties
    this.m_sId = sId;
}

ProfileId.prototype.GetId = function () {
    return this.m_sId;
}

ProfileId.prototype.Serialize = function () {
    var xmlFormat = "<sId>" + this.GetId() + "</sId>"
    return xmlFormat;
}
//-------------- End of ProfileId Class -------------------------

//--------------------------------------------------------------
// Profile class
//--------------------------------------------------------------
function Profile(sid, userName, location, mood, moodKey, signature, imageUrl, milestones, firstName, lastName, friendshipStatus, weightStatistics, avatar1, avatar2, avatar3, avatar1Name, avatar2Name, avatar3Name, displayName, city, state) {

    //call base constructor
    Serializable.call(this);
    //initialize properties
    this.m_sid = sid;
    this.m_userName = userName;
    currentUserName = userName;
    if (GetUserMessage() == undefined) {
        SaveUserMessage(ProfileHover_LocResources[PERSONAL_MSG_PARA_NAME]);
    }
    currentMessage = GetUserMessage();
    this.m_location = location;
    this.m_mood = mood;
    this.m_moodKey = moodKey;
    this.m_signature = signature;
    this.m_imageURL = imageUrl;
    this.m_milestones = milestones;
    this.m_firstName = firstName;
    this.m_lastName = lastName;
    this.m_friendshipStatus = friendshipStatus;
    this.m_weightStatistics = weightStatistics;
    this.m_avatar1 = avatar1;
    this.m_avatar2 = avatar2;
    this.m_avatar3 = avatar3;
    this.m_avatar1Name = avatar1Name;
    this.m_avatar2Name = avatar2Name;
    this.m_avatar3Name = avatar3Name;
    this.m_displayName = displayName;
    this.m_city = city;
    this.m_state = state;
}

Profile.prototype.GetSID = function () {
    return this.m_sid;
}

Profile.prototype.Serialize = function () {
    var xmlFormat = "<xml />"
    return xmlFormat;
}

Profile.prototype.GetHtml = function () {
    var html = GetLocalizedContents();

    html = html.replace(/\[DOMAIN\]/g, DOMAIN);
    html = html.replace(/\[SID\]/g, this.m_sid);

    html = html.replace("[USERIMAGE]", this.m_imageURL);
    html = html.replace(/\[DISPLAYNAME\]/g, this.m_displayName);

    html = ReplaceName(html, this.m_firstName, this.m_lastName);
    html = ReplaceLocation(html, this.m_location);
    html =  ReplaceCity(html, this.m_city);
    html =  ReplaceState(html, this.m_state);

    html = ReplaceSignature(html, this.m_signature);
    html = ReplaceAddFriend(html, this.m_friendshipStatus);
    html = ReplaceFriendRequest(html, this.m_friendshipStatus);
    html = ReplaceFriend(html, this.m_friendshipStatus);
    html = ReplaceConfirmFriend(html, this.m_friendshipStatus);
    html = ReplaceToken(html, this.m_friendshipStatus);
    html = ReplaceWeightStatistics(html, this.m_weightStatistics);
    html = ReplaceAvatars(html, this.m_avatar1, this.m_avatar2, this.m_avatar3, this.m_avatar1Name, this.m_avatar2Name, this.m_avatar3Name);
    // console.log(html);
    return html;
}
//-------------- End of Profile Class -------------------------

function ReplaceName(html, firstName, lastName) {
    if (firstName != "" || lastName != "") {
        html = html.replace("[DISPLAY_NAME]", "inline;");
        html = html.replace("[FIRSTNAME]", firstName);
        html = html.replace("[LASTNAME]", lastName);
    }
    else {
        html = html.replace("[DISPLAY_NAME]", "none;");
    }

    return html;
}

function ReplaceLocation(html, location) {
    if (location != "") {
        html = html.replace("[DISPLAY_LOCATION]", "inline;");
        html = html.replace("[LOCATION]", location);
    }
    else {
        html = html.replace("[DISPLAY_LOCATION]", "none;");
    }

    return html;
}

function ReplaceCity(html, city) {
    if (city != "") {
        html = html.replace("[DISPLAY_CITY]", "inline;");
        html = html.replace("[CITY]", city);
    }
    else {
        html = html.replace("[DISPLAY_CITY]", "none;");
    }

    return html;
}

function ReplaceState(html, state) {
    var boolShowState = ProfileHover_LocResources["ShowState"];
    if (boolShowState == true && state != "" && state != "DEFAULT STATE") {
        html = html.replace("[DISPLAY_STATE]", "inline;");
        html = html.replace("[STATE]", state);
    }
    else {
        html = html.replace("[DISPLAY_STATE]", "none;");
    }

    return html;
}

function ReplaceSignature(html, signature) {
    if (signature != "") {
        html = html.replace("[DISPLAY_SIGNATURE]", "inline;");
        html = html.replace("[SIGNATURE]", signature);
    }
    else {
        html = html.replace("[DISPLAY_SIGNATURE]", "none;");
    }

    return html;
}

function ReplaceWeightStatistics(html, weightStatistics) {
    if (weightStatistics != "") {
        html = html.replace("[DISPLAY_WEIGHT_STATISTICS]", "");
        html = html.replace("[WEIGHT_STATISTICS]", weightStatistics);
    }
    else {
        html = html.replace("[DISPLAY_WEIGHT_STATISTICS]", "none;");
    }

    return html;
}

function ReplaceAvatars(html, avatar1, avatar2, avatar3, avatar1Name, avatar2Name, avatar3Name) {

    html = html.replace("[AVATAR1]", avatar1);
    html = html.replace(/\[AVATAR1_NAME\]/g, avatar1Name);
    if (avatar1 == "")
        html = html.replace("[DISPLAY_AVATAR1]", "none;");
    else
        html = html.replace("[DISPLAY_AVATAR1]", "");

    html = html.replace("[AVATAR2]", avatar2);
    html = html.replace(/\[AVATAR2_NAME\]/g, avatar2Name);
    if (avatar2 == "")
        html = html.replace("[DISPLAY_AVATAR2]", "none;");
    else
        html = html.replace("[DISPLAY_AVATAR2]", "");

    html = html.replace("[AVATAR3]", avatar3);
    html = html.replace(/\[AVATAR3_NAME\]/g, avatar3Name);
    if (avatar3 == "")
        html = html.replace("[DISPLAY_AVATAR3]", "none;");
    else
        html = html.replace("[DISPLAY_AVATAR3]", "");


    return html;
}

function ReplaceAddFriend(html, friendshipStatus) {
    if (friendshipStatus == 2) {
        html = html.replace("[DISPLAY_ADD_FRIEND]", "inline;");
    }
    else {
        html = html.replace("[DISPLAY_ADD_FRIEND]", "none;");
    }

    return html;
}

function ReplaceFriendRequest(html, friendshipStatus) {
    if (friendshipStatus == 3) {
        html = html.replace("[DISPLAY_FRIEND_REQUEST]", "inline;");
    }
    else {
        html = html.replace("[DISPLAY_FRIEND_REQUEST]", "none;");
    }

    return html;
}

function ReplaceFriend(html, friendshipStatus) {
    if (friendshipStatus == 1) {
        html = html.replace("[DISPLAY_FRIEND]", "inline;");
    }
    else {
        html = html.replace("[DISPLAY_FRIEND]", "none;");
    }

    return html;
}

//if friendship request is pending for this user
function ReplaceConfirmFriend(html, friendshipStatus) {
    if (friendshipStatus == 4) {
        html = html.replace("[DISPLAY_CONFIRM_FRIEND]", "inline;");
    }
    else {
        html = html.replace("[DISPLAY_CONFIRM_FRIEND]", "none;");
    }

    return html;
}

function ReplaceToken(html, friendshipStatus) {
    //is a friend
    if (friendshipStatus == 1) {
        html = html.replace("[DISPLAY_TOKEN]", "inline;");
        html = html.replace("[DISPLAY_FRIEND]", "inline;");
    }
    else {
        html = html.replace("[DISPLAY_TOKEN]", "none;");
        html = html.replace("[DISPLAY_FRIEND]", "none;");
    }

    return html;
}

function AddAsFriend(sid) {
    var PersonalMessage = EncodeText($(JId('textPersonalMessagePopup')).val() == ProfileHover_LocResources[PERSONAL_MSG_PARA_NAME] ? "" : $(JId('textPersonalMessagePopup')).val());
    var xmlInput = "<input><ClientID>" + sid + "</ClientID><PersonalMessage>" + PersonalMessage + "</PersonalMessage></input>";
    if (isRemote == 1) {
        AddAsFriendRemote(escape(xmlInput));
    }
    else {
        $.ajax({
            type: "POST",
            url: "/Services/UserServicePage.aspx",
            data: "method=AddFriend&xmlInput=" + xmlInput,
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            },
            success: function (xml) {
                AddAsFriendResult(xml);
            } //end of success handler
        });
    }
}

function AddAsFriendRemote(xmlInput) {
    var remoteInput = "<remoteInput>xmlInput=" + xmlInput + "</remoteInput>";

    var xmlData = "<remoteUrl>" + RemoteUrl + "</remoteUrl><postData><remoteMethod>method=AddFriend</remoteMethod>" + remoteInput + "</postData>";

    var xmlInput = PrepareXmlInput(xmlData);

    $.ajax({
        type: "POST",
        url: "/httpservices/proxyservice.aspx",
        data: "method=RemotePost&xmlInput=" + xmlInput,
        error: function (XMLHttpRequest, textStatus, errorThrown) {
        },
        success: function (xml) {
            AddAsFriendResult(xml);
        } //end of success handler
    });
}

function AddAsFriendResult(xml) {
    var isValid;

    $(xml).find('output').each(function (i) {
        isValid = $(this).find("isvalid").text();
    });

    if (isValid && isValid == "true") {
        $(JId('profilePopUpAddFriend')).hide();
        $(JId('divPersonalMessagePopup')).hide();
        $(JId('profilePopUpRequested')).show();
        $(JId('cvValidator')).hide();
    }
    else {
        $(JId('profilePopUpAddFriend')).show();
        $(JId('divPersonalMessagePopup')).show();
        $(JId('profilePopUpRequested')).hide();
        $(JId('cvValidator')).show();
        return false;
    }
}

function ConfirmAsFriend(sid) {
    var xmlInput = "<input><ClientID>" + sid + "</ClientID></input>";

    if (isRemote == 1) {
        ConfirmAsFriendRemote(xmlInput);
    }
    else {
        $.ajax({
            type: "POST",
            url: "/Services/UserServicePage.aspx",
            data: "method=ConfirmFriend&xmlInput=" + xmlInput,
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            },
            success: function (xml) {
                $(JId('profilePopUpConfirmFriend')).hide();
                $(JId('profilePopUpFriend')).show();
                $(JId('profilePopUpSendToken')).show();
            } //end of success handler
        });
    }
}

function ConfirmAsFriendRemote(xmlInput) {
    var remoteInput = "<remoteInput>xmlInput=" + xmlInput + "</remoteInput>";

    var xmlData = "<remoteUrl>" + RemoteUrl + "</remoteUrl><postData><remoteMethod>method=ConfirmFriend</remoteMethod>" + remoteInput + "</postData>";

    var xmlInput = PrepareXmlInput(xmlData);

    $.ajax({
        type: "POST",
        url: "/httpservices/proxyservice.aspx",
        data: "method=RemotePost&xmlInput=" + xmlInput,
        error: function (XMLHttpRequest, textStatus, errorThrown) {
        },
        success: function (xml) {
            $(JId('profilePopUpConfirmFriend')).hide();
            $(JId('profilePopUpFriend')).show();
            $(JId('profilePopUpSendToken')).show();
        } //end of success handler
    });
}

function DisplayProfile(event, ctrl, sId, hideTokenLink) {
    var evt = (!event) ? window.event : event;

    //now get profile via AJAX
    var profileId = new ProfileId(sId);

    var xmlData = profileId.Serialize();

    DisplayProfileHover(evt, ctrl, xmlData, hideTokenLink);
} //getprofile

function DisplayProfileMember(event, ctrl, memberNumber, hideTokenLink) {
    var evt = (!event) ? window.event : event;
    var xmlData = "<memNum>" + memberNumber + "</memNum>";

    DisplayProfileHover(evt, ctrl, xmlData, hideTokenLink);
} //getprofileMember

function DisplayProfileHover(evt, ctrl, xmlData, hideTokenLink) {
    var point = GetCoordinates(evt);
    var xmlInput = PrepareXmlInput(xmlData);

    var profile = null;

    $.ajax({
        type: "POST",
        url: "/Services/UserServicePage.aspx",
        data: "method=GetProfile&xmlInput=" + xmlInput,
        error: function (XMLHttpRequest, textStatus, errorThrown) {

            //remove waiting html
            $(document).ready(function () {
                HideProfile();
            });

        }, //error
        success: function (xml) {

            profile = ProfileSuccessHandler(xml);

            var profileHtml = profile.GetHtml();

            //console.log(profileHtml);

            $(document).ready(function () {
                ShowHover(evt, ctrl, profileHtml, point);
            }
                  );

            if (hideTokenLink) { $(JId('profilePopUpSendToken')).hide(); }

        } //success
    });  //ajax
}

function DisplayProfileRemote(event, ctrl, sId, memberNumber, proxyUrl, remoteUrl, domain, country) {
    if (sId == "" && memberNumber == "")
        return;

    //CONST_URL_USERPROFILE = '<a href="/vendor/dispatcher.aspx?login=True&application=SocNet&section=PersonalPage?sid=[SID]">[USERNAME]</a>';    
    //CONST_URL_SENDTOCKEN  = '<a href="/vendor/dispatcher.aspx?login=True&application=SocNet&redirectUrl=[DOMAIN]profile/sendtoken.aspx?sid=[SID]" class="show-more">Send a token</a>';

    DOMAIN = domain;
    FOOTPRINT = domain;
    COUNTRY = country;
    isRemote = 1;
    RemoteUrl = remoteUrl;

    var point = GetCoordinates(event);

    var evt = (!event) ? window.event : event;

    var remoteInput = "<remoteInput>xmlInput=<xml><sId>" + sId + "</sId><memNum>" + memberNumber + "</memNum></xml></remoteInput>";

    var xmlData = "<remoteUrl>" + remoteUrl + "</remoteUrl><postData><remoteMethod>method=GetProfile</remoteMethod>" + remoteInput + "</postData>";

    var xmlInput = PrepareXmlInput(xmlData);

    $.ajax({
        type: "POST",
        url: proxyUrl,
        data: "method=RemotePost&xmlInput=" + xmlInput,
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            //remove waiting html
            $(document).ready(function () {
                HideProfile();
            }
                  );

        }, //error
        success: function (xml) {

            profile = ProfileSuccessHandler(xml);

            if (profile != null && profile.GetSID() > 0) {
                //Show hover only if the SocNet profile exists
                hoverTemplate = hoverTemplate.replace(CONST_URL_USERPROFILE, '<a href="/vendor/dispatcher.aspx?login=False&application=SocNet&section=PersonalPage?sid=[SID]">[DISPLAYNAME]</a>');
                hoverTemplate = hoverTemplate.replace(CONST_URL_SENDTOCKEN, '<a href="/vendor/dispatcher.aspx?login=True&application=SocNet&redirectUrl=[DOMAIN]profile/sendtoken.aspx?sid=[SID]" class="show-more">Send a token</a>');
                var profileHtml = profile.GetHtml();

                $(document).ready(function () {
                    ShowHover(evt, ctrl, profileHtml, point);
                }
                          );
            }

        } //success
    }); //ajax
}

function ShowHover(e, ctrl, html, point) {
    if ($(JId(HOVER_CONTAINTER_ID)).length == 0) {
        //one-time operation; add a dummy container for hover
        $('body').append(HOVER_CONTAINTER_HTML);
    }

    if (IsMouseOverElement(ctrl)) {
        //Show the hover box only if the mouse is still over the same element (there could be delay in fetching service data)        
        clearTimeout(timerID);
        $(JId(HOVER_CONTAINTER_ID)).replaceWith(html);
        $(JId(HOVER_CONTAINTER_ID)).css('position', 'absolute').css('top', point.Y).css('left', point.X);
    }

}

//This is called when the mouse is over the profile hover box
function DisplayHover() {
    clearTimeout(timerID);
    $(JId(HOVER_CONTAINTER_ID)).css('display', 'inline');
}

function HideProfileHandler() {
    $(JId(HOVER_CONTAINTER_ID)).css('display', 'none');
}

function MouseMoveHandler(event) {
    var evt = (!event) ? window.event : event;
    var target = evt.target ? evt.target : evt.srcElement;

    if (target != null) {
        curElement = target;
    }
    else {
        curElement = null;
    }
}

//Determine if the mouse is currently over the given element
function IsMouseOverElement(ctrl) {
    if (curElement != null) {
        if (curElement.href == ctrl.href)
            return true;
    }

    return false;
}

function ProfileSuccessHandler(xml) {
    var profile = null;
    //Get the thread Id from response
    $(xml).find('output').each(function (i) {

        var sid = $(this).find("sid").text();
        var userName = $(this).find("userName").text();
        var location = $(this).find("location").text();
        var signature = $(this).find("signature").text();
        var mood = $(this).find("mood").text();
        var moodKey = $(this).find("moodKey").text();
        var imageUrl = $(this).find("image").text();
        var milestones = $(this).find("milestones").text();
        var firstName = $(this).find("firstName").text();
        var lastName = $(this).find("lastName").text();
        var friendshipStatus = $(this).find("friendshipStatus").text();
        var startWeigh = $(this).find("startWeight").text();
        if (startWeigh == 0) startWeigh = ""; // if the weight returned as 0 make it empty
        var currentWeight = $(this).find("currentWeight").text();
        if (currentWeight == 0) currentWeight = ""; // if the weight returned as 0 make it empty
        var goalWeigh = $(this).find("goalWeight").text()
        if (goalWeigh == 0) goalWeigh = ""; // if the weight returned as 0 make it empty
        var weightStatistics;
        if (goalWeigh == 0 && currentWeight == 0 && startWeigh == 0)
            weightStatistics = "";
        else
            weightStatistics = startWeigh + ' / ' + currentWeight + ' / ' + goalWeigh;

        if (imageUrl.length == 0) {
            imageUrl = GetDefaultProfileImage();
        }
        var avatar1 = $(this).find("avatar1").text();
        var avatar2 = $(this).find("avatar2").text();
        var avatar3 = $(this).find("avatar3").text();
        var avatar1Name = $(this).find("avatar1Name").text();
        var avatar2Name = $(this).find("avatar2Name").text();
        var avatar3Name = $(this).find("avatar3Name").text();
        var displayName = $(this).find("displayName").text();
        var city = $(this).find("city").text();
        var state = $(this).find("state").text();

        profile = new Profile(sid, userName, location, mood, moodKey, signature, imageUrl, milestones, firstName, lastName, friendshipStatus, weightStatistics, avatar1, avatar2, avatar3, avatar1Name, avatar2Name, avatar3Name, displayName, city, state);

    });

    return profile;
}

function HideProfile() {
    if ($('#textPersonalMessagePopup')[0]) {
        if ($('#textPersonalMessagePopup')[0].focused != true) {
            timerID = setTimeout(HideProfileHandler, 200);
        }
    }
    else {
        timerID = setTimeout(HideProfileHandler, 200);
    }
}

function SetFocusTrue() {
    $('#textPersonalMessagePopup')[0].focused = true;
    try {
        $($('#textPersonalMessagePopup')[0]).maxLength($($('#textPersonalMessagePopup')[0]).attr("maxlength"));
    }
    catch (e) {

    }
}

function SetFocusFalse() {
    $('#textPersonalMessagePopup')[0].focused = false;
}

function SetUserMessage() {
    if (currentMessage == "") {
        currentMessage = ProfileHover_LocResources[PERSONAL_MSG_PARA_NAME];
    }
    $('#textPersonalMessagePopup')[0].value = currentMessage;
}

function SaveUserMessage(message) {
    UsersAndMessages[currentUserName] = message;
    currentMessage = message;
}

function GetUserMessage() {
    return UsersAndMessages[currentUserName];
}

function showHidePersonalMessageInput(divId, source, expandStyleName, collapseStyleName) {
    if ($("#" + divId + ":hidden").length > 0) {
        $(JId(divId)).show();

        $("#" + source)[0].className = expandStyleName;
        currentMessage = GetUserMessage();
        if (currentMessage != "" && currentMessage != ProfileHover_LocResources[PERSONAL_MSG_PARA_NAME]) {
            $('#textPersonalMessagePopup')[0].focus();
        }
    }
    else {
        $(JId(divId)).hide();
        $(JId('cvValidator')).hide();
        $("#" + source)[0].className = collapseStyleName;
    }
}

function GetLocalizedContents() {
    var rawContent = hoverTemplate;
    for (var parameter in ProfileHover_LocResources) {
        var replacementParameter = "[{" + parameter + "}]";
        var indexOfMatch = rawContent.indexOf(replacementParameter);

        // Defect #109982: added while loop to search for all instances of 
        // replacementParameter in rawContent string because javascript will
        // stop replacing after it finds the first instance of same replacement
        // string (ex. "[{Personal_Message}]" occurs 3 times in the string)
        while (indexOfMatch != -1) {
            rawContent = rawContent.replace(replacementParameter, ProfileHover_LocResources[parameter]);
            indexOfMatch = rawContent.indexOf(replacementParameter);
        }
    }
    return rawContent;
}

var hoverTemplate = ' ' +
'<div id="divProfileHover" onclick="DisplayHover()" onmouseover="DisplayHover()" onmouseout="HideProfile()">' +
'   <div class="profile-bubble">' +
'        <div class="profile-bubble-top">' +
'            <div class="profile-bubble-bot">' +
'                <table cellspacing="0" cellpadding="0" border="0" width="348">' +
'                    <tbody>' +
'                        <tr>' +
'                            <td valign="top" rowspan="6">' +
'                                <div class="pict">' +
'                                    <img style="border-width: 0px;" src="[USERIMAGE]" class="medium" />' +
'                               </div>' +
'                            </td>' +
'                            <td>' +
'                                <div class="info">' +
'                                    <div class="top">' +
'                                        <h2>' + CONST_URL_USERPROFILE +
'                                        </h2>' +
'                                    </div>' +
'                                   <div>' +
'                                        <table border="0">' +
'                                            <tbody>' +
'                                                <tr style="display: [DISPLAY_NAME]">' +
'                                                    <td style="font-weight: bold; width: 60px;">' +
'                                                        <span>[{Name_Label}]</span>' +
'                                                    </td>' +
'                                                    <td>' +
'                                                        [FIRSTNAME] [LASTNAME]</td>' +
'                                                </tr>' +

'                                                <tr style="display: [DISPLAY_CITY]">' +
'                                                    <td style="font-weight: bold; width: 60px;">' +
'                                                        <span>[{City_Label}]</span>' +
'                                                   </td>' +
'                                                    <td>' +
'                                                        [CITY]</td>' +
'                                                </tr>' +

'                                                <tr style="display: [DISPLAY_STATE]">' +
'                                                    <td style="font-weight: bold; width: 60px;">' +
'                                                        <span>[{State_Label}]</span>' +
'                                                   </td>' +
'                                                    <td>' +
'                                                        [STATE]</td>' +
'                                                </tr>' +

'                                                <tr style="display: [DISPLAY_SIGNATURE]">' +
'                                                    <td style="width: 200px;" colspan="2">' +
'                                                       <div style="width: 200px;" class="wordWrap">' +
'                                                           <span><strong>[{Signature_Label}]</strong> </span>' +
'                                                           <br />' +
'                                                           <span><pre>[SIGNATURE]</pre></span>' +
'                                                       </div>' +
'                                                    </td>' +
'                                                </tr>' +
'                                           </tbody>' +
'                                        </table>' +
'                                    </div>' +
'                                   <!-- avatars -->' +
'                                    <div class="profilehover-icons">' +
'                                                           <img title = "[AVATAR1_NAME]" style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; display: [DISPLAY_AVATAR1]" src="[AVATAR1]" alt="[AVATAR1_NAME]" />' +
'                                                           <img title = "[AVATAR2_NAME]" style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; display: [DISPLAY_AVATAR2]" src="[AVATAR2]" alt="[AVATAR2_NAME]" />' +
'                                                           <img title = "[AVATAR3_NAME]" style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; display: [DISPLAY_AVATAR3]" src="[AVATAR3]" alt="[AVATAR3_NAME]" />' +
'                                            <br clear="all"/>' +
'                                           <div id= "weightsDiv" style="display: [DISPLAY_WEIGHT_STATISTICS]">' +
'                                                           <span>[WEIGHT_STATISTICS]</span>' +
'                                           </div>' +
'                                    </div>' +
'                                  <!-- end avatars -->' +
'                                                    </td>' +
'                                                </tr>' +
'                                </div>' +
'                            </td>' +
'                        </tr>' +
'                   </tbody>' +
'                </table>' +
'                <div class="profile-info-bot-popup">' +
'                    <span id="profilePopUpAddFriend" style="float: left; display: [DISPLAY_ADD_FRIEND]"><a id="lnkDisplayAddFriend" href="javascript:void(0);" onclick="showHidePersonalMessageInput(\'divPersonalMessagePopup\', \'lnkDisplayAddFriend\', \'show-less\', \'show-more\');"' +
'                        class="show-more">[{Add_As_Friend_Text}]</a></span>' +
'                           <span id="profilePopUpConfirmFriend" style="float: left; display: [DISPLAY_CONFIRM_FRIEND]">' +
'                            <a href="javascript:void(0)" onclick="ConfirmAsFriend([SID]);"class="show-more">[{Confirm_As_Friend_Text}] </a></span>' +
'                           <span id="profilePopUpRequested" style="float: left; display: [DISPLAY_FRIEND_REQUEST]">' +
'                            <i>[{Friend_Request_Sent_Text}]</i> </span> ' +
'                       <br /><span id="cvValidator" style="float: left;display:none;color:Red;">' +
'                            <i>The personal message text has exceeded the maxLength</i> </span> ' +
'                               <span id="profilePopUpSendToken" style="float: right; display: [DISPLAY_TOKEN]">' + CONST_URL_SENDTOCKEN +
'                               </span><span id="profilePopUpFriend" style="float: left; display: [DISPLAY_FRIEND]"><i>[{Currently_A_Friend_Text}]</i>' +
'                               </span>' +
'       <div id="divPersonalMessagePopup" style="display:none;"><br clear="all"/>' +
'       <table><tr><td>' +
'           <textarea style="width:200px;" id="textPersonalMessagePopup" maxlength="200" onkeyup="SaveUserMessage(this.value);" onkeypressed="SaveUserMessage(this.value);" onkeydown="SaveUserMessage(this.value);" rows="4" cols="20" onfocus="SetUserMessage();SetFocusTrue();showHideDefaultPersonalMessage(\'textPersonalMessagePopup\',\'[{Personal_Message}]\');" onblur="SetUserMessage();SetFocusFalse();showHideDefaultPersonalMessage(\'textPersonalMessagePopup\',\'[{Personal_Message}]\');HideProfile();" ' +
'           >[{Personal_Message}]</textarea>' +
'            </td><td  class="td-btn">' +
'           <a href="javascript:AddAsFriend([SID]);"  class="btn-edit">[{Submit_Label}]</a></td>' +
'             <td  class="td-btn"><a href="javascript:void(0);" onclick="showHidePersonalMessageInput(\'divPersonalMessagePopup\', \'lnkDisplayAddFriend\', \'show-less\', \'show-more\');">[{Cancel_Label}]</a>' +
'           </td></tr></table> ' +
'       </div>' +
'                </div>' +
'            </div>' +
'       </div>' +
'   </div>' +
'</div>';