function treerenderer_hierarchy()
{
  this.togglelink = "<a href=\"javascript: togglenode('$tree$', '$id$');\"><img src=\"$icon$\" align=\"absmiddle\" width=\"16\" height=\"16\" border=\"0\" /></a>";
  this.notoggle = "<span style=\"margin-left: 16px;\"></span>";

  this.createcontainer = function(treenode, level, indent)
  {
    var _container = document.createElement("div");

    _container.id = treenode.id;
    _container.style.paddingLeft = (level * parseInt(indent)) + "px";
    _container.innerHTML = treenode.id;

    return _container;
  }
  
  this.isrendered = function(treenode, withchildren)
  {
    if (treenode && document.getElementById(treenode.id) && (!withchildren || document.getElementById(treenode.id).childNodes.length>1))
    {
      return true;
    }
    
    return false;
  }
  
  this.paint = function(treenode, styles, template)
  {
    var _keyregex = /\$([\w\_]+)\$/;
    var terminator = 256;
    
    if (!treenode.childcount || treenode.childcount>0)
    {
      template = this.togglelink + template;
    }
    else
    {
      template = this.notoggle + template;
    }
    
    template = template.replace(/\$icon\$/, styles["icon_closed"]);
    template = treenode.render(template);

    // TODO Create a div element and use real function to add handlers ...
    //  onmouseover=\"if (this.className!='htreenodeselected') this.className='htreenodehover';\" onmouseout=\"if (this.className!='htreenodeselected') this.className='htreenode';\" onclick=\"if (document.getElementsByClassName('div', 'htreenodeselected').length>0) document.getElementsByClassName('div', 'htreenodeselected')[0].className='htreenode'; this.className='htreenodeselected';\"
    
    return "<div id=\"" + treenode.id + "_node\" class=\"htreenode\"><nobr>" + template + "</nobr></div>";
  }
  
  this.repaint = function(treenode, styles, toggle)
  {
    var _node = document.getElementById(treenode.id);
    
    var _display = "block";
    /* Check visibility of first child */
    if (_node.childNodes[1] && _node.childNodes[1].style.display!="none")
    {
      _display = "none";
    }
    
    /* return value, false = node is closed */
    var _rc = false;
    
    if (toggle)
    {
      for (i=1; i<_node.childNodes.length; i++)
      {
        _node.childNodes[i].style.display = _display;
      }
      
      if (_display=="none")
      {
        _node.childNodes[0].innerHTML = _node.childNodes[0].innerHTML.replace(styles['icon_opened'], styles['icon_closed']);
        _rc = false;
      }
      else
      {
        _node.childNodes[0].innerHTML = _node.childNodes[0].innerHTML.replace(styles['icon_closed'], styles['icon_opened']);
        _rc = true;
      }
    }  
    else
    {
      if (_display=="none")
      {
        _node.childNodes[0].innerHTML = _node.childNodes[0].innerHTML.replace(styles['icon_closed'], styles['icon_opened']);
        _rc = false;
      }
      else
      {
        _node.childNodes[0].innerHTML = _node.childNodes[0].innerHTML.replace(styles['icon_opened'], styles['icon_closed']);
        _rc = true;
      }
    }
  }
}