﻿<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:import href="WizardButtons.xslt"/>

	<xsl:template match ="/">
		<xsl:variable name="TemplatePathURL" select="normalize-space(LifeSpaces/TemplateURL)"/>
		<xsl:variable name="HostName" select="normalize-space(LifeSpaces/HostName)"></xsl:variable>

		<div id="divVisionLayout" style="width: 100%;">
			<div style="color: #376092; margin-top: 20px; margin-bottom: 30px;">
				<table class="tableMaster" cellpadding="0" cellspacing="0" border="0">
					<tr>
						<td align="top">
							<span class="superPageLSMessage">
								Organize your Superpage.
							</span>
							<span class="superPageLSMessageBold">
								Add your life’s vision.
							</span>
							<div class="templateMemoText" style="margin-top:5px;">
								Use the arrows to prioritize your lifespaces the way you like or hide to remove them from your Superpage.
								Add a vision statement to each lifespace to help keep you focused and motivated as you tackle your next challenge.
							</div>
						</td>
					</tr>
				</table>
			</div>
			<div>
				<table class="tableMaster" id="tab_vision_lifespaces">
					<xsl:for-each select="LifeSpaces/LifeSpace[TypeID = 2]">
						<xsl:variable name="ImageURL">
							<xsl:choose>
								<xsl:when test="TypeID = 2 and Item != 'LifeSpace LLC'">
									<xsl:value-of select="$TemplatePathURL"/>Web/Images/Ver_2_0/<xsl:value-of select="Item"/>.jpg
								</xsl:when>
								<xsl:when test="TypeID = 3">
									<xsl:value-of select="LifeSpaceImage"/>
								</xsl:when>
							</xsl:choose>
						</xsl:variable>
						<xsl:variable name="disabledImage">
							<xsl:choose>
								<xsl:when test="normalize-space(checked) = 1">
									<xsl:text></xsl:text>
								</xsl:when>
								<xsl:otherwise>
									<xsl:text>disabledImage</xsl:text>
								</xsl:otherwise>
							</xsl:choose>
						</xsl:variable>

						<xsl:variable name="LifeSpaceColor">
							<xsl:choose>
								<xsl:when test="FromColorStyle">
									<xsl:text>background-color: </xsl:text>
									<xsl:value-of select="FromColorStyle"></xsl:value-of>
									<xsl:text>;</xsl:text>
									<xsl:text>background: -webkit-gradient(linear, left top, left bottom, from(</xsl:text>
									<xsl:value-of select="FromColorStyle"/>
									<xsl:text>), to(</xsl:text>
									<xsl:value-of select="ColorStyle"></xsl:value-of>
									<xsl:text>));</xsl:text>
									<xsl:text>background: -moz-linear-gradient(top,  </xsl:text>
									<xsl:value-of select="FromColorStyle"/>
									<xsl:text>,  </xsl:text>
									<xsl:value-of select="ColorStyle"></xsl:value-of>
									<xsl:text>);</xsl:text>
									<xsl:text>-webkit-linear-gradient: (top left, </xsl:text>
									<xsl:value-of select="FromColorStyle"/>
									<xsl:text> 0%, </xsl:text>
									<xsl:value-of select="ColorStyle"></xsl:value-of>
									<xsl:text> 100%); </xsl:text>
									<xsl:text>background: -webkit-gradient(linear, left top, left bottom, color-stop(0, </xsl:text>
									<xsl:value-of select="FromColorStyle"/>
									<xsl:text>), color-stop(1, </xsl:text>
									<xsl:value-of select="ColorStyle"></xsl:value-of>
									<xsl:text>));</xsl:text>
									<xsl:text>background-image: -ms-linear-gradient(top left, </xsl:text>
									<xsl:value-of select="FromColorStyle"/>
									<xsl:text> 0%, </xsl:text>
									<xsl:value-of select="ColorStyle"></xsl:value-of>
									<xsl:text> 100%);</xsl:text>
									<xsl:text>background-image: -o-linear-gradient(top left, </xsl:text>
									<xsl:value-of select="FromColorStyle"/>
									<xsl:text> 0%, </xsl:text>
									<xsl:value-of select="ColorStyle"></xsl:value-of>
									<xsl:text> 100%);</xsl:text>
									<xsl:text>filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='</xsl:text>
									<xsl:value-of select="FromColorStyle"/>
									<xsl:text>', endColorstr='</xsl:text>
									<xsl:value-of select="ColorStyle"></xsl:value-of>
									<xsl:text>');</xsl:text>
									<xsl:text>-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='</xsl:text>
									<xsl:value-of select="FromColorStyle"/>
									<xsl:text>', endColorstr='</xsl:text>
									<xsl:value-of select="ColorStyle"></xsl:value-of>
									<xsl:text>')";</xsl:text>
								</xsl:when>
								<xsl:otherwise>
									<xsl:text>background-color: #5C6F7C;</xsl:text>
									<xsl:text>background: -webkit-gradient(linear, left top, left bottom, from(#5C6F7C), to(#425968));</xsl:text>
									<xsl:text>background: -moz-linear-gradient(top,  #5C6F7C,  #425968);</xsl:text>
									<xsl:text>-webkit-linear-gradient: (top left, #5C6F7C 0%, #425968 100%); </xsl:text>
									<xsl:text>background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5C6F7C), color-stop(1, #425968));</xsl:text>
									<xsl:text>background-image: -ms-linear-gradient(top left, #5C6F7C 0%, #425968 100%);</xsl:text>
									<xsl:text>background-image: -o-linear-gradient(top left, #5C6F7C 0%, #425968 100%);</xsl:text>
									<xsl:text>filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5C6F7C', endColorstr='#425968');</xsl:text>
									<xsl:text>-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5C6F7C', endColorstr='#425968')";</xsl:text>
								</xsl:otherwise>
							</xsl:choose>
						</xsl:variable>

						<tr id="row_LifeSpace_{position()}">
							<td width="5%" id="cell_Arrows_LifeSpace_{position()}" class="{$disabledImage}">
								<table class="tableMaster" cellpadding="0" cellspacing="0">
									<tr>
										<td id="chk_LifeSpace_{position()}" class="verticallyMiddle textCenter divArrowsTextGradient onMouseOver capitalFont" style="width:40px;height:30px;"
											lifeSpaceID="{ItemID}" status="{normalize-space(checked)}" onClick='updateCheckBoxLifeSpaceStatus("chk_LifeSpace_{position()}",
                                                    "cell_img_LifeSpace_{position()}", "cell_Arrows_LifeSpace_{position()}",
                                                    "cell_txt_LifeSpace_{position()}","{normalize-space(ItemID)}");'>
											<span id='span_chk_LifeSpace_{position()}'>
												<xsl:choose>
													<xsl:when test='normalize-space(checked) = 1'>
														Hide
													</xsl:when>
													<xsl:otherwise>
														Use
													</xsl:otherwise>
												</xsl:choose>
											</span>
										</td>
									</tr>
									<tr>
										<td id="td_{position()}_ArrowUp" position="{position()}" style="height:38px;" class="verticallyMiddle textCenter divNoteGradient onMouseOver"
											onmouseover="document.getElementById('img_LifeSpace_{position()}_ArrowUP').src='{$TemplatePathURL}Web/Images/Ver_2_0/arrow_moveUp_hover.png';"
											onmouseout="document.getElementById('img_LifeSpace_{position()}_ArrowUP').src='{$TemplatePathURL}Web/Images/Ver_2_0/arrow_moveUp.png';"
											onClick='vision_setLifeSpacesSortOrder_Ver2("img_LifeSpace_{position()}",-1, "row_LifeSpace_{position()}", "{normalize-space(ItemID)}");'>
											<xsl:if test="position() = 1">
												<img id="img_LifeSpace_{position()}_ArrowUP" src="{$TemplatePathURL}Web/Images/Ver_2_0/arrow_moveUp.png"
													 title="Arrow_Up" BORDER="0" style="display:none;"></img>
											</xsl:if>
											<xsl:if test="position() &gt; 1">
												<img id="img_LifeSpace_{position()}_ArrowUP" src="{$TemplatePathURL}Web/Images/Ver_2_0/arrow_moveUp.png" title="Arrow_Up" BORDER="0"></img>
											</xsl:if>
										</td>
									</tr>
									<tr>
										<td id="td_{position()}_ArrowDown" position="{position()}" style="height:38px;" class="verticallyMiddle textCenter divNoteGradient onMouseOver"
											onmouseover="document.getElementById('img_LifeSpace_{position()}_ArrowDown').src='{$TemplatePathURL}Web/Images/Ver_2_0/arrow_moveDown_hover.png';"
											onmouseout="document.getElementById('img_LifeSpace_{position()}_ArrowDown').src='{$TemplatePathURL}Web/Images/Ver_2_0/arrow_moveDown.png';"
											onClick='vision_setLifeSpacesSortOrder_Ver2("img_LifeSpace_{position()}",1, "row_LifeSpace_{position()}", "{normalize-space(ItemID)}");'>
											<xsl:if test="position() &lt; count(../LifeSpace[TypeID = 2])">
												<img id="img_LifeSpace_{position()}_ArrowDown" src="{$TemplatePathURL}Web/Images/Ver_2_0/arrow_moveDown.png" title="Arrow_Down" BORDER="0"></img>
											</xsl:if>
											<xsl:if test="position() = count(../LifeSpace[TypeID = 2])">
												<img id="img_LifeSpace_{position()}_ArrowDown" src="{$TemplatePathURL}Web/Images/Ver_2_0/arrow_moveDown.png"
													 title="Arrow_Down" BORDER="0" style="display:none;"></img>
											</xsl:if>
										</td>
									</tr>
								</table>
							</td>
							<td id="cell_img_LifeSpace_{position()}" style="padding-bottom:10px;padding-left:5px;" width="10%" class="paddingLeft5 verticallyMiddle textLeft {$disabledImage}">
								<div style="{$LifeSpaceColor} padding:7px;">
									<img alt="" class="verticallyMiddle" id="img_LifeSpaceIcon_{position()}" BORDER="0"
										 src="{$TemplatePathURL}Web/Images/Ver_2_0/icon_{Item}_SM.png"></img>
									<span class="VisionLSText verticallyMiddle" style="margin-left:5px;">
										<xsl:value-of select="Item"/>
									</span>
								</div>
								<xsl:choose>
									<xsl:when test="$ImageURL!=''">
										<img alt="" id="img_LifeSpace_{position()}" src="{$ImageURL}" upperSiblingID ="img_LifeSpace_{position()-1}"
                                             lowerSiblingID ="img_LifeSpace_{position()+1}" onload='setWidthAndHeightImage(this,"190");'
                                             sortorder="{SortOrder}" BORDER="0" style="display:none;"></img>
									</xsl:when>
									<xsl:otherwise>
										<img alt="" id="img_LifeSpace_{position()}" src="{$TemplatePathURL}Web/Images/LifeSpace LLC.jpg" upperSiblingID ="img_LifeSpace_{position()-1}"
                                             lowerSiblingID ="img_LifeSpace_{position()+1}" onload='setWidthAndHeightImage(this,"80");'
                                             sortorder="{SortOrder}" BORDER="0" style="display:none;"></img>
									</xsl:otherwise>
								</xsl:choose>
							</td>
							<td id="cell_txt_LifeSpace_{position()}" style="padding-left:5px;" class="{$disabledImage}">
								<xsl:call-template name="VisionUpdate">
									<xsl:with-param name="position" select="position()"></xsl:with-param>
									<xsl:with-param name="ItemID" select="ItemID"></xsl:with-param>
									<xsl:with-param name="TypeID" select="TypeID"></xsl:with-param>
									<xsl:with-param name="Item" select="Item"></xsl:with-param>
									<xsl:with-param name="Statement" select="Statement"></xsl:with-param>
									<xsl:with-param name="Description" select="Description"></xsl:with-param>
								</xsl:call-template>
							</td>
						</tr>
					</xsl:for-each>
				</table>
			</div>
			<table class="tableMaster" cellpadding="0" cellspacing="0">
				<tr>
					<td width="85%" align="left">
						<div class="verticallyMiddle onMouseOver divBrowseGradient spanBrowseGradientTextGray textCenter"
                            style="width:130px;height:30px;display:table-cell;"
                            onmouseover="document.getElementById('img_SuperPage').src='{$TemplatePathURL}Web/Images/Ver_2_0/BT_arrow_hover.png';"
                            onmouseout="document.getElementById('img_SuperPage').src='{$TemplatePathURL}Web/Images/Ver_2_0/BT_arrow.png';">
							<a href="http://{$HostName}/Home.aspx" class="decorationNone">
								<img id="img_SuperPage" 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">Go To SuperPage</span>
							</a>
						</div>
					</td>
					<td width="15%" align="right">
						<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}/Plan.aspx" class="decorationNone">
								<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>
					</td>
				</tr>
			</table>
		</div>
	</xsl:template>

	<xsl:template name="VisionUpdate">
		<xsl:param name="position" select="'N/A'"></xsl:param>
		<xsl:param name="ItemID" select="'N/A'"></xsl:param>
		<xsl:param name="TypeID" select="'N/A'"></xsl:param>
		<xsl:param name="Item" select="'N/A'"></xsl:param>
		<xsl:param name="Statement" select="'N/A'"></xsl:param>
		<xsl:param name="Description" select="'N/A'"></xsl:param>

		<div id="div_{$position}_LifespaceVision">
			<div id="div_{$position}_UpdateStatement_{$ItemID}" style="margin-bottom:3px;">
				<xsl:choose>
					<xsl:when test="$Statement = '' or $Statement = 'N/A'">
						<input style="height:30px;" title="Vision Statement" id="txt_LifeSpace_{$position}" type="text" maxlength="100" class="TextBoxBorder textAreaNotes"
                               onBlur="Vision_updateLifespaceStatement('txt_LifeSpace_{$position}', '{normalize-space($ItemID)}', 'VISION');
                                        SetTextAreaValue('txt_LifeSpace_{$position}', 'Enter Vision Statement', 'blur');
                                        this.value=='' || this.value=='Enter Vision Statement' ? replaceCSSClass(this,'textAreaNormalNotes','textAreaNotes') : 0;"
                               value ='Enter Vision Statement'
                               onClick="SetTextAreaValue('txt_LifeSpace_{$position}', 'Enter Vision Statement', 'focus');
                                        replaceCSSClass(this,'textAreaNotes','textAreaNormalNotes');"
                               onKeyPress="SetTextAreaValue('txt_LifeSpace_{$position}', 'Enter Vision Statement', 'focus');
                                           replaceCSSClass(this,'textAreaNotes','textAreaNormalNotes');"/>
					</xsl:when>
					<xsl:otherwise>
						<input style="height:30px;" title="Vision Statement" id="txt_LifeSpace_{$position}" type="text" maxlength="100" class="TextBoxBorder textAreaNormalNotes"
                               onBlur="Vision_updateLifespaceStatement('txt_LifeSpace_{$position}', '{normalize-space($ItemID)}', 'VISION');
                                        SetTextAreaValue('txt_LifeSpace_{$position}', 'Enter Vision Statement', 'blur');"
                               value ='{$Statement}'
                               onClick="SetTextAreaValue('txt_LifeSpace_{$position}', 'Enter Vision Statement', 'focus');"
                               onKeyPress="SetTextAreaValue('txt_LifeSpace_{$position}', 'Enter Vision Statement', 'focus');"/>
					</xsl:otherwise>
				</xsl:choose>

			</div>
			<div id="div_{$position}_UpdateDescription_{$ItemID}" style="display:block;">
				<xsl:choose>
					<xsl:when test="$Description = '' or $Description = 'N/A' or not($Description)">
						<textarea title="Vision Description" id="txt_LifeSpaceDescription_{$position}" rows="4" class="TextBoxBorder textAreaNotes"
                                  style="overflow:hidden;"
                                  onClick="SetTextAreaValue('txt_LifeSpaceDescription_{$position}', 'Add a Detailed Description', 'focus');
                                            replaceCSSClass(this,'textAreaNotes','textAreaNormalNotes');"
                                  onKeyPress="SetTextAreaValue('txt_LifeSpaceDescription_{$position}', 'Add a Detailed Description', 'focus');"
                                  onKeyUp='control_TextAreaAutoGrow("txt_LifeSpaceDescription_{$position}");'
                                  onBlur="Vision_updateLifespaceDescription('txt_LifeSpaceDescription_{$position}', '{normalize-space($ItemID)}');
                                        SetTextAreaValue('txt_LifeSpaceDescription_{$position}', 'Add a Detailed Description', 'blur');
                                        this.value=='' || this.value=='Add a Detailed Description' ? replaceCSSClass(this,'textAreaNormalNotes','textAreaNotes') : 0;">
							<xsl:text>Add a Detailed Description</xsl:text>
						</textarea>
					</xsl:when>
					<xsl:otherwise>
						<textarea title="Vision Description" id="txt_LifeSpaceDescription_{$position}" rows="4" class="TextBoxBorder textAreaNotes2"
                               style="overflow:hidden;"
                               onClick="SetTextAreaValue('txt_LifeSpaceDescription_{$position}', 'Add a Detailed Description', 'focus');"
                               onKeyPress="SetTextAreaValue('txt_LifeSpaceDescription_{$position}', 'Add a Detailed Description', 'focus');"
                               onKeyUp='control_TextAreaAutoGrow("txt_LifeSpaceDescription_{$position}");'
                               onBlur="Vision_updateLifespaceDescription('txt_LifeSpaceDescription_{$position}', '{normalize-space($ItemID)}');
                                SetTextAreaValue('txt_LifeSpaceDescription_{$position}', 'Add a Detailed Description', 'blur');">
							<xsl:value-of select="$Description"/>
						</textarea>
					</xsl:otherwise>
				</xsl:choose>

			</div>
		</div>
	</xsl:template>
</xsl:stylesheet>
