<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/xhtml1/strict">
	<xsl:template name="helperScriptOnLoad">
		<xsl:param name="code"/>
		<img src="{$project-url}/template-files/loaded.gif" style="display: none;">
			<xsl:attribute name="onload">
				window.eAu_Course.onload(function () { <xsl:copy-of select="$code"/> });
			</xsl:attribute>
			<xsl:attribute name="onerror">
				window.eAu_Course.onload(function () { <xsl:copy-of select="$code"/> });
			</xsl:attribute>
		</img>
	</xsl:template>
	
	<xsl:template name="UISpinButton">
		<xsl:param name="attr"/>
		<xsl:param name="minValue"/>
		<xsl:param name="maxValue"/>
		<xsl:param name="customValueValidator"/>
		<xsl:param name="units"/>
		<table
				id="EU-{$attr/@id}"
				EAUInputType="spin-button"
				cellpadding="0"
				cellspacing="0">
			<xsl:attribute name="style">
				table-layout: fixed;
				border-collapse: collapse;
				height: 24px;
				border: none;
				<xsl:choose>
					<xsl:when test="$units and normalize-space($units) != ''">
						width: 83px;
					</xsl:when>
					<xsl:otherwise>
						width: 63px;
					</xsl:otherwise>
				</xsl:choose>
			</xsl:attribute>
			<tr>
				<td
						rowspan="2"
						style="width: 50px;">
					<div>
						<input
								id="EU-{$attr/@id}-spin"
								type="text"
								style="
									background: #f5f5f5;
									width: 50px;
									margin: 0px;
									text-align: center;
									font-size: 14px;
									font-family: monospace;
									border: 1px solid #bbb;
									display: block;">
								<xsl:if test="$minValue and normalize-space($minValue) != ''">
									<xsl:attribute name="minValue"><xsl:value-of select="$minValue"/></xsl:attribute>
								</xsl:if>
								<xsl:if test="$maxValue and normalize-space($maxValue) != ''">
									<xsl:attribute name="maxValue"><xsl:value-of select="$maxValue"/></xsl:attribute>
								</xsl:if>
								<xsl:if test="$customValueValidator and normalize-space($customValueValidator) != ''">
									<xsl:attribute name="customValueValidator"><xsl:copy-of select="$customValueValidator"/></xsl:attribute>
								</xsl:if>
								<xsl:attribute name="onkeydown">
									if (window.event.keyCode == 38) {
										increaseCountedValue.call(this, '<xsl:value-of select="$attr/@id"/>');
									} else if (window.event.keyCode == 40) {
										decreaseCountedValue.call(this, '<xsl:value-of select="$attr/@id"/>');
									}
									if (window.event.keyCode == 40 || window.event.keyCode == 38) {
										SetModified();
										return false;
									}
								</xsl:attribute>
								<xsl:attribute name="onchange">
									validateCountedValue.call(this, '<xsl:value-of select="$attr/@id"/>');
									SetModified();
								</xsl:attribute>
								<xsl:attribute name="onmousewheel">
									if (window.event.wheelDelta &gt; 0) {
										increaseCountedValue.call(this, '<xsl:value-of select="$attr/@id"/>');
									} else if (window.event.wheelDelta &lt; 0) {
										decreaseCountedValue.call(this, '<xsl:value-of select="$attr/@id"/>');
									}
									SetModified();
									return false;
								</xsl:attribute>
							</input>
					</div>
				</td>
				<td
						style="width: 13px; height: 12px; text-align: right; padding-top: 1px;">
					<div
							style="width: 11px; height: 11px; overflow: hidden; background: white url('{$project-url}/template-files/arrow-top-gray.gif') top left no-repeat; cursor: pointer;"
							onmouseenter="this.style.backgroundImage = 'url(\'{$project-url}/template-files/arrow-top-black.gif\')';"
							onmouseleave="this.style.backgroundImage = 'url(\'{$project-url}/template-files/arrow-top-gray.gif\')';">
						<xsl:attribute name="onmouseup">
							increaseCountedValue.call(this, '<xsl:value-of select="$attr/@id"/>');
							SetModified();
						</xsl:attribute>
					</div>
				</td>
				<xsl:if test="$units and normalize-space($units) != ''">
					<td rowspan="2" align="right">
						<xsl:copy-of select="$units"/>
					</td>
				</xsl:if>
			</tr>
			<tr>
				<td
						style="height: 12px; text-align: right;">
					<div
							style="width: 11px; height: 11px; overflow: hidden; background: white url('{$project-url}/template-files/arrow-bottom-gray.gif') top left no-repeat; cursor: pointer;"
							onmouseenter="this.style.backgroundImage = 'url(\'{$project-url}/template-files/arrow-bottom-black.gif\')';"
							onmouseleave="this.style.backgroundImage = 'url(\'{$project-url}/template-files/arrow-bottom-gray.gif\')';">
						<xsl:attribute name="onmouseup">
							decreaseCountedValue.call(this, '<xsl:value-of select="$attr/@id"/>');
							SetModified();
						</xsl:attribute>
					</div>
				</td>
			</tr>
		</table>

		<xsl:call-template name="helperScriptOnLoad">
			<xsl:with-param name="code">
				validateCountedValue.call(this, '<xsl:value-of select="$attr/@id"/>', parseInt('<xsl:value-of select="$attr/@value"/>' ,10) || 0);
			</xsl:with-param>
		</xsl:call-template>
	</xsl:template>
</xsl:stylesheet>

