docs: function renderer(parent, config){
      this.parent = ( ( "string" == typeof parent )
  		    ? document.getElementById(parent)
  		    : parent );
      if (this.parent === undefined) {
          throw "can't find parent element " + parent;
      }
      this.tree = new tree();
      this.node_hidden = {};
      this.children_hidden = {};
      this._sort = "ladderize_up";
      this._layout_dirty = true;
      this._css_prefix = "phylo_tree_" + (id_counter++) + "_";
  
      var self = this;
      this.node_elem_click_handler = function(event) {
          var node_elem =
              (event.currentTarget) ? event.currentTarget : event.srcElement;
          var node = self.tree.nodes[node_elem.node_id];
          if (node) return self.node_clicked(node, node_elem, event);
      };
  
      var default_config = {
          // these are in pixels
          // leaf box vertical height, including padding and borders
          box_height: 24,
          // vertical space between leaf boxes
          box_spacing: 10,
          // space between leaf box edge and leaf label
          leaf_padding: 4,
          // leaf border thickness
          leaf_border: 2,
          // leaf left offset
          leaf_margin: 1,
          // width/height of internal nodes
          node_size: 8,
  
          // leaf border color
          leaf_border_color: "blue",
          // font for leaf labels
          leaf_font: "Helvetica, Arial, sans-serif",
          transition_time: "0.8s"
      };
  
      this.config = ("object" == typeof config
                     ? bbop.core.merge(default_config, config)
                     : default_config);
  
      //config settings with default values dependent on other config values
      this.config.parent_padding = ( (this.config.parent_padding === undefined)
                                     ? ((this.config.box_spacing / 2) | 0)
                                     : this.config.parent_padding );
  
      this.node_style = {
          position: "absolute",
          background: "white",
          "z-index": 2,
          width: this.config.node_size + "px",
          height: this.config.node_size + "px",
          "margin-top": (-this.config.node_size / 2) + "px",
          "margin-left": (-this.config.node_size / 2) + "px",
          border: "1px solid black",
          "transition-property": "top, left",
          "transition-duration": this.config.transition_time,
          "transition-timing-function": "ease-in-out, ease-in-out",
          "box-sizing": "content-box",
          "-moz-box-sizing": "content-box"
      };
  
      this.leaf_style = {
          position: "absolute",
          background: "#f1f1ff",
          "z-index": 1,
          padding: this.config.leaf_padding + "px",
          // if leaf_padding is too low, the branch line will touch the text
          "padding-left": Math.max(this.config.leaf_padding, 3) + "px",
  
          // so that the leaves don't cover up the connection lines
          "margin-left": this.config.leaf_margin + "px",
  
          "margin-top": (-this.config.box_height / 2) + "px",
  
          // setting font size from box height.  We'd like to set font cap height
          // directly, but we can only set em box size.  Cap height on average is
          // 70% of em box size, so we'll set the font size to the intended
  	// height divided by 0.7
          font: ( ( this.config.box_height
                    - ( this.config.leaf_padding * 2 )
                    - ( this.config.leaf_border * 2 ) )
                  / 0.7 ) + "px " + this.config.leaf_font,
  
          // this.config.box_height includes padding and borders, so we
          // subtract those out to set the CSS height, which doesn't include
          // padding or borders
          height: ( this.config.box_height
                    - ( this.config.leaf_padding * 2 )
                    - ( this.config.leaf_border * 2 ) ) + "px",
  
          // center vertically by setting the line height to 0.7em
          // (corresponding to the way we set font size above)
          "line-height": "0.7em",
          "border-radius": (this.config.leaf_padding + 1) + "px",
          "white-space": "nowrap",
          "transition-property": "top, left",
          "transition-duration": this.config.transition_time,
          "transition-timing-function": "ease-in-out, ease-in-out",
          "box-sizing": "content-box",
          "-moz-box-sizing": "content-box"
      };
  
      if (this.config.leaf_border > 0) {
          this.leaf_style.border =
              this.config.leaf_border + "px solid "
              + this.config.leaf_border_color;
      }
  
      this.connection_style = {
          position: "absolute",
          "border-left": "2px solid black",
          "border-top": "2px solid black",
          "border-bottom": "2px solid black",
          "border-right": "none",
          "transition-property": "top, height, left, width, border",
          "transition-duration": this.config.transition_time,
          "transition-timing-function": 
              "ease-in-out, ease-in-out, ease-in-out, ease-in-out, step-start"
      };
  }