   arrayNavigatior = d3.select("#navigatorPanel .form-inline").text ""
   autocomplete = d3.select("#navigatorPanel .list-group").text ""
   autocompleteTable = d3.select("#navigatorPanel table").text ""
-  codeBlock = d3.select("#navigatorPanel pre").text ""
+  codeBlock = d3.select("#navigatorPanel pre").style("display", "none").text ""
   query = getQueryFromPath path
   console.log "Update Navigator", path, query
-  {error, result} = runQuery query
+  {error, result} = runQuery query, {silent: true}
   return navigator.text JSON.stringify(error, null, 4) if error
   navigator.selectAll("li").data(path).enter().append("li").each (pathFragment, i)->
-    if i is path.length - 1
-      d3.select(this).attr("class", "active").text(pathFragment)
-    else
-      d3.select(this).append("a").attr("href", "#").text(pathFragment).on "click", (currentPathFragment)->
-        console.log path, i
+    d3.select(this).append("a").attr("href", "#").text(pathFragment).on "click", (currentPathFragment)->
+      d3.event.preventDefault()
+      if node = pathFragment.match(/^(.*)\[(\d+)]$/)
+        updateNavigator path.slice(0, i).concat node[1] + "[]"
+      else
         updateNavigator path.slice(0, i + 1)
   if result instanceof Array
     arrayNavigatior.append("div").attr("class", "form-group").html """
-    <label for='arrayIndex'>Name</label>
+    <label for='arrayIndex'>Index (0 - #{result.length-1})</label>
     <input type='number' class='form-control' id='arrayIndex' value='0' min='0' max='#{result.length-1}'>
     """
     arrayNavigatior.append("button").attr("type", "submit").attr("class", "btn btn-default").text("Go")
     .on("click", ->
       d3.event.preventDefault()
       arrayIndex = $("#arrayIndex").val()
-      node = path[path.length - 1].match /(\w*)\[(\d*)]$/
-      updateNavigator path.slice(0, path.length - 1).concat node[1] + "[#{arrayIndex}]"
+      node = path[path.length - 1].match(/^(.*)\[(\d*)]$/)
+      pathFragment = if node then node[1] else path[path.length - 1]
+      updateNavigator path.slice(0, path.length - 1).concat pathFragment + "[#{arrayIndex}]"
     )
   else if result instanceof Object
     autocomplete.selectAll("li").data(Object.keys(result)).enter()
-    .append("li").attr("class", "list-group-item").append("a").attr("href", "#").text((key)-> getPathFragmentForKey(result, key))
-    .on("click", (key, i)->
-      d3.event.preventDefault()
-      pathFragment = getPathFragmentForKey result, key
-      updateNavigator path.concat(pathFragment)
-    )
+    .append("li").attr("class", "list-group-item").each (key)->
+      if not (result[key] instanceof Array or result[key] instanceof Object)
+        d3.select(this).append("span").text key
+        d3.select(this).append("span").attr("class", "pull-right").text result[key]
+      else
+        pathFragment = getPathFragmentForKey(result, key)
+        d3.select(this).append("a").attr("href", "#").text(pathFragment)
+        .on("click", ->
+          d3.event.preventDefault()
+          updateNavigator path.concat(pathFragment)
+        )
   else
-    codeBlock.text JSON.stringify(result, null, 4)
+    codeBlock.style("display", null).text JSON.stringify(result, null, 4)
 
 getQueryFromPath = (path)->
   query = path.reduce ((pv, cv, index, array)->
     if index isnt 0
       pv += "."
-    if node = cv.match /(\w*)#$/
-      pv += node[1]
-    else if node = cv.match /(\w*)\[(\d*)]$/
+    if node = cv.match /^(.*)\[(\d*)]$/
+      console.log node
       pv += node[1]
       pv += "[#{node[2]}]" if node[2]
       pv

  </div>
</div>
""")
  if bang.data instanceof Array
    $("#query").val("_.size(bang.dat)")
  else
    $("#query").val("_.keys(bang.data)")

  $("#runQuery").click didRunQuery


# Created by Robert Xue on 1/18/15.
bang = null
bangUri = null
queryResult = null
render = ->
  console.log "Bang will make your life with JSON easier!"
  root = d3.select("body").text("").append("div").attr("class", "container")
  renderHeader root.append("div").attr("class", "navbar navbar-default")
  queryRow = root.append("div").attr("class", "row")
  responseRow = root.append("div").attr("class", "row")
  renderQuery queryRow.append("div").attr("class", "col-lg-6 col-md-6 col-sm-12 col-xs-12").append("div").attr("class", "panel panel-default").attr("id", "queryPanel")
  renderNavigator queryRow.append("div").attr("class", "col-lg-6 col-md-6 col-sm-12 col-xs-12").append("div").attr("class", "panel panel-success").attr("id", "navigatorPanel")
  renderResponse responseRow.append("div").attr("class", "col-lg-12 col-md-12 col-sm-12 col-xs-12").append("div").attr("class", "panel panel-success")
  $(".panel-heading").css({cursor: "pointer", "word-break": "break-all"}).click (ev)->
    $(ev.currentTarget).siblings(".panel-body").toggle()
