title: Downloading childnode in Spacetree in infovis javascript
body: <p>I am new to java and javascript. I have used infovis Spacetree for building a tree. I want to make the children node of parent node downloadable. I mean when the user clicks chilnode 1 of Parent node 1 it should download a pdf file stored from root directory. Could anyone suggest me how can achieve that. Here is my javascript code for spacetree in infovis   </p>
  
  <pre><code>var labelType, useGradients, nativeTextSupport, animate;
  
  (function() {
    var ua = navigator.userAgent,
        iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
        typeOfCanvas = typeof HTMLCanvasElement,
        nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
        textSupport = nativeCanvasSupport 
          &amp;&amp; (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
     labelType = (!nativeCanvasSupport || (textSupport &amp;&amp; !iStuff))? 'Native' : 'HTML';
    nativeTextSupport = labelType == 'Native';
    useGradients = nativeCanvasSupport;
    animate = !(iStuff || !nativeCanvasSupport);
  })();
  var Log = {
    elem: false,
    write: function(text){
      if (!this.elem) 
        this.elem = document.getElementById('log');
      this.elem.innerHTML = text;
      this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
    }
  };
  function init(){
  
      var json = {
          id: "node1",
          name: "Stocks",
          data: {},
          children: [{
              id: "node2",
              name: "Stock1",
              data: {},
              children: [{
                  id: "node3",
                  name: "A",
                  data: {},
                  children: [{
                      id: "node4",
                      name: "child 1",
                      data: {},
                      children: []
                  }, {
                      id: "node5",
                      name: "child 2",
                      data: {},
                      children: []
                  }, {
                      id: "node6",
                      name: "child 3",
                      data: {},
                      children: []
                  }]                
              }]
          }]};        
      var st = new $jit.ST({      
          injectInto: 'infovis',     
          duration: 800,     
          transition: $jit.Trans.Quart.easeInOut,      
          levelDistance: 50,       
          Navigation: {
            enable:true,
            panning:true
          },
              Node: {
              height: 20,
              width: 100,
              type: 'rectangle',
              color: '#aaa',
              overridable: true
          },
           Edge: {
              type: 'bezier',
              overridable: true
          },
          onBeforeCompute: function(node){
              Log.write("loading " + node.name);
          },
  
          onAfterCompute: function(){
              Log.write("done");
          },
          onCreateLabel: function(label, node){
              label.id = node.id;            
              label.innerHTML = node.name;
              label.onclick = function(){
                  if(normal.checked) {
                    st.onClick(node.id);
                  } else {
                  st.setRoot(node.id, 'animate');
                  }
              };
              var style = label.style;
              style.width = 60 + 'px';
              style.height = 17 + 'px';            
              style.cursor = 'pointer';
              style.color = '#333';
              style.fontSize = '0.8em';
              style.textAlign= 'center';
              style.paddingTop = '3px';
          },
          onBeforePlotNode: function(node){
              if (node.selected) {
                  node.data.$color = "#ff7";
              }
              else {
                  delete node.data.$color;
  
                  if(!node.anySubnode("exist")) {
  
                      var count = 0;
                      node.eachSubnode(function(n) { count++; });
                      node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];                    
                  }
              }
          },
          onBeforePlotLine: function(adj){
              if (adj.nodeFrom.selected &amp;&amp; adj.nodeTo.selected) {
                  adj.data.$color = "#eed";
                  adj.data.$lineWidth = 3;
              }
              else {
                  delete adj.data.$color;
                  delete adj.data.$lineWidth;
              }
          }
      });
      st.loadJSON(json);   
      st.compute();  
      st.geom.translate(new $jit.Complex(-200, 0), "current");   
      st.onClick(st.root);   
      var top = $jit.id('r-top'), 
          left = $jit.id('r-left'), 
          bottom = $jit.id('r-bottom'), 
          right = $jit.id('r-right'),
          normal = $jit.id('s-normal');  
      function changeHandler() {
          if(this.checked) {
              top.disabled = bottom.disabled = right.disabled = left.disabled = true;
              st.switchPosition(this.value, "animate", {
                  onComplete: function(){
                      top.disabled = bottom.disabled = right.disabled = left.disabled = false;
                  }
              });
          }
      };
      top.onchange = left.onchange = bottom.onchange = right.onchange = changeHandler;
  }
  </code></pre>
  
  <p>Kindly guide me</p>