$(document).ready(function(){

  // Create an instance of orgBuilder within the target element(s). 
  // If $elem represents multiple elements, orgBuilder will be instantiated within each one.
  // Use the nodeHeight option to set custom node height.
  var $elem = $('#orgchart');
  $elem.orgBuilder();

  // Define a function to call the orgBuilder 'openDialog' method.  
  // The second argument is an object containing config properties for the dialog.
  // These properties are detailed in the Usage documentation.  
  // The buttonAction method executes when the dialog button is clicked.
  var renameDialog = function() { 
    $elem.orgBuilder( 'openDialog', { 
      title : 'Rename Node', 
      bodyText : 'New Node Display Name', 
      input : true,
      inputValue : nodeClicked.find( '.label' ).text(),
      button : true,
      buttonText : 'Submit',
      buttonAction : function(){
        // $('.field') is the dialog input element
        var name = $('.field').val();
        $elem.orgBuilder( 'closeDialog' );
        // The renameNode method changes the name attribute and text of the specified node to the text provided.
        $elem.orgBuilder( 'renameNode', nodeClicked, name );
      }
    }); 
  };

  // Use the addOption method to add a new button to the option menu with the provided text.  
  // The function provided is called when the button is clicked.
  $elem.orgBuilder( 'addOption', 'Rename Node', renameDialog );

  // Define a function to call the orgBuilder 'openDialog' method.  
  // Use some options to set up the dialog and attach a function to delete a node.  
  var deleteDialog = function() { 
    $elem.orgBuilder( 'openDialog', { 
      title : 'Delete Node', 
      bodyText : 'Delete this node and all child nodes?', 
      button : true,
      buttonText : 'Confirm',
      buttonAction : function(){
        $elem.orgBuilder( 'closeDialog' );
        // The deleteNode method removes the specified node and all descendents.
        $elem.orgBuilder( 'deleteNode', nodeClicked );
      }
    }); 
  };

  // Use the addOption method to add a new button to the option menu with the provided text.  
  // The function provided is called when the button is clicked.
  $elem.orgBuilder( 'addOption', 'Delete Node', deleteDialog );

  // Define a function to call the orgBuilder 'openDialog' method.  
  // Use some options to set up the dialog and attach a function to create a new node.  
  var createDialog = function() { 
    $elem.orgBuilder( 'openDialog', { 
      title : 'Create Node', 
      bodyText : 'Node Display Name', 
      input : true,
      button : true,
      buttonText : 'Submit',
      buttonAction : function(){
        // $('.field') is the dialog input element
        var name = $('.field').val();
        $elem.orgBuilder( 'closeDialog' );
        // The createNode method creates a new node as a child of the specified node with the provided name attribute and label text.
        $elem.orgBuilder( 'createNode', nodeClicked, name );
      }
    }); 
  };     

  // Use the addOption method to add a new button to the option menu with the provided text.  
  // The function provided is called when the button is clicked.
  $elem.orgBuilder( 'addOption', 'Create Child', createDialog );
     
});