$(document).ready(function(){
  
  // The HTML representing the orgchart must be present within the container element before initiliazing the plugin.  
  // Below is an example of converting hierarchy data stored in another format into HTML for the plugin.

  // Suppose our org data is stored in a table with four columns and six rows, likely the most common format for storing hierarchical data.
  // The javascript representation of that table could be the array of arrays below.
  var orgs = [
    [ 'Operations', 'Operations', 'Operations', 'Operations', 'Operations', 'Operations' ],
    [ 'Manufacturing', 'Manufacturing', 'Distribution', 'Sales', 'Sales', 'Sales' ],
    [ 'R&D', 'Assembly', null, 'Marketing', 'Wholesale', 'Retail' ],
    [ null, null, null, null, null, 'E-Commerce' ]
  ];

  // This is the starting point for our HTML.  We will be adding nodes to it as we loop through the data.
  var treeHTML = $( '<div class="family" id="root"/>' );

  // Loop through the columns/arrays and rows/indices, adding the necessary HTML to the treeHTML object. 
  // We are assuming here that all nodes have unique names and the first column/array has the same value in every row/index, since it is the root.
  for ( var col = 0; col < orgs.length; col++ ) {
    if ( col === 0 ) {
      var name = orgs[ col ][ 0 ];
      $( '<div class="node" name="' + name + '"><div class="content"><div class="header"><img src="../images/Gear.svg.hi.png" class="opt" /></div><div class="label">' + name + '</div><div class="detail"/></div></div><div class="offspring"/>' ).appendTo( treeHTML ).find( '#root' );
    } else {
      for ( var row = 0; row < orgs[ col ].length; row++ ) {
        var name = orgs[ col ][ row ];
        var parent = orgs[ col - 1 ][ row ];
        if ( treeHTML.find( '.node[name="' + name + '"]' ).length === 0 && name && parent ){
          $( '<div class="family"><div class="node" name="' + name + '"><div class="content"><div class="header"><img src="../images/Gear.svg.hi.png" class="opt" /></div><div class="label">' + name + '</div><div class="detail"/></div></div><div class="offspring"/></div>' ).appendTo( treeHTML.find( '.node[name="' + parent + '"]' ).parent( '.family' ).children( '.offspring' ) );
        }
      }
    }
  }

  var $elem = $( '#orgchart' );
  // Append the HTML which was created to the container element for the orgchart.
  treeHTML.appendTo( $elem );
  // Initialize the plugin.
  $elem.orgBuilder();

  var simpleAlert = function() {
    alert( 'Hello from the ' + nodeClicked.attr( 'name' ) + ' department!' );
  };
  $elem.orgBuilder( 'addOption', 'Simple Alert', simpleAlert ); 

});