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

# Created by Robert Xue on 1/18/15.
bang = {}
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")
  navigatorRow = 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")
  renderResult 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", "resultPanel")
  renderNavigator navigatorRow.append("div").attr("class", "col-lg-12 col-md-12 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()

  """

renderResponse = (root)->
  header = root.append("div").attr("class", "panel-heading").html("Response from <code>#{bangUri}</code> stored into bang")
  root.append("div").attr("class", "panel-body").append("pre").text(JSON.stringify(bang, null, 4))

renderQuery = (root)->
  root.append("div").attr("class", "panel-heading").text("Query")
  renderQueryForm root.append("div").attr("class", "panel-body")

renderNavigator = (root)->
  root.append("div").attr("class", "panel-heading").text("Response Navigator")
  panelBody = root.append("div").attr("class", "panel-body")
  panelBody.append("ul").attr("class", "breadcrumb")
  panelBody.append("div").attr("class", "form-inline")
  panelBody.append("pre").style("display", "none")
  root.append("ul").attr("class", "list-group")
  root.append("table").attr("class", "table")
  updateNavigator ["bang"]

didRunQuery = ->
  query = $("#query").val()
  navigator = d3.select("#navigatorPanel .breadcrumb").text ""
  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").style("display", "none").text ""
  { error, result } = runQuery query
  if error
    codeBlock.text error
  else
    queryResult = result
    updateNavigator ["queryResult"]

runQuery = (query, options)->
  try
    unless options and options.silent
      $("#query").val query
    result = eval query
    if result is undefined
      return {error: "(undefined)"}
    else
      return {result}
  catch ex
    return {error: ex}

updateNavigator = (path)->
