text: tree-default/* ------------------------------------------------------------------------------
  *
  *  # Dynamic tree views
  *
  *  Specific JS code additions for extra_trees.html page
  *
  *  Version: 1.0
  *  Latest update: Aug 1, 2015
  *
  * ---------------------------------------------------------------------------- */
  
  $(function() {
  
  
      // Basic setup
      // ------------------------------
  
      // Basic example
      $(".tree-default").fancytree({
          init: function(event, data) {
              $('.has-tooltip .fancytree-title').tooltip();
          }
      });
  
  
      // Load JSON data
      $(".tree-ajax").fancytree({
          source: {
              url: "assets/demo_data/fancytree/fancytree.json"
          },
          init: function(event, data) {
              $('.has-tooltip .fancytree-title').tooltip();
          }
      });
  
  
      // Embed JSON data
      $(".tree-json").fancytree({
          init: function(event, data) {
              $('.has-tooltip .fancytree-title').tooltip();
          }
      });
  
  
      // Child counter
      $(".tree-child-count").fancytree({
          extensions: ["childcounter"],
          source: {
              url: "assets/demo_data/fancytree/fancytree.json"
          },
          childcounter: {
              deep: true,
              hideZeros: true,
              hideExpanded: true
          },
          init: function(event, data) {
              $('.has-tooltip .fancytree-title').tooltip();
          }
      });
  
  
      // Drag and drop support
      $(".tree-drag").fancytree({
          extensions: ["dnd"],
          source: {
              url: "assets/demo_data/fancytree/fancytree.json"
          },
          dnd: {
              autoExpandMS: 400,
              focusOnClick: true,
              preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
              preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
              dragStart: function(node, data) {
                  return true;
              },
              dragEnter: function(node, data) {
                  return true;
              },
              dragDrop: function(node, data) {
  
                  // This function MUST be defined to enable dropping of items on the tree.
                  data.otherNode.moveTo(node, data.hitMode);
              }
          },
          init: function(event, data) {
              $('.has-tooltip .fancytree-title').tooltip();
          }
      });
  
  
      // Editable nodes
      $(".tree-editable").fancytree({
          extensions: ["edit"],
          source: {
              url: "assets/demo_data/fancytree/fancytree.json"
          },
          edit: {
              adjustWidthOfs: 0,
              inputCss: {minWidth: "0"},
              triggerStart: ["f2", "dblclick", "shift+click", "mac+enter"],
              save: function(event, data) {
                  alert("save " + data.input.val()); // Save data.input.val() or return false to keep editor open
              }
          }
      });
  
  
  
      // Selectable nodes
      // ------------------------------
  
      // Single selection
      $(".tree-radio").fancytree({
          checkbox: true,
          selectMode: 1,
          source: {
              url: "assets/demo_data/fancytree/fancytree.json"
          }    
      });
  
  
      // Multiple selection
      $(".tree-checkbox").fancytree({
          checkbox: true,
          selectMode: 2,
          source: {
              url: "assets/demo_data/fancytree/fancytree.json"
          }
      });
  
  
      // Disable selections
      $(".tree-checkbox-options").fancytree({
          checkbox: true,
          selectMode: 2
      });
  
  
      // Hierarchical select
      $(".tree-checkbox-hierarchical").fancytree({
          checkbox: true,
          selectMode: 3
      });
  
  
      //
      // Toggle checkbox state
      //
  
      // Initialize
      $(".tree-checkbox-toggle").fancytree({
          checkbox: true,
          selectMode: 2,
          source: {
              url: "assets/demo_data/fancytree/fancytree.json"
          }    
      });
  
      // Initialize switchery toggle
      var switcherySelect = document.querySelector('.switchery-select');
      var initSelect = new Switchery(switcherySelect);
  
      // Change checkbox states
      switcherySelect.onchange = function() {
          if(switcherySelect.checked) {
              $(".tree-checkbox-toggle").fancytree("getTree").visit(function(node){
                  node.setSelected(true);
              });
              return false;
          }
          else {
              $(".tree-checkbox-toggle").fancytree("getTree").visit(function(node){
                  node.setSelected(false);
              });
              return false;
          }
      };
  
  
  
      // Advanced examples
      // ------------------------------
  
      //
      // Toggle state
      //
  
      // Initialize switchery toggle
      var switchery = document.querySelector('#tree-disabled');
      var init = new Switchery(switchery);
  
      // Do something on state change
      switchery.onchange = function() {
          if(switchery.checked) {
              $(".tree-toggle").fancytree("disable");
          }
          else {
              $(".tree-toggle").fancytree("enable");
          }
      };
  
      // Initialize
      $(".tree-toggle").fancytree({
          source: {
              url: "assets/demo_data/fancytree/fancytree.json"
          },
          init: function(event, data) {
              $('.has-tooltip .fancytree-title').tooltip();
          }
      });
  
  
      //
      // Sorting
      //
  
      // Initialize
      $(".tree-sorting").fancytree();
  
      // Sort tree
      $('.sort-tree').on('click', function() {
          var node = $(".tree-sorting").fancytree("getRootNode");
          node.sortChildren(null, true);
      });
  
      // Sort active nodes
      $('.sort-branch').on('click', function() {
          var node = $(".tree-sorting").fancytree("getActiveNode");
  
          // Custom compare function (optional) that sorts case insensitive
          var cmp = function(a, b) {
              a = a.title.toLowerCase();
              b = b.title.toLowerCase();
              return a > b ? 1 : a < b ? -1 : 0;
          };
          node.sortChildren(cmp, false);
      });
  
  
      //
      // Tree persistence
      //
  
      // Initialize
      $(".tree-persistence").fancytree({
          extensions: ["persist"],
          source: {
              url: "assets/demo_data/fancytree/fancytree.json"
          },
          checkbox: true,
          persist: {
              overrideSource: false, // true: cookie takes precedence over `source` data attributes.
              store: "auto" // 'cookie', 'local': use localStore, 'session': sessionStore
          },
          postProcess: function(event, data) {
              var prefix = data.node.getIndexHier() + ".";
              $.each(data.response, function(idx, childEntry) {
                  if( childEntry.key == null ) {
                      childEntry.key = prefix + (idx + 1);
                      childEntry.title += " (" + childEntry.key + ")";
                  }
              })
          }
      });
      var tree5 = $(".tree-persistence").fancytree("getTree");
  
      // Reset cookies on button click
      $('.reset-cookies').on('click', function() {
          tree5.clearCookies();
      });
  
  
      //
      // Table tree
      //
  
      $(".tree-table").fancytree({
          extensions: ["table"],
          checkbox: true,
          table: {
              indentation: 20,      // indent 20px per node level
              nodeColumnIdx: 2,     // render the node title into the 2nd column
              checkboxColumnIdx: 0  // render the checkboxes into the 1st column
          },
          source: {
              url: "assets/demo_data/fancytree/fancytree.json"
          },
          lazyLoad: function(event, data) {
              data.result = {url: "ajax-sub2.json"}
          },
          renderColumns: function(event, data) {
              var node = data.node,
              $tdList = $(node.tr).find(">td");
  
              // (index #0 is rendered by fancytree by adding the checkbox)
              $tdList.eq(1).text(node.getIndexHier()).addClass("alignRight");
  
              // (index #2 is rendered by fancytree)
              $tdList.eq(3).text(node.key);
              $tdList.eq(4).addClass('text-center').html("<input type='checkbox' class='styled' name='like' value='" + node.key + "'>");
  
              // Style checkboxes
              $(".styled").uniform({radioClass: 'choice'});
          }
      });
  
      // Handle custom checkbox clicks
      $(".tree-table").delegate("input[name=like]", "click", function (e){
          var node = $.ui.fancytree.getNode(e),
          $input = $(e.target);
          e.stopPropagation(); // prevent fancytree activate for this row
          if($input.is(":checked")){
              alert("like " + $input.val());
          }
          else{
              alert("dislike " + $input.val());
          }
      });
      
  });
  