<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>
      <xsl:for-each select="cnml/network/zone">
        <xsl:call-template name="zone">
          <xsl:with-param name="parent">
            <xsl:value-of select="@title"/>
          </xsl:with-param>
        </xsl:call-template>
      </xsl:for-each>
		
	</div>
    
  <script type="text/javascript">
  var nodes = new Array();
  var i = 0;
  <xsl:for-each select="cnml/network/zone">
    <xsl:call-template name="gnode"></xsl:call-template>
  </xsl:for-each>
  
  </script>
  <script type="text/javascript" src="/wp-content/plugins/guifixslprocessor/cnml.js"></script>

    
  </xsl:template>
  
  <!-- zona o subzona -->
  <xsl:template name="zone">
    <xsl:param name="parent"></xsl:param>
	<h3>Zona <xsl:value-of select="$parent"/></h3>
	<ul>
	<xsl:for-each select="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>
	<xsl:for-each select="zone">
      <xsl:call-template name="zone">
        <xsl:with-param name="parent">
          <xsl:value-of select="$parent"/> - <xsl:value-of select="@title"/>
        </xsl:with-param>
      </xsl:call-template>
    </xsl:for-each>
	</ul>  	
  </xsl:template>
  
  <!-- nodes grafics -->
  <xsl:template name="gnode">
    <xsl:for-each select="node">
      var lat = parseFloat(<xsl:value-of select="@lat"/>);
      var lng = parseFloat(<xsl:value-of select="@lon"/>);
      var html = '<xsl:value-of select="@title"/><br></br><xsl:call-template name="detailnode"></xsl:call-template>';
      var label = "<xsl:value-of select="@title"/>";
      var category = "<xsl:value-of select="@status"/>";
      nodes[i] = new Array(lat, lng, html, label, category);
      i++;
    </xsl:for-each>
    <xsl:for-each select="zone">
      <xsl:call-template name="gnode"></xsl:call-template>
    </xsl:for-each>
  </xsl:template>
  
  <!-- detall node -->
  <xsl:template name="detailnode"><b>punts acces:</b> <xsl:value-of select="@access_points"/><br></br><b>dispositius:</b><xsl:value-of select="@devices"/><br></br><b>enllassos:</b> <xsl:value-of select="@links"/>
    <br></br><b>serveis:</b><xsl:value-of select="@services"/>
    <hr></hr>
    <xsl:for-each select="device">
      <xsl:for-each select="service">
        <xsl:value-of select="@type"/>
        <br></br>
      </xsl:for-each>
    </xsl:for-each>
  </xsl:template>
  
  <!-- status -->
  <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>