HTMLWidgets.widget({

  name: 'grViz',

  type: 'output',

  initialize: function(el, width, height) {

    return {
      // TODO: add instance fields as required
    };
  },

  renderValue: function(el, x, instance) {
    //  Use this to sort of make our diagram responsive
    //  or at a minimum fit within the bounds set by htmlwidgets
    //  for the parent container
    function makeResponsive(el){
       var svg = el.getElementsByTagName("svg")[0];
       if (svg) {
        if (svg.width) {svg.removeAttribute("width")}
        if (svg.height) {svg.removeAttribute("height")}
        svg.style.width = "100%";
        svg.style.height = "100%";
       }
    }

    if (x.diagram !== "") {

      if (typeof x.config === "undefined"){
        x.config = {};
        x.config.engine = "dot";
        x.config.options = {};
      }

      try {

        el.innerHTML = Viz(x.diagram, format="svg", engine=x.config.engine, options=x.config.options);

        makeResponsive(el);

        if (HTMLWidgets.shinyMode) {
          // Get widget id
          var id = el.id;

          $("#" + id + " .node").click(function(e) {
            // Get node id
            var nodeid = e.currentTarget.id;
            // Get node text object and make an array
            var node_texts = $("#" + id + " #" + nodeid + " text");
            //var node_path = $("#" + nodeid + " path")[0];
            var text_array = node_texts.map(function() {return $(this).text(); }).toArray();
            // Build return object *obj* with node-id, node text values and node fill
            var obj = {
              id: nodeid,
              //fill: node_path.attributes.fill.nodeValue,
              //outerHMTL: node_path.outerHTML,
              nodeValues: text_array
            };
            // Send *obj* to Shiny's inputs (input$[id]+_click  e.g.: input$vtree_click))
            Shiny.setInputValue(id + "_click", obj, {priority: "event"});
          });
        }

        // set up a container for tasks to perform after completion
        //  one example would be add callbacks for event handling
        //  styling
        if (typeof x.tasks !== "undefined") {
          if ((typeof x.tasks.length === "undefined") ||
           (typeof x.tasks === "function")) {
             // handle a function not enclosed in array
             // should be able to remove once using jsonlite
             x.tasks = [x.tasks];
          }
          x.tasks.map(function(t){
            // for each tasks add it to the mermaid.tasks with el
            t.call(el);
          });
        }
      } catch(e){
        var p = document.createElement("pre");
        p.innerText = e;
        el.appendChild(p);
      }
    }

  },

  resize: function(el, width, height, instance) {
  }
});