ESRI JS Dynamic measure draw

Show dynamic measure while drawing graphics. LatLong for points; distance for Lines; Perimeter and Area for Polys.

HTML

<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.10/"></script>

<body class="nihilo">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      <button data-dojo-type="dijit/form/Button">Point</button>
      <button data-dojo-type="dijit/form/Button">Multi Point</button>
      <button data-dojo-type="dijit/form/Button">Polyline</button>
      <button data-dojo-type="dijit/form/Button">Polygon</button>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      <div id="floatInfo"> <span id="Seggy">Info 1</span>
        <span id="Totty"> Info 2</span>

      </div>
    </div>
  </div>
</body>

CSS

html,
body,
#mainWindow {
  font-family: sans-serif;
  height: 100%;
  width: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
}

#header {
  height: 30px;
  overflow: auto;
  padding: 0.5em;
}

#floatInfo {
  display: block;
  z-index: 3;
  position: absolute;
  right: 15px;
  top: 5px;
  background-color: rgba(255, 255, 255, .5)
}

JavaScript

//To self: Careful when adding events with ON and where/when you disconnect events!

require([
  "esri/map", "esri/toolbars/draw", "esri/graphic", "esri/tasks/DistanceParameters", "esri/tasks/AreasAndLengthsParameters",
  "esri/tasks/GeometryService", "esri/geometry/Polygon", "esri/geometry/webMercatorUtils", "esri/SpatialReference",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "dojo/parser", "dijit/registry", "dojo/dom",
  "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
  "dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"
], function(
  Map, Draw, Graphic, DistanceParameters, AreasAndLengthsParameters, GeometryService, Polygon, webMercatorUtils,
  SpatialReference, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
  parser, registry, dom) {

  var map, toolbar, symbol, geomTask;
  var geometryService;
  var eventsLoaded = 0; //Keep track of loaded DOM events

  parser.parse();
  map = new Map("map", {
    basemap: "streets",
    center: [-80.230, 43.508],
    zoom: 12
  });

  map.on("load", createToolbar);
  registry.forEach(function(d) {
    // d is a reference to dijits
    if (d.declaredClass === "dijit.form.Button") {
      d.on("click", activateTool);
    }
  });

  function activateTool() {
    clickedPointsArr = [];
    dom.byId('Seggy').innerHTML = "";
    dom.byId('Totty').innerHTML = "";
    var tool = this.label.toUpperCase().replace(/ /g, "_");
    if (eventsLoaded != 0) {
      unloadCurrentEvent(eventsLoaded);
    }

    if (tool == "POINT" || tool == "MULTI_POINT") {
      //use variable pointMouseEvt so we can disable later
      pointMouseEvt = map.on("mouse-move", function(evt) {
        var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
        dom.byId('Seggy').innerHTML = "x: " + mp.x.toFixed(3) + "  ";
        dom.byId('Totty').innerHTML = "y: " + mp.y.toFixed(3);
      });
      eventsLoaded = 1;
    } else if (tool == "POLYLINE" || tool ==...