<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
	<xsl:template match="/">
		<html>
			<head>
				<title>Lab puppy 2</title>
				<script language="javascript">
				
				function alertName(name) {
					alert(name);
				}
			
				</script>
			</head>
			<body>
				<h4>Lab Puppy #2 - Part 1</h4>
			      I have three pen pals:<br/>
				<xsl:for-each select="PenPals/Person/FirstName">
					<xsl:value-of select="position()"/>. &#160; 
					<xsl:value-of select="."/>
					<br/>
				</xsl:for-each>
				<br/>
				<br/>
				<br/>

				<h4>Lab Puppy #2 - Part 2</h4>
				<table border="0" cellpadding="0" cellspacing="10" width="400">
					<tr>
						<xsl:for-each select="PenPals/Person/FirstName">
							<td>
								<xsl:attribute name="onmouseover">alertName('<xsl:value-of select="."/>');</xsl:attribute>
								<xsl:value-of select="."/>
							</td>
						</xsl:for-each>
					</tr>
				</table>
				<br/>

				<h4>Lab Puppy #2 - Part 3 (Not working properly)</h4>
				<table border="0" cellpadding="0" cellspacing="10" width="600">
					<tr>
						<td align="center" onmouseover="person1.style.visibility='visible'" onmouseout="person1.style.visibility='hidden'">
							<xsl:value-of select="PenPals/Person[1]/FirstName"/>
						</td>
						<td align="center" onmouseover="person2.style.visibility='visible'" onmouseout="person2.style.visibility='hidden'">
							<xsl:value-of select="PenPals/Person[2]/FirstName"/>
						</td>
						<td align="center" onmouseover="person3.style.visibility='visible'" onmouseout="person3.style.visibility='hidden'">
							<xsl:value-of select="PenPals/Person[3]/FirstName"/>
						</td>
					</tr>
					<tr>
						<td align="center">
							<div id="person1" style="visibility:hidden">
								"<xsl:value-of select="PenPals/Person[1]/FirstName"/> likes <xsl:value-of select="PenPals/Person[1]/SnackFood[1]"/>"<br/>
								<img src="popcorn.jpg" alt="popcorn.jpg"/>
							</div>
						</td>
						<td align="center">
							<div id="person2" style="visibility:hidden">
								"<xsl:value-of select="PenPals/Person[2]/FirstName"/> likes <xsl:value-of select="PenPals/Person[2]/SnackFood[2]"/>"<br/>
								<img src="carrots.jpg" alt="carrot.jpg"/>
							</div>
						</td>
						<td align="center">
							<div id="person3" style="visibility:hidden">
								"<xsl:value-of select="PenPals/Person[3]/FirstName"/> likes <xsl:value-of select="PenPals/Person[3]/SnackFood[1]"/>"<br/>
								<img src="celery.jpg" alt="celery.jpg"/>
							</div>
						</td>
					</tr>
				</table>
			</body>
		</html>
	</xsl:template>
</xsl:stylesheet>

