<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">

<html>
<head>
<title>Windsurf-spots</title>
</head>
<body bgcolor="#FFFF9C">
<div align="center"><font face="Verdana" size="4" color="blue"><b>
Bay-Area Windsurfspots</b></font></div>
<p align="center">
<table width="90%" height="200" border="0" cellpadding="3" cellspacing="3" style="font-size:8pt; text-align:center; 
       font-family:verdana, arial;">
  <tr style="background-color:blue; color=white">
    <th align="left">Spot</th>
    <th>Location</th>
    <th>Season</th>
    <th>Ability</th>
    <th>Water</th>
    <th>Average<br/>Sail</th>
    <th>Wind<br/>Direction</th>
    <th>Familiness</th>
    <th>Parking</th>
  </tr>

<xsl:for-each select="windsurfspots/spot">
 <!-- <xsl:sort select="@category"/> -->
 <!--   <xsl:sort select="name"/> -->
 <!--     <xsl:if test="@category='Southbay' or @category='Northbay'"> -->
        <tr style="background-color:#FFCE33">
        <td align="left"><b><xsl:value-of select="name"/></b></td>
        <td><xsl:value-of select="@category"/></td>
        <td><xsl:value-of select="season"/></td>
        <td><xsl:value-of select="ability_level"/></td>
        <xsl:apply-templates select="conditions"/>
        <xsl:apply-templates select="area"/>
      </tr>
  <!--   </xsl:if>  -->

</xsl:for-each>

</table>
</p>
<hr size="0" width="90%" align="center" color="blue"/>

<xsl:apply-templates select="windsurfspots/spot"/>
 
</body>
</html>

</xsl:template>

<xsl:template match="conditions">
    <td><xsl:value-of select="water"/></td>
    <xsl:apply-templates select="wind"/>
</xsl:template>

<xsl:template match="wind">
    <td><xsl:value-of select="average_sail"/></td>
    <td><xsl:value-of select="typical_direction"/></td>
</xsl:template>

<xsl:template match="area">
    <td><xsl:value-of select="familiness"/></td>
    <td><xsl:value-of select="parking"/></td>
</xsl:template>


<xsl:template match="spot">
 <p>
  <table width="90%" cellspacing="0" cellpadding="0" style="font-size:8pt; font-family:Verdana, Arial;">
    <tr>
      <td width="40"></td>
      <td style="font-size:14pt;color:blue;font-weight:bold"><xsl:value-of select="name"/></td>
    </tr>
    <tr>
      <td></td>
      <td><xsl:apply-templates select="picture"/></td>
      <td width="10"></td>
      <td><font size="2"><b>Overview:</b></font>
        <table width="90%" cellpadding="4">
          <tr>
            <td style="background-color:#C6EFF7;font-size=10pt;font-family:Verdana,Arial"><xsl:value-of select="overview"/></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td height="6"></td>
    </tr>    
    <tr>
      <td></td>
      <td colspan="3"><xsl:apply-templates select="./area/directions"/></td>
    </tr>
  </table>
 </p>
 <hr size="0" width="90%" align="center" color="blue"/>
 
</xsl:template>

<xsl:template match="picture">
  <img>
    <xsl:attribute name="src">
      <xsl:value-of select="./@source"/>
    </xsl:attribute>
   
    <xsl:attribute name="width">
      <xsl:value-of select="./@x"/>
    </xsl:attribute>
   
    <xsl:attribute name="height">
      <xsl:value-of select="./@y"/>
    </xsl:attribute>
  </img> 
</xsl:template>

<xsl:template match="directions">
  <font size="2" face="Verdana, Arial"><b>Directions:</b></font>
  <table cellspacing="1" style="font-size:8pt; font-famility:Verdana,Arial">
    <xsl:for-each select="direction">
      <tr bgcolor="#FFFF9C">
        <td><xsl:value-of select="."/>
  <!--    <xsl:choose>
          <xsl:when test="position()=last()"></xsl:when>
          <xsl:otherwise><div align="left"><hr size="0" width="90%" color="#FFCE33"/></div></xsl:otherwise>
      </xsl:choose>  -->
        </td>
      </tr>
    </xsl:for-each>
  </table>
</xsl:template>

</xsl:stylesheet>
