<?xml version = "1.0"?>
<!-- XSL Style sheet -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match = "/">
	<html>
		<xsl:apply-templates/>
	</html>
</xsl:template>
<xsl:template match="myhobby">
	<head>
		<title>My Hobby is <xsl:value-of select="@activity"/></title>
	<SCRIPT LANGUAGE = "JavaScript">
	<!-- 
		   {
			image1 = new Image();
			image1.src = "buttons/bluerndliteon.gif";
		   }
	//-->
	</SCRIPT>
	<style type="text/css">
		li {color: red; font-weight: bold}
		em {font-size: 14pt; color:#00c; font-weight:bold}
		h1 {font-family: helvetica,arial,sans-serif;font-size: 26pt; color:green; 				font-weight:bold;text-align: center}
		h2 {font-family: helvetica,arial,sans-serif;font-size: 16pt; color:green; 					font-weight:bold;text-align: center}
		h3 {font-family: helvetica,arial,sans-serif;font-size: 14pt; color:green; 					font-weight:bold;text-align: left}
		th {font-family: helvetica,arial,sans-serif;font-size: 14pt;text-align: center; 				font-weight}
		td {font-size: 14pt;text-align: center}
		p  {font-size: 14pt; text-align: left}
		strong {font-size: 14pt; text-align: left;font-weight:bold}
	</style>
	</head>
	<body bgcolor="white" background="images/image001.jpg">	
	  <h1>My Hobby is <xsl:value-of select ="@activity"/></h1>
	  <p>I go <xsl:value-of select ="@activity"/> at <xsl:value-of select="takesplace/@location"/> with my friend <em><xsl:value-of select="friend/@name"/></em>.
	  <xsl:value-of select="friend/@name"/>'s address is <xsl:value-of select="friend/@number"/>, <xsl:value-of select="friend/road"/>, <xsl:value-of select="friend/address"/>,   <xsl:value-of select="friend/town"/>,  <xsl:value-of select="friend/postcode"/>. He can be contacted by phone on <xsl:value-of select="friend/telephone"/>, <xsl:element name="a"><xsl:attribute name="href">mailto:<xsl:value-of select="friend/email"/></xsl:attribute>Email <xsl:value-of select="friend/email"/></xsl:element>. </p>
	  <table border ="0" align = "center">
	    <thead>            	
		<tr><th>The address for <xsl:value-of select="takesplace/@location"/> follows.</th></tr>
	    </thead>
	    <tbody>
		<tr><td><em><xsl:value-of select="takesplace/@location"/></em></td></tr>
		<tr><td><xsl:value-of select="takesplace/road"/></td></tr>
		<tr><td><xsl:value-of select="takesplace/address"/></td></tr>
		<tr><td><xsl:value-of select="takesplace/town"/></td></tr>
		<tr><td><xsl:value-of select="takesplace/county"/></td></tr>
		<tr><td><xsl:value-of select="takesplace/postcode"/></td></tr>
		<tr><td><xsl:value-of select="takesplace/email"/></td></tr>
		<tr><td><xsl:element name="a"><xsl:attribute name="href"><xsl:value-of select="takesplace/website"/></xsl:attribute><xsl:value-of select="takesplace/website"/> </xsl:element></td></tr>
	    </tbody>
	  </table>
<p><h2>The days which we go <xsl:value-of select="@activity"/></h2></p>
<table border ="1" align = "center" bgcolor="#EBFFED">
    <thead>
	<tr>
		<th>Day</th><th>Time</th><th>Duration</th>
	</tr>
    </thead>	
    <xsl:for-each select="practiseon/session">
	<tr>
		<td><xsl:value-of select="@day"/></td>
		<td><xsl:value-of select="time"/></td>
		<td><xsl:value-of select="duration"/> <xsl:value-of select="duration/@unit"/></td>
	</tr>
    </xsl:for-each>	  
</table>
        </body>		
<h3>Extras</h3>
<table boarder = "0">
	<tr><td><em>Java Script Blue Light</em></td>
    <td align="left"><a href="http://www.co.umist.ac.uk/~mt/ct337course/" onmouseover="image1.src='buttons/java/bluerndliteon.gif';"
onmouseout="image1.src='buttons/java/bluerndlite.gif';">
<img name="image1" src="buttons/java/bluerndlite.gif" border="0"/></a></td></tr>
</table>
<script type = "text/javascript" language = "JavaScript">
   <![CDATA[
   var xmlDocument = new ActiveXObject( "Microsoft.XMLDOM" );
   xmlDocument.load( "swimming_transform.xml" );
   // get the root element
   var element = xmlDocument.documentElement;
   document.writeln( 
      "<p>Root node of the document: " );
   document.writeln( "<strong>" + element.nodeName 
      + "</strong>" );
   document.writeln( 
      "<br/>The following are its child elements:" );
   document.writeln( "</p><ul>" );
   // traverse all child nodes of root element
   for ( i = 0; i <element.childNodes.length; i++ ) {
      var curNode = element.childNodes.item( i );
      // print node name of each child element
      document.writeln( "<li><strong>" + curNode.nodeName
         + "</strong></li>" );  
   }
   document.writeln( "</ul>" );
	document.write("<p>The number of nodes including the parent "+(element.childNodes.length+1)+"</p><br\/>")
   ]]>
</script>
</xsl:template>
</xsl:stylesheet>