<script src="componentes/talento-humano/recursos/js/go.js"></script>
<div id="myDiagramDiv" style="border: solid 1px black; height: 600px"></div>
<script type="text/javascript" >
var JsonNodo = { 
    "class": "go.TreeModel", 
    "nodeDataArray": [
{% for Cargo in Cargos %}
{
    "key":{{Cargo.cargoID}}, 
    "parent":{{Cargo.cargoPADRE}},
    "responsable":"{{Cargo.Encargado.colaboradorEMAIL}}", 
    "cargo":"{{Cargo.cargoTITULO}}", 
    "foto": "{{Cargo.Encargado.colaboradorFOTO}}"
    
},
{% endfor %}
     ]
};
function init() {
if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
var $ = go.GraphObject.make;  // for conciseness in defining templates

myDiagram =
  $(go.Diagram, "myDiagramDiv", // must be the ID or reference to div
    {
      initialContentAlignment: go.Spot.Center,
      maxSelectionCount: 1, // users can select only one part at a time
      validCycle: go.Diagram.CycleDestinationTree, // make sure users can only create trees
      layout:
        $(go.TreeLayout,
          {
            treeStyle: go.TreeLayout.StyleLastParents,
            arrangement: go.TreeLayout.ArrangementHorizontal,
            // properties for most of the tree:
            angle: 90,
            layerSpacing: 78,
            // properties for the "last parents":
            alternateAngle: 90,
            alternateLayerSpacing: 78,
            alternateAlignment: go.TreeLayout.AlignmentBus,
            alternateNodeSpacing: 78
          }),
      "undoManager.isEnabled": true // enable undo & redo
    });


var levelColors = ["#BEB2FF", "#927fff", "#7c66ff", "#664cff",
                   "#5133ff", "#3b19ff", "#2100e5", "#2500ff"];
myDiagram.layout.commitNodes = function() {
  go.TreeLayout.prototype.commitNodes.call(myDiagram.layout);  // do the standard behavior
  // then go through all of the vertexes and set their corresponding node's Shape.fill
  // to a brush dependent on the TreeVertex.level value
  myDiagram.layout.network.vertexes.each(function(v) {
    if (v.node) {
      var level = v.level % (levelColors.length);
      var color = levelColors[level];
      var shape = v.node.findObject("SHAPE");
      if (shape) shape.fill = $(go.Brush, "Linear", { 0: color, 1: go.Brush.lightenBy(color, 0.05), start: go.Spot.Left, end: go.Spot.Right });
    }
  });
};

function textStyle() {
  return { font: "9pt  Segoe UI,sans-serif", stroke: "white" };
}
function fotoColaborador(foto) {
    if( foto)
        return foto
    return 'archivo/colaboradores/fotos/sin-foto.png';
}


myDiagram.nodeTemplate =
 $(go.Node, "Auto",
     // define the node's outer shape
     $(go.Shape, "Rectangle", {
         name: "SHAPE",
         fill: "white",
         stroke: null,
         cursor: "pointer"
     }),
     $(go.Panel, "Horizontal",
         $(go.Picture, {
                 name: "Picture",
                 desiredSize: new go.Size(39, 50),
                 margin: new go.Margin(6, 8, 6, 10),
             },
             new go.Binding("source", "foto", fotoColaborador)
        ),
         $(go.Panel, "Table", {
                 maxSize: new go.Size(150, 999),
                 margin: new go.Margin(6, 10, 0, 3),
                 defaultAlignment: go.Spot.Left
             },
             $(go.RowColumnDefinition, {
                 column: 2,
                 width: 4
             }),
             
             $(go.TextBlock, textStyle(), // the name
                {
                     row: 0,
                     column: 0,
                     columnSpan: 5,
                     font: "11pt Segoe UI,sans-serif",
                     editable: true,
                     isMultiline: false,
                     minSize: new go.Size(10, 16)
                 },
                 new go.Binding("text", "cargo").makeTwoWay()
            ),
            
            
            $(go.TextBlock, textStyle(), 
                {
                     row: 1,
                     column: 0,
                     columnSpan: 5,
                     editable: true,
                     isMultiline: false,
                     minSize: new go.Size(10, 14),
                     margin: new go.Margin(0, 0, 0, 3)
                },
                new go.Binding("text", "responsable").makeTwoWay()
            ),
            $(go.TextBlock, textStyle(), // the comments
                {
                     row: 3,
                     column: 0,
                     columnSpan: 5,
                     font: "italic 9pt sans-serif",
                     wrap: go.TextBlock.WrapFit,
                     editable: true, // by default newlines are allowed
                     minSize: new go.Size(10, 14)
                },
                new go.Binding("text", "cedula").makeTwoWay()
            )
         ) // end Table Panel
     ) // end Horizontal Panel
 ); // end Node




myDiagram.linkTemplate =
  $(go.Link, go.Link.Orthogonal,
    { corner: 5, relinkableFrom: true, relinkableTo: true },
    $(go.Shape, { strokeWidth: 4, stroke: "#00a4a4" }));  // the link shape

// read in the JSON-format data from the "mySavedModel" element
myDiagram.model = go.Model.fromJson(JsonNodo);
}
init();
</script>