﻿<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl">
	<xsl:output method="xml" indent="yes"/>
	<xsl:include href="../../Version_2_0/PopUpHeader.xslt"/>

	<xsl:template match="/">
		<xsl:variable name="TemplateURL" select="AjaxRequest/TemplateURL"></xsl:variable>
		<xsl:variable name="Mode" select="AjaxRequest/Params/Mode"></xsl:variable>

		<xsl:call-template name="SignUpScreen">
			<xsl:with-param name="TemplateURL" select="$TemplateURL"></xsl:with-param>
			<xsl:with-param name="Mode" select="$Mode"></xsl:with-param>
			<xsl:with-param name="PopUpYN">
				<xsl:text>1</xsl:text>
			</xsl:with-param>
		</xsl:call-template>

	</xsl:template>
	<xsl:template name="SignUpScreen">
		<xsl:param name="TemplateURL" select="'N/A'"></xsl:param>
		<xsl:param name="PopUpYN" select="'N/A'"></xsl:param>
		<xsl:param name="Mode" select="'N/A'"></xsl:param>

		<xsl:choose>
			<xsl:when test="$PopUpYN = 1">
				<xsl:if test="$Mode = 'signup'">
					<xsl:call-template name="PopUpHeader">
						<xsl:with-param name="ItemID">0</xsl:with-param>
						<xsl:with-param name="TemplateURL" select="$TemplateURL"></xsl:with-param>
						<xsl:with-param name="HeaderText">
							<xsl:text>Sign up to Lifespace – It’s Free!</xsl:text>
						</xsl:with-param>
					</xsl:call-template>
					<img style="height:10px;" width="100%" src="{$TemplateURL}Web/Images/Ver_2_0/dropshadow_550.png" alt=""></img>
					<div style="margin-top:-5px;background:#E6E7E8;padding-top:20px;">
						<table class="tableMaster" cellpadding="0" cellspacing="0">
							<tr>
								<td width="10px" style="border-bottom:1px solid black;">

								</td>
								<td width="80px" class="textCenter padding10 capitalFont onMouseOver" style="background:white;border-top:1px solid black;
									border-left:1px solid black;border-right:1px solid black;">
									Sign Up
								</td>
								<td width="80px" class="textCenter padding10 capitalFont onMouseOver" onclick="DisplaySignUpPopUp('login');" style="border-bottom:1px solid black;">
									Login
								</td>
								<td style="border-bottom:1px solid black;">

								</td>
							</tr>
						</table>
						<table class="tableMaster padding15" cellpadding="0" cellspacing="0" style="background:white;">
							<tr>
								<td class="paddingLeft10 paddingTop10" width="460px">
									<div class="paddingBottom5 discussionText">
										FIRST NAME
									</div>
									<div class="paddingBottom10">
										<input type="text" id="txtName" class="textBoxClass1"></input>
									</div>
									<div class="paddingBottom5 discussionText">
										LAST NAME
									</div>
									<div class="paddingBottom10">
										<input type="text" id="txtName" class="textBoxClass1"></input>
									</div>
									<div class="paddingBottom5 discussionText">
										EMAIL
									</div>
									<div class="paddingBottom10">
										<input type="text" id="txtEMail" class="textBoxClass1"></input>
									</div>
									<div class="paddingBottom5 discussionText">
										CONFIRM EMAIL
									</div>
									<div class="paddingBottom10">
										<input type="text" id="txtEMail" class="textBoxClass1"></input>
									</div>
									<span class="discussionText">We will send you a verification e-mail to complete your registration</span>

									<div class="paddingTop10 paddingBottom10">
										I Am
										<input type="radio" class="marginLeft20"></input><span style="color:#288597;">Male</span>
										<input type="radio" class="marginLeft20"></input><span style="color:#288597;">Female</span>
									</div>
									<div class="paddingBottom10">
										Birthday
										<select class="marginLeft20 textCenter" style="width:100px;">
											<option value="1" selected="selected">Month</option>
										</select>

										<select class="marginLeft20 textCenter" style="width:80px;">
											<option value="1" selected="selected">Day</option>
										</select>

										<select class="marginLeft20 textCenter" style="width:80px;">
											<option value="1" selected="selected">Year</option>
										</select>
									</div>
									<span class="discussionText">We use this data to provide appropriate content</span>
									<div class="paddingBottom5 marginTop15 discussionText">
										PASSWORD
									</div>
									<div style="padding-bottom:20px;">
										<input type="text" id="txtPassword" class="textBoxClass1"></input>
									</div>
									<div class="paddingBottom5 discussionText">
										CONFIRM PASSWORD
									</div>
									<div style="padding-bottom:20px;">
										<input type="text" id="txtConfirmPassword" class="textBoxClass1"></input>
									</div>
									<div align="right" style="padding-bottom:5px;">
										<div class="textCenter signUp boxShadow">
											<span>
												Sign up
											</span>
										</div>
									</div>
								</td>
								<td>
									<div class="marginLeft20" style="margin-top:30px;width:260px;background:#E6E7E8;height:210px;">
										<div class="textCenter YourLifeSpace" style="padding-top:10px;">
											What's so awesome
											about LifeSpace?
										</div>
										<ul style="margin-left: 0px;padding-left: 20px;">
											<li>
												See all your life's goals in one place
											</li>
											<li>
												Manage and track your progress
											</li>
											<li>
												Connect with communities and coaches
											</li>
											<li>
												Get support, articles, and resources
											</li>
											<li>
												Share your success with the world
											</li>
										</ul>
									</div>
								</td>
							</tr>
						</table>
					</div>
				</xsl:if>
				<xsl:if test="$Mode = 'login'">
					<xsl:call-template name="PopUpHeader">
						<xsl:with-param name="ItemID">0</xsl:with-param>
						<xsl:with-param name="TemplateURL" select="$TemplateURL"></xsl:with-param>
						<xsl:with-param name="HeaderText">
							<xsl:text>Log in to Lifespace</xsl:text>
						</xsl:with-param>
					</xsl:call-template>
					<img style="height:10px;" width="100%" src="{$TemplateURL}Web/Images/Ver_2_0/dropshadow_550.png" alt=""></img>
					<div style="margin-top:-5px;background:#E6E7E8;padding-top:20px;">
						<table class="tableMaster" cellpadding="0" cellspacing="0">
							<tr>
								<td width="10px" style="border-bottom:1px solid black;">

								</td>
								<td width="80px" class="textCenter padding10 capitalFont onMouseOver" onclick="DisplaySignUpPopUp('signup');" style="border-bottom:1px solid black;">
									Sign Up
								</td>
								<td width="80px" class="textCenter padding10 capitalFont onMouseOver" style="background:white;border-top:1px solid black; border-left:1px solid black;border-right:1px solid black;">
									Login
								</td>
								<td style="border-bottom:1px solid black;">

								</td>
							</tr>
						</table>
						<table class="tableMaster padding15" cellpadding="0" cellspacing="0" style="background:white;">
							<tr>
								<td class="paddingLeft10 paddingTop10" width="460px">
									<div class="paddingBottom5 discussionText">
										EMAIL
									</div>
									<div class="paddingBottom10">
										<input type="text" id="txtEMail" class="textBoxClass1"></input>
									</div>
									<div class="paddingBottom5 marginTop15 discussionText">
										PASSWORD
									</div>
									<div style="padding-bottom:20px;">
										<input type="text" id="txtPassword" class="textBoxClass1"></input>
									</div>
									<div style="padding-bottom:20px;">
										<input class="verticallyMiddle marginRight10" type="checkbox" id="txtKeepLogin"></input>
										<span class="goalMenuTabsText capitalFont verticallyMiddle">
											Keep me logged in
										</span>
									</div>
									<div style="padding-bottom:20px;">
										<span class="goalMenuTabsText capitalFont">
											Forgot password?
										</span>
									</div>
									<div align="right" style="padding-bottom:5px;">
										<div class="textCenter signUp boxShadow">
											<span>
												Login
											</span>
										</div>
									</div>
								</td>
								<td>
									<div class="marginLeft20" style="margin-top:30px;width:260px;background:#E6E7E8;height:100px;">
										<div class="textCenter labelBlackText" style="padding-top:20px;">
											Not a member of LifeSpace yet?
										</div>
										<div class="textCenter YourLifeSpace" style="padding-top:10px;">
											Sign up now!
										</div>
									</div>
								</td>
							</tr>
						</table>
					</div>
				</xsl:if>
			</xsl:when>
			<xsl:otherwise>
				<div class="divLoginScreen">
					<table class="padding15 tableMaster">
						<tr>
							<td width="100%">
								<div class="labelBlueLarge paddingBottom10">
									Join now – It's Free!
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="paddingBottom5">
									FIRST NAME
								</div>
								<div class="paddingBottom10">
									<input type="text" id="txtFirstName" class="textBoxClass"
									   onclick="document.getElementById('tr_LastName').style.display='block';"></input>
								</div>
							</td>
						</tr>
						<tr>
							<td width="100%" id="tr_LastName" style="display:none;">
								<div width="100%" class="paddingBottom5">
									LAST NAME
								</div>
								<div width="100%" class="paddingBottom10">
									<input type="text" id="txtLastName" class="textBoxClass"></input>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="paddingBottom5">
									EMAIL
								</div>
								<div class="paddingBottom10">
									<input type="text" id="txtEMail" class="textBoxClass"
										onclick="document.getElementById('tr_ConfirmMail').style.display='block';"></input>
								</div>
							</td>
						</tr>
						<tr>
							<td id="tr_ConfirmMail" style="display:none;">
								<div class="paddingBottom5">
									CONFIRM EMAIL
								</div>
								<div class="paddingBottom10">
									<input type="text" id="txtConfirmEMail" class="textBoxClass"></input>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="paddingBottom5">
									PASSWORD
								</div>
								<div style="padding-bottom:20px;">
									<input type="text" id="txtPassword" class="textBoxClass"
									    onclick="document.getElementById('tr_ConfirmPassword').style.display='block';"></input>
								</div>
							</td>
						</tr>
						<tr>
							<td id="tr_ConfirmPassword" style="display:none;">
								<div class="paddingBottom5">
									CONFIRM PASSWORD
								</div>
								<div style="padding-bottom:20px;">
									<input type="text" id="txtConfirmPassword" class="textBoxClass"></input>
								</div>
							</td>
						</tr>
						<tr>
							<td class="paddingBottom5">
								<div align="right">
									<div class="textCenter signUp boxShadow">
										<span>
											Sign up
										</span>
									</div>
								</div>
							</td>
						</tr>
					</table>
				</div>
				<img width="320px" src="{$TemplateURL}Web/Images/Ver_2_0/dropshadow_320.png" alt=""></img>
			</xsl:otherwise>
		</xsl:choose>
	</xsl:template>
</xsl:stylesheet>
