<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"
  xmlns:tpl="http://jim.mozdev.org/NS/templates"
  xml:lang="en-US">
  
  <head>
    <title>Template Test</title>
    <link type="text/css" rel="stylesheet" href="template1.css"/>

    <script type="text/javascript" src="misc.js" />
    <script type="text/javascript" src="exprwatcher.js" />
    <script type="text/javascript" src="templates.js" />

    <script>
      var vals = [{name: "Name 1", idx: 1}, {name:"Name 2", idx:2}];

      function onLoad() {
        bindValueToTemplate(vals, document.
	    getElementsByTagName("template").item(0));
      }
    </script>
  </head>

  <body onload="onLoad()">
    <div>
      <input type="text" id="name"/>
      <input onclick="vals.push({name: getElementById('name').value, idx: vals.length+1})"
	type="submit" value="Add"/>
      <input onclick="vals[vals.length-1] = null; vals.pop()" type="submit" value="Remove"/>
    </div>

    <tpl:template>
      <tpl:for-each select="value">
	<span styles="font-size: ${value.idx * 2}px;">
	  <tpl:if test="property > 0">, </tpl:if>
	  <tpl:value-of select="value.idx"/>. <tpl:value-of select="value.name"/>
        </span>
      </tpl:for-each>
    </tpl:template>
  </body>
</html>
