﻿<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:fb="http://www.facebook.com/2008/fbml">
    <xsl:import href="WizardButtons.xslt"/>

    <xsl:template match ="/">
        <xsl:variable name="TemplatePathURL" select="normalize-space(SocialData/TemplateURL)"/>
        <xsl:variable name="HostName" select="normalize-space(SocialData/HostName)" />
        <xsl:variable name="APIKey" select="normalize-space(SocialData/Params/APIKey)"/>
        <xsl:variable name="Authenticated" select="normalize-space(SocialData/Authenticated)"/>

        <xsl:variable name="DisplayFBButton">
            <xsl:choose>
                <xsl:when test="SocialData/User/FbUserID">
                    display:none
                </xsl:when>
                <xsl:otherwise>
                    display:block
                </xsl:otherwise>
            </xsl:choose>
        </xsl:variable>
        <xsl:variable name ="DisplayFBMessage">
            <xsl:choose>
                <xsl:when test="SocialData/User/FbUserID">
                    display:block
                </xsl:when>
                <xsl:otherwise>
                    display:none
                </xsl:otherwise>
            </xsl:choose>
        </xsl:variable>

        <div id="divSocialLayout" style="width: 100%;">
            <div class="marginTop20" style="margin-bottom: 60px;width:780px;">
                <table class="tableMaster" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td align="top">
                            <span class="superPageLSMessage">Share and connect with your friends.</span>
                        </td>
                    </tr>
                    <tr>
                        <td align="top">
                            <span class="templateMemoText">
                                You can easily invite others to join you on LifeSpace or connect with facebook friends.
                            </span>
                        </td>
                    </tr>

                </table>
            </div>


            <div class="">
                Find your Facebook friends on LifeSpace
            </div>
            <div id="divFbNotConnected" class="marginTop10 marginBottom15" style="{$DisplayFBButton};">
                <img src="{$TemplatePathURL}Web/Images/fbconnect.gif" class="link" onclick="facebookLoginPopup(3);" />
            </div>

            <div id="divFbConnected" runat="server" style="{$DisplayFBMessage};">
                <div style="font-family: Calibri, Verdana, Arial; font-size: 10pt; text-align: justify;">
                    <b>Congratulations! </b>Your LifeSpace Account now is Linked to Facebook!
                </div>
                <div style="font-family: Calibri, Verdana, Arial; font-size: 10pt;">
                    We will announce future features as they become available."
                </div>
            </div>

            <div id="divFindFriendsOnFacebook" class="marginTop25">
                <table class="tableMaster" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td width="60%">
                            <div class="capitalFont" style="height:30px;">
                                EMAIL FRIENDS
                            </div>
                            <div class="marginBottom10">
                                <input style="height:25px;" id="txt_Soacil_EmailFriend" type="text" value="ENTER FRIENDS EMAILS" class="TextBoxBorder textAreaNotes"
								    onClick="SetTextAreaValue('txt_Soacil_EmailFriend', 'ENTER FRIENDS EMAILS', 'focus');"
                                    onblur="SetTextAreaValue('txt_Soacil_EmailFriend', 'ENTER FRIENDS EMAILS', 'blur');"
                                       onKeyup="this.style.fontStyle = 'normal';this.style.color='Black'"></input>
                            </div>
                            <div class="marginBottom10">
                                <textarea id="txt_Soacil_Message" rows="3" class="TextBoxBorder textAreaNotes" onKeyup="this.style.fontStyle = 'normal';this.style.color='Black'">
                                </textarea>
                            </div>
                            <xsl:choose>
                                <xsl:when test="$Authenticated = 'True'">
                                    <div align="right" class="marginBottom20"
                                         onclick="return Email_InviteUsers_Ver_2_0('txt_Soacil_EmailFriend','txt_Soacil_Message',0,'social','','divFindFriendsOnFacebook');">
                                        <table>
                                            <tr>
                                                <td class="textCenter onMouseOver divBrowseGradient spanBrowseGradientTextGray verticallyMiddle"
                                                    style="width:100px;height:30px;margin-right:20px;"
                                                    onmouseover="document.getElementById('img_SendInvite').src='{$TemplatePathURL}Web/Images/Ver_2_0/BT_arrow_hover.png';"
                                                    onmouseout="document.getElementById('img_SendInvite').src='{$TemplatePathURL}Web/Images/Ver_2_0/BT_arrow.png';">
                                                    <img id="img_SendInvite" class="verticallyMiddle marginRight5" src="{$TemplatePathURL}Web/Images/Ver_2_0/BT_arrow.png" align="absmiddle"></img>
                                                    <span id="span_SendInvite" class="verticallyMiddle">SEND INVITE</span>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </xsl:when>
                                <xsl:otherwise>
                                    <div align="right" class="marginBottom20"
                                         onclick="DisplaySignUpPopUp('signup','emailinvitationsocial','0');">
                                        <table>
                                            <tr>
                                                <td class="textCenter onMouseOver divBrowseGradient spanBrowseGradientTextGray verticallyMiddle"
                                                    style="width:100px;height:30px;margin-right:20px;"
                                                    onmouseover="document.getElementById('img_SendInvite').src='{$TemplatePathURL}Web/Images/Ver_2_0/BT_arrow_hover.png';"
                                                    onmouseout="document.getElementById('img_SendInvite').src='{$TemplatePathURL}Web/Images/Ver_2_0/BT_arrow.png';">
                                                    <img id="img_SendInvite" class="verticallyMiddle marginRight5" src="{$TemplatePathURL}Web/Images/Ver_2_0/BT_arrow.png" align="absmiddle"></img>
                                                    <span id="span_SendInvite" class="verticallyMiddle">SEND INVITE</span>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </xsl:otherwise>
                            </xsl:choose>

                            <div class="capitalFont" style="height:30px;">
                                COPY AND PASTE
                            </div>
                            <div>
                                <input style="height:25px;" id="txt_CopyAndPaste" type="text" value="http://{$HostName}"
									   class="TextBoxBorder textAreaNotes"></input>
                            </div>
                        </td>
                        <td>
                            <div style="margin-left:50px;">
                                <div class="capitalFont" style="height:30px;">
                                    Get Social
                                </div>
                                <div>
                                    <div>
                                        <a  href="http://www.facebook.com/share.php?u=http://{$HostName}" target="_blank">
                                            <img style="border:0px;" src="{$TemplatePathURL}Web/Images/Ver_2_0/BT_facebook_60.png" align="absmiddle"
                                         class="marginRight15"></img>
                                        </a>
                                        <span class="capitalFont">Share it on facebook</span>
                                    </div>
                                    <div style="margin-top:10px;">
                                        <a  href="http://twitter.com/home/?status=http://{$HostName}" target="_blank">
                                            <img class="onMouseOver marginRight15" style="border:0px;" src="{$TemplatePathURL}Web/Images/Ver_2_0/BT_twitter_60.png"
                                                 align="absmiddle"></img>
                                        </a>
                                        <span class="capitalFont" >Tweet it</span>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>

            <div align="right" style="width:780px;margin-top:40px;">
                <div class="verticallyMiddle onMouseOver divBrowseGradient spanBrowseGradientTextGray textCenter"
                    style="width:100px;height:30px;display:table-cell;"
                    onmouseover="document.getElementById('img_Next').src='{$TemplatePathURL}Web/Images/Ver_2_0/BT_arrow_hover.png';"
                    onmouseout="document.getElementById('img_Next').src='{$TemplatePathURL}Web/Images/Ver_2_0/BT_arrow.png';">
                    <a href="http://{$HostName}/Home.aspx" style="text-decoration:none;">
                        <img id="img_Next" style="padding-left:8px;border:0px;" src="{$TemplatePathURL}Web/Images/Ver_2_0/BT_arrow.png" align="absmiddle"
                             class="marginRight5"></img>
                        <span id="span_Next" class="spanBrowseGradientTextGray">CONTINUE</span>
                    </a>
                </div>
            </div>
        </div>
    </xsl:template>
</xsl:stylesheet>

