<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:param name="gmapikey" select="'You have to override this parameter'"/>
  <xsl:template match="data">
	<xsl:text disable-output-escaping="yes">&lt;script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=</xsl:text>
  <xsl:value-of select="$gmapikey"/>
  <xsl:text disable-output-escaping="yes">"&gt;&lt;/script&gt;</xsl:text>
  	
  	<div id="guifi">
		<form>
		  <input type="checkbox" id="Workingbox" onclick="boxclick(this,'Working')" /> 
		  <label for="Workingbox"> Actius</label>
		  <xsl:text disable-output-escaping="yes">&amp;nbsp; &amp;nbsp;</xsl:text>
		  <input type="checkbox" id="Testingbox" onclick="boxclick(this,'Testing')" />
		  <label for="Testingbox"> En proves</label>
		  <xsl:text disable-output-escaping="yes">&amp;nbsp; &amp;nbsp;</xsl:text>
		  <input type="checkbox" id="Buildingbox" onclick="boxclick(this,'Building')" />
		  <label for="Buildingbox"> En construccio</label>
		  <xsl:text disable-output-escaping="yes">&amp;nbsp; &amp;nbsp;</xsl:text>
		  <input type="checkbox" id="Plannedbox" onclick="boxclick(this,'Planned')" />
		  <label for="Plannedbox"> Projectats</label>
		  <br />
		</form>  
		<table border="1">
		  <tr>
			<td>
			   <div id="map" style="width: 400px; height: 450px"></div>
			</td>
			<td width="150" valign="top" style="text-decoration: underline; ">
			   <div id="side_bar"></div>
			</td>
	
		  </tr>
		</table>
		
		<h3>Punts</h3>
		<ul>
		<xsl:for-each select="cnml/network/zone/node">
			<xsl:sort select="@status" order="descending"/>
			<li>
				<xsl:call-template name="status"><xsl:with-param name="mainclass">node</xsl:with-param><xsl:with-param name="show">false</xsl:with-param></xsl:call-template>
				<xsl:value-of select="@title"/>
				<span>
					<xsl:call-template name="status"><xsl:with-param name="mainclass">status</xsl:with-param></xsl:call-template>
				</span>
				<xsl:if test="device">
					<ul>
					<li><b>Dispositius</b></li>
					<xsl:for-each select="device">
						<xsl:sort select="@status" order="descending"/>
						<xsl:sort case-order="upper-first" data-type="text" select="@status"/>
						<li>
							<xsl:call-template name="status"><xsl:with-param name="mainclass">device</xsl:with-param><xsl:with-param name="show">false</xsl:with-param></xsl:call-template>
							<xsl:value-of select="@title"/>
							<span>
								<xsl:call-template name="status"><xsl:with-param name="mainclass">status</xsl:with-param></xsl:call-template>
							</span>
						</li>
					</xsl:for-each>
					</ul>
				</xsl:if>
			</li>
		</xsl:for-each>
		</ul>
	</div>
    
  <script type="text/javascript">
  var nodes = new Array();
  <xsl:for-each select="cnml/network/zone/node">
	var lat = parseFloat(<xsl:value-of select="@lat"/>);
	var lng = parseFloat(<xsl:value-of select="@lon"/>);
	var html = "<xsl:value-of select="@title"/>";
	var label = "<xsl:value-of select="@title"/>";
	var category = "<xsl:value-of select="@status"/>";
	nodes[<xsl:value-of select="position()-1"/>] = new Array(lat, lng, html, label, category);
  </xsl:for-each>
  </script>
  <script type="text/javascript" src="/wp-content/plugins/guifixslprocessor/cnml.js"></script>

    
  </xsl:template>
  <xsl:template name="status">
  	<xsl:param name="mainclass">status</xsl:param>
	<xsl:param name="show">true</xsl:param>
	<xsl:choose>
		<xsl:when test="@status='Working'">
			<xsl:attribute name="class"><xsl:value-of select="$mainclass"/> active</xsl:attribute>
			<xsl:if test="$show='true'">
			(actiu)				
			</xsl:if>
		</xsl:when>
		<xsl:otherwise>
			<xsl:attribute name="class"><xsl:value-of select="$mainclass"/> unactive</xsl:attribute>
			<xsl:if test="$show='true'">
			(inactiu)				
			</xsl:if>
		</xsl:otherwise>
	</xsl:choose>
  </xsl:template>
</xsl:stylesheet>