     @$box = $('<div>').css
       position   : 'absolute'
       background : 'rgba(255,255,255,0.8)'
-      color      : '#999'
+      color      : '#666'
       fontFamily : '"Helvetica Neue", sans-serif'
+      fontSize   : '13px'
       zIndex     : 99999
       top        : bbox.top
       left       : bbox.left


# Show the Xray overlay
Xray.show = ->
  console.log 'X-raying'
  Xray.Overlay.instance().show()

# Hide the Xray overlay
Xray.hide = ->
  console.log 'Hiding X-ray'
  Xray.Overlay.instance().hide()

# Wraps a DOM element that Xray is tracking
class Xray.Element
  constructor: (el, @attrs = {}) ->
    @el = if el instanceof jQuery then el[0] else el
    @$el = $(el)
    @name = @attrs.name
    @path = @attrs.path

  isVisible: ->
    @$el.is(':visible')

# 1. Xray metadata code is inserted during asset compilation.
#    a. For Backbone.Views, JS is inserted that will record the Backbone.View
#       constructor with its metadata in window.XrayData
#    b. For templates, HTML comments are inserted at the beginning and the end
#       of the template.
#
# 2. After DOM is loaded, go through XrayData, hooking into Backbone.View to
