toggle the visibility of a grid to aid setting the vertical rhythm

grid_overlay.js

// depends on prototype and http://mislav.uniqpath.com/js/c-is-for-cookie/

document.observe('dom:loaded', function() {
  var gridOverlay = $('grid-overlay')
  if (!gridOverlay) return
  if (Cookie.get('gridOverlay') == "true") gridOverlay.show()

  var toggleGrid = function() {
    var visible = this.toggle().visible()
    Cookie.set('gridOverlay', visible, { path: '/' })
  }
  
  var toggle = new Element('div', { id: 'grid-overlay-toggle' }).update('grid')
  toggle.observe('click', toggleGrid.bindAsEventListener(gridOverlay))
  gridOverlay.insert({ after: toggle })

  // toggle the grid by pressing "G"
  document.observe('keyup', function(ev) {
    if (ev.keyCode == 71) toggleGrid.bind(gridOverlay)()
  })
})

markup.html

<div id="grid-overlay" style="display: none;"/>

overlay.sass

#grid-overlay
  :position absolute
  :top 0
  :left 0
  :width 100%
  :height 100%
  :background url('/images/h21.gif') 0 14px
#grid-overlay-toggle
  :position absolute
  :bottom 4px
  :right 14px
  :font-size 8px
  :cursor pointer