(function($){
      $.fn.grid = function() {
          return this.each(function(){
              var self = $(this),
                  hGrid = $('<div></div>'),
                  vGrid = $('<div></div>');
  
              $.each([hGrid, vGrid], function(){
                  this.css({
                      position: 'absolute',
                      top: 0,
                      right: 0,
                      bottom: 0,
                      left: 0,
                      opacity: 0.5,
                      zIndex: 100
                  });
                  self.prepend(this);
              })
  
              $(document).keydown(function(e){
                  if ($(e.target).is("input")) return;
                  var hKey = 72, vKey = 86;
                  if (e.shiftKey) switch(e.keyCode) {
                    case hKey:
                      if (hGrid.data("grid") == undefined) {
                        hGrid
                          .css("background-image", "url(images/grid/h-grid-16.png)")
                          .data("grid", "16");
                        self.show();
                      }
                      else if (hGrid.data("grid") == "16") {
                        hGrid
                          .css("background-image", "url(images/grid/h-grid-4.png)")
                          .data("grid", "4");
                        self.show();
                      } else if (hGrid.data("grid") == "4") {
                        hGrid
                          .css("background-image", "url(images/grid/h-grid-1.png)")
                          .data("grid", "1");
                        self.show();
                      } else {
                        hGrid.removeData("grid");
                        self.hide();
                      }
                      break;
                    case vKey:
                      // TODO
                      break;
                  }
              });
          });
      }
  })(jQuery);