$(document).ready(function(){
   
  var $elem = $('#orgchart');
  
  $elem.orgBuilder({ 'draggable':true });
  
  var toggleChildren = function() {
    var nodeChildren = $elem.orgBuilder( 'findChildNodes', nodeClicked );
    var visibleChildren = nodeChildren.not( '.min' ).length;
    if ( visibleChildren === 0 ) {
      $elem.orgBuilder( 'showChildren', nodeClicked );
    } else {
      $elem.orgBuilder( 'hideDescendents', nodeClicked );
    }
  }
  
  $elem.orgBuilder( 'addOption', 'Toggle Children', toggleChildren ); 
  
  // Define a function to call either the collapseNode or expandNode method.  
  // This will animate the size of the node to reveal the content div.
  // The nodeClicked variable references the node used to open the option menu.  
  // Nodes which are enlarged to show content get a class of 'expanded'.
  var toggleContent = function() {
    var isExpanded = nodeClicked.is( '.expanded' );
    if ( isExpanded ) {
      $elem.orgBuilder( 'collapseNode', nodeClicked );
    } else {
      $elem.orgBuilder( 'expandNode', 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', 'Toggle Content', toggleContent ); 
  
  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(){
        var node = nodeClicked;
        var name = $('.field').val();
        $elem.orgBuilder( 'closeDialog' );
        $elem.orgBuilder( 'renameNode', node, name );
      }
    }); 
  };
  
  $elem.orgBuilder( 'addOption', 'Rename Node', renameDialog );
 
  var deleteDialog = function() { 
    $elem.orgBuilder( 'openDialog', { 
      title : 'Delete Node', 
      bodyText : 'Delete this node and all child nodes?', 
      button : true,
      buttonText : 'Confirm',
      buttonAction : function(){
        var node = nodeClicked;
        $elem.orgBuilder( 'closeDialog' );
        $elem.orgBuilder( 'deleteNode', node );
      }
    }); 
  };
  
  $elem.orgBuilder( 'addOption', 'Delete Node', deleteDialog );
  
  var createDialog = function() { 
    $elem.orgBuilder( 'openDialog', { 
      title : 'Create Node', 
      bodyText : 'Node Display Name', 
      input : true,
      button : true,
      buttonText : 'Submit',
      buttonAction : function(){
        var node = nodeClicked;
        var name = $('.field').val();
        $elem.orgBuilder( 'closeDialog' );
        $elem.orgBuilder( 'createNode', node, name );
      }
    }); 
  };     
  
  $elem.orgBuilder( 'addOption', 'Create Child', createDialog );  
  
  $('#toggle').click(function(){
    opts.stackLeaves = !opts.stackLeaves;
    var connectEm = function(){
      $elem.orgBuilder( 'connectNodes' );
    };
    var whenDone = function() {
      $elem.orgBuilder( 'collectStack' );
      $elem.orgBuilder( 'showNode', $open, null, connectEm );
    };
    $open = $( '.node' ).not( '.min' );
    $( '.connect' ).remove();
    $elem.orgBuilder( 'hideDescendents', $elem.find( '#root' ).children( '.node' ), whenDone, false );
  });
  
  // Define an alert function.
  var simpleAlert = function() {
    alert( 'Hello from the ' + nodeClicked.attr( 'name' ) + ' department!' );
  };
  
  // 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', 'Simple Alert', simpleAlert ); 
  
  // Let's make it interesting. 
  // Define a recursive function to 'walk up' the node tree and add class 'highlight' to each ancestor node.
  var showPath = function() {
    function walk( step ){
      var parent = $elem.orgBuilder( 'findParentNode', step );
      step.addClass( 'highlight' );
      if ( step.parent( '.family' ).attr( 'id' ) !== 'root' ){
        walk( parent );
      }
    }
    $( '.highlight' ).removeClass( 'highlight' );
    walk( 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', 'Show Chain of Command', showPath ); 
  
});