<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" />

<!-- If this is XHTML, then let's just copy it -->
<xsl:template match="/html">
	<xsl:copy>
		<xsl:for-each select="@*">
			<xsl:variable name="key" select="name()"/>
			<xsl:attribute name="{$key}">
				<xsl:value-of select="normalize-space(.)"/>
			</xsl:attribute>
		</xsl:for-each>
		<xsl:apply-templates mode="copytree"/>
	</xsl:copy>
</xsl:template>

<xsl:template match="node() | text()" mode="copytree">
	<xsl:call-template name="recurse" />
</xsl:template>

<xsl:template match="/html/body" mode="copytree">
	<xsl:if test="count(/html/head) = 0">
		<head>
		<link rel="stylesheet" href="kiosk.css" />
		<link rel="stylesheet" href="keyboard.css" />
		<script src="keyboard.js"></script>
		</head>
	</xsl:if>

	<xsl:call-template name="recurse" />
</xsl:template>

<xsl:template name="recurse">
	<xsl:copy>
		<xsl:for-each select="@*">
			<xsl:variable name="key" select="name()"/>
			<xsl:attribute name="{$key}">
				<xsl:value-of select="normalize-space(.)"/>
			</xsl:attribute>
		</xsl:for-each>
		<xsl:apply-templates mode="copytree"/>
	</xsl:copy>
</xsl:template>

<xsl:template match="widget">
	<xsl:call-template name="widget" />
</xsl:template>
<xsl:template match="widget" mode="copytree">
	<xsl:call-template name="widget" />
</xsl:template>

<xsl:template name="widget"> 
	<xsl:if test="@type = 'keyboard'">
		<span id="{generate-id()}"/>
		<script>
			var id = "<xsl:value-of select="generate-id()" />";
		<![CDATA[
			var kbd = new Keyboard();
			kbd.attachToAllInputs();
			document.getElementById(id).appendChild(kbd.getElement());
		]]>
		</script>

	</xsl:if>
</xsl:template>

<!-- If this wants to use the kiosk ui, then let's do that -->
<xsl:template match="/kiosk">
	<html>
	<head>
		<title><xsl:value-of select="title" /></title>
		<link rel="stylesheet" href="kiosk.css" />
		<script src="ui.js"></script>
		<link rel="stylesheet" href="keyboard.css" />
		<script src="keyboard.js"></script>
	</head>
	<body>
		<div class="title">
			<xsl:apply-templates select="title" />
			<xsl:apply-templates select="caption" />
		</div>
		<div class="content">
			<xsl:apply-templates select="*[name() != 'title' and name() != 'caption']" />
		</div>
	</body>
	</html>
</xsl:template>

<xsl:template match="/kiosk/title">
	<h3><xsl:value-of select="." /></h3>
</xsl:template>

<xsl:template match="/kiosk/caption">
	<i><xsl:value-of select="." /></i>
</xsl:template>

<xsl:template match="menu">
	<xsl:apply-templates select="item" mode="menugen" />
</xsl:template>

<xsl:template match="item" mode="menugen">
	<xsl:choose>
		<xsl:when test="@image">
			<img src="{@image}" class="menuitem" onmousedown="menuclick(this,'{@url}')" />
		</xsl:when>
		<xsl:otherwise>
			<div class="menuitem">
				<h3 onmousedown="menuclick(self, '{@url}')">
					<xsl:value-of select="@id" />
				</h3>
			</div>
				<!--
			<input type="button" class="menuitem" value="{@id}"
	       id="{generate-id()}" onmousedown="menuclick(self,'{@url}')"/>
			 -->
		</xsl:otherwise>
	</xsl:choose>
</xsl:template>

</xsl:stylesheet>
