<?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:variable name="StoreInfo" select="document('StoreInfo.xml')/Horticulture_Heaven"/>
<xsl:variable name="bgcolor"><xsl:value-of select="$StoreInfo/pages[@color = $Color]/color"/></xsl:variable>
<xsl:variable name="image"><xsl:value-of select="$StoreInfo/pages[@color = $Color]/image"/></xsl:variable>
<xsl:param name="Color" />
<xsl:template match="FlowerStock">
<html>
<head>
<title>Horticulture Heaven | <xsl:value-of select="$StoreInfo/pages[@color = $Color]/title"/></title>
<link href="d3.css" rel="stylesheet" type="text/css"/>
<script language="javascript">
var state = 0;
var multiplier = 99;
function goPrice(){
var inPrice = parseFloat(document.getElementById("ourPrice").value);
var fullPrice = document.getElementById("fullPrice");
if (multiplier == 99) {
fullPrice.value = "Choose state";
} else {
var numberTest = isNaN(inPrice);
if (numberTest) {
fullPrice.value = "Enter price"
} else {
if (multiplier == 1) {
fullPrice.value = inPrice.toFixed(2);
} else {
var result = inPrice + multiplier * inPrice;
fullPrice.value = result.toFixed(2);
}
}
}
}
function cleanBoxes() {
var box1 = document.getElementById("ourPrice");
var box2 = document.getElementById("fullPrice");
box1.value = "";
box2.value = "";
state = 0;
multiplier = 99;
}
function cleanBorders() {
var ca = document.getElementById("CA");
ca.border="0";
var id = document.getElementById("ID");
id.border="0";
var mt = document.getElementById("MT");
mt.border="0";
var or = document.getElementById("OR");
or.border="0";
var wa = document.getElementById("WA");
wa.border="0";
}
function setState(n) {
cleanBorders();
switch(n) {
// California: 7.25
case 1:
multiplier = .0725;
var ca = document.getElementById("CA");
ca.border="2";
break;
// Idaho: 5
case 2:
multiplier = .05;
var id = document.getElementById("ID");
id.border="2";
break;
// Montana: none
case 3:
multiplier = 1;
var mt = document.getElementById("MT");
mt.border="2";
break;
// Oregon: none
case 4:
multiplier = 1;
var or = document.getElementById("OR");
or.border = "2";
break;
// Washington: 6.5
case 5:
multiplier = .065;
var wa = document.getElementById("WA");
wa.border = "2";
break;
}
}
</script>
</head>
<body style="background-color:{$bgcolor};" onload="cleanBoxes(); cleanBorders()">
<div align="center">
<table class="main" cellpadding="5" cellspacing="0" width="750px">
<tr>
<td colspan="2" align="center">
<img src="header.gif" alt="Header Image"/>
</td>
</tr>
<tr>
<td valign="top" width="10%">
<table class="navigation">
<tr>
<td valign="top" align="center">
<table cellpadding="0" cellspacing="0" style="width: 115px;">
<tr>
<td class="nav_title">Navigation</td>
</tr>
<tr>
<td class="nav_mid"><a href="index.html" title="Home">Home</a></td>
</tr>
<tr>
<td class="nav_mid"><a href="red.html" title="Red">Red Flowers</a></td>
</tr>
<tr>
<td class="nav_mid"><a href="pink.html" title="Pink">Pink Flowers</a></td>
</tr>
<tr>
<td class="nav_mid"><a href="yellow.html" title="Yellow">Yellow Flowers</a></td>
</tr>
<tr>
<td class="nav_mid"><a href="white.html" title="White">White Flowers</a></td>
</tr>
<tr>
<td class="nav_mid"><a href="blue.html" title="Blue">Blue Flowers</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="center">
<table cellpadding="0" cellspacing="0" style="width: 115px;">
<tr>
<td class="nav_title">Address</td>
</tr>
<tr>
<td class="nav_mid" style="font-size:10px;">
<xsl:value-of select="$StoreInfo/locations/address"/>,
<xsl:value-of select="$StoreInfo/locations/city"/>, <xsl:value-of select="$StoreInfo/locations/state"/><xsl:text> </xsl:text>
<xsl:value-of select="$StoreInfo/locations/zip"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="center">
<table cellpadding="0" cellspacing="0" style="width: 115px;">
<tr>
<td class="nav_title">Contact Info</td>
</tr>
<tr>
<td class="nav_mid" style="font-size:10px;">
Ph: <xsl:value-of select="$StoreInfo/locations/contact/phone"/>
<br/>
Fax: <xsl:value-of select="$StoreInfo/locations/contact/fax"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" style="width: 115px;">
<tr>
<td class="nav_title">Hours</td>
</tr>
<tr>
<td class="nav_mid" style="font-size:10px; text-align: left; padding: 3px;">
<xsl:for-each select="$StoreInfo/locations/hours">
<font style="font-weight: bold;">
<xsl:value-of select="@day"/>
</font>
<br/>
<span style="position: relative; left: 8px;">
<xsl:value-of select="./start"/><xsl:text> </xsl:text>-<xsl:text> </xsl:text><xsl:value-of select="./end"/>
</span>
<br/>
</xsl:for-each>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top" align="center" width="90%">
<table class="flowers" style="border-bottom: 1px solid #000000;" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="border-right: 1px solid #000000;">
<img src="{$image}" alt="Image of Flower"/>
</td>
<td style="padding: 5px;">
<p>
<xsl:value-of select="$StoreInfo/pages[@color = $Color]/description"/>
</p>
</td>
</tr>
</table>
<br/>
<table class="flowers" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="flower_title" style="border-right:1px solid #000000;">Name</td>
<td class="flower_title" style="border-right:1px solid #000000;">ID #</td>
<td class="flower_title" style="border-right:1px solid #000000;">Vendor</td>
<td class="flower_title">Description</td>
</tr>
<xsl:for-each select="flower[@color = $Color]">
<xsl:sort select="@type"/>
<xsl:if test="not(preceding-sibling::flower[@color = $Color]/@type = @type)">
<tr>
<td class="flower_header" colspan="4"><xsl:value-of select="@type"/></td>
</tr>
</xsl:if>
<tr>
<td class="flower_info" style="border-right:1px solid #000000;">
<xsl:value-of select="name"/>
</td>
<td class="flower_info" style="border-right:1px solid #000000;">
<xsl:value-of select="id"/>
</td>
<td class="flower_info" style="border-right:1px solid #000000;">
<xsl:value-of select="vendor"/>
</td>
<td class="flower_info">
<xsl:value-of select="description"/>
</td>
</tr>
</xsl:for-each>
</table>
<br />
<div align="center">
<form id="myForm" style="border-style:solid; width:400px">
Horticulture Heaven Price Calculator
<br /><em>Select a state and enter price:</em>
<br />
<img id="CA" src="thumbCalifornia.gif" alt="" border="0" title="California" onclick="setState(1)" />
<img id="ID" src="thumbIdaho.gif" alt="" border="0" title="Idaho" onclick="setState(2)" />
<img id="MT" src="thumbMontana.gif" alt="" border="0" title="Montana" onclick="setState(3)" />
<img id="OR" src="thumbOregon.gif" alt="" border="0" title="Oregon" onclick="setState(4)" />
<img id="WA" src="thumbWashington.gif" alt="" border="0" title="Washington" onclick="setState(5)" />
<br />Our low price: $
<input type="text" id="ourPrice" size="10" />
<input type="button" value="Go!" onclick="goPrice()" />
<input type="button" value="Reset" onclick="cleanBoxes();cleanBorders()" />
<br />Your full price: $
<input type="text" id="fullPrice" size="10" />
</form>
</div>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<table class="footer" cellpadding="0" cellspacing="0">
<tr>
<td>
<xsl:for-each select="$StoreInfo/footer/text">
<xsl:value-of select="."/>
<br/>
</xsl:for-each>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>