<?xml version='1.0' encoding='UTF-8'?>

<!-- XSLT stylesheet for the weather condtions XML feed from the National Weather Service -->
 <!-- http://www.nws.noaa.gov/data/current_obs/ -->
<!-- Copyright © 2005 LCSS -->

<xsl:stylesheet
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	version="1.0"
>

<!-- Style current_observation node -->
<xsl:template match='/current_observation'>
	<style type="text/css">
		#block { font-family: verdana, sans-serif; margin:0px auto; width:600px; text-align:left; }
		p { font-size: 80%; padding-top: 0px; margin-top: 0px; }
		h1 { font-size: 100%; padding-bottom: 0px; margin-bottom: 0px; }
		h2 { color: #800000; font-size: 60%; margin-bottom: 0px; } 
		tr { font-size: 80%; padding-top: 0px; margin-top: 0px; }
	</style>
	<div id="block">
	<hr />

    <!-- Style location element -->
   	<xsl:apply-templates select='location' />
        
	<table cellspacing="1" cellpadding="2" border="0">
	<tr>
        <td rowspan="5" valign="top" width="36"><xsl:apply-templates select='weather' /></td>
		<td align="right">Weather:</td><td><b><xsl:value-of select='weather'/></b></td>
	</tr>
	<tr>
		<td align="right">Temperature:</td><td><b><xsl:value-of select='temperature_string'/></b></td>
	</tr>
	<tr>
		<td align="right">Relative Humidity:</td><td><b><xsl:value-of select='relative_humidity'/>%</b></td>
	</tr>
	<tr>
		<td align="right">Winds:</td><td><b><xsl:value-of select='wind_string'/></b></td>
	</tr>
	<tr>
		<td align="right">Two Day History:</td><td><b><a href='{two_day_history_url}'>Weather Observations</a></b></td>
	</tr>
	</table>

	<h2><xsl:value-of select='observation_time'/></h2>

    <!-- Style credit element -->
   	<xsl:apply-templates select='credit' />

    </div>
</xsl:template>

<xsl:template match='location'>
    <!-- Style location element as a separate table -->
	<table border="0" cellpadding="4" width="100%">
	<tr>
    <td align="left" bgcolor="#CEE7F7" width="100%">
	<h1>Current Weather for <xsl:value-of select='/current_observation/location'/></h1>
	</td>
	</tr>
	</table>
</xsl:template>

<xsl:template match='weather'>
    <!-- Determine which weather icon to display based on value of weather element -->
    <xsl:if test="contains(/current_observation/weather, &quot;A Few Clouds&quot;)">
        <img border="0" src="images/partly_cloudy.gif" width="36" height="36" />
    </xsl:if>
    <xsl:if test="contains(/current_observation/weather, &quot;Drizzle&quot;)">
        <img border="0" src="images/drizzle.gif" width="36" height="36" />
    </xsl:if>
    <xsl:if test="contains(/current_observation/weather, &quot;Fair&quot;)">
        <img border="0" src="images/mostly_sunny.gif" width="36" height="36" />
    </xsl:if>
    <xsl:if test="contains(/current_observation/weather, &quot;Light Snow&quot;)">
        <img border="0" src="images/snow_showers.gif" width="36" height="36" />
    </xsl:if>
    <xsl:if test="/current_observation/weather = &quot;Mostly Cloudy&quot;">
        <img border="0" src="images/mostly_cloudy.gif" width="36" height="36" />
    </xsl:if>
    <xsl:if test="contains(/current_observation/weather, &quot;Overcast&quot;)">
        <img border="0" src="images/cloudy.gif" width="36" height="36" />
    </xsl:if>
    <xsl:if test="contains(/current_observation/weather, &quot;Partly Cloudy&quot;)">
        <img border="0" src="images/partly_cloudy.gif" width="36" height="36" />
    </xsl:if>
    <xsl:if test="contains(/current_observation/weather, &quot;Rain&quot;)">
		<xsl:choose>
			<xsl:when test="contains(/current_observation/weather, &quot;Light Rain&quot;)">
				<img border="0" src="images/drizzle.gif" width="36" height="36" />
			</xsl:when>
			<xsl:otherwise>
				<img border="0" src="images/rain.gif" width="36" height="36" />
			</xsl:otherwise>
		</xsl:choose>
    </xsl:if>
    <xsl:if test="contains(/current_observation/weather, &quot;Fog&quot;)">
        <img border="0" src="images/fog.gif" width="36" height="36" />
    </xsl:if>
    <xsl:if test="/current_observation/weather = &quot;Sunny&quot;">
        <img border="0" src="images/sunny.gif" width="36" height="36" />
    </xsl:if>
</xsl:template>

<xsl:template match='credit'>
    <!-- Style credit info and URL in gray font -->
    <font color='gray' size="2">
	<p><xsl:value-of select='/current_observation/credit'/><br />
	<a href='{/current_observation/credit_URL}'><xsl:value-of select='/current_observation/credit_URL'/></a>
	</p>
	</font>
</xsl:template>

</xsl:stylesheet>