// This is an example Chaism plugin that uses <img> tags to display images.
function Image() {

  var my = ChiasmComponent({
    url: "http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg"
  });

  my.el = document.createElement("div");

  var img = d3.select(my.el)
      .style("background-color", "white")
    .append("img")
      .style("max-height", "100%")
      .style("max-width", "100%")
      .style("display", "block")
      .style("margin", "auto");

  my.when("url", function (url){
    img.attr("src", url);
  });
  
  // When the size of the visualization is set
  // by the chiasm layout engine,
  my.when("box", function (box) {

    // Set the size of the SVG.
    d3.select(my.el)
      .style("width", box.width + "px")
      .style("height", box.height + "px");

  });
  return my;
}