<html>
<head><title>Outline Tree Using Jstemplates</title>
  <script src="../util.js" type="text/javascript"></script>
  <script src="../jsevalcontext.js" type="text/javascript"></script>
  <script src="../jstemplate.js" type="text/javascript"></script>
  <script type="text/javascript">
    // Hierarchical data:
    var tplData = 
      { title: "Jstemplates", items: [
        { title: "Using Jstemplates", items: [
          { title: "The Jstemplates Module"},
          { title: "Javascript Data"},
          { title: "Template HTML"},
          { title: "Processing Templates with Javascript Statements"}
          ]
        },
        { title: "Template Processing Instructions", items: [
          { title: "Processing Environment" },
          { title: "Instruction Attributes", items: [
            {title: "jscontent"}, {title: "jsselect"}, {title: "jsdisplay"}, 
            {title: "transclude"},{title: "jsvalues"}, {title: "jsskip"}, {title: "jseval"}
          ]}
        ]}
      ]};
      
    var PEG_NAME = 'peg';
    var TEMPLATE_NAME = 'tpl';
    
    // Called by the body onload handler:
    function loadAll() {
      var pegElement = domGetElementById(document, PEG_NAME);
      loadData(pegElement, TEMPLATE_NAME, tplData);
    }
  
    function loadData(peg, templateId, data) {
      // Get a copy of the template:
      var templateToProcess = jstGetTemplate(templateId);
      
      // Wrap our data in a context object:
      var processingContext = new JsEvalContext(data);
  
      // Process the template
      jstProcess(processingContext, templateToProcess);
      
      // Clear the element to which we'll attach the processed template:
      peg.innerHTML = '';
      
      // Attach the template:
      domAppendChild(peg, templateToProcess);
    }
    
    // Function called by onclick to record state of closedness and 
    // refresh the outline display
    function setClosed(jstdata, closedVal) {
      jstdata.closed = closedVal;
      loadAll();
    }
    </script>
    <link rel="stylesheet" type="text/css" href="css/maps2.deb.css"/>
</head>
<body onload="loadAll()">

<!-- 
This is the div to which the instantiated template will be attached.
-->
<div id="peg"></div>

<!--
A container to hide our template:
-->
<div style="display:none">
<!-- 
This is the template div. It will be copied and attached to the div above with:
 var apt = jstGetTemplate('apt');
 appendChild(panel, apt)
-->
  <div id="tpl">
  <!--
  Links to open and close outline sections:
  -->
    <a href="#" jsdisplay="closed" jsvalues=".jstdata:$this" onclick="setClosed(this.jstdata,0)">[Open]</a> 
    <a href="#" jsdisplay="!closed && items.length" jsvalues=".jstdata:$this" 
       onclick="setClosed(this.jstdata,1)">[Close]</a> 
       
    <span jscontent="title">Outline heading</span>
    <ul jsdisplay="items.length && !closed">
      <li jsselect="items">
        <!--Recursive tranclusion: -->
        <div transclude="tpl"></div>
      </li>
    </ul>
  </div>

</div>
</body>
</html>