Detecting Body Background Image Click with JQuery on a Drupal Zen Sub Theme

So the other day I needed to detect when someone clicks on the background image of my drupal zen sub theme. Here is how I did it using jquery:

$(document).ready( function() {
		
  $('body').click(function (e) {

    var page_width = $('div#page').width();
    if (page_width == null) { return; }
    if (document.getElementById("admin-menu") != null) { return; /* ignore body click event if admin menu present */ }
    var x_pos = e.pageX;
    var y_pos = e.pageY;
    var win_width = $(window).width();
    var doc_width = $(document).width();
    var position = $('div#page').position();
    
    // begin: helpful debug info
    var debug_info = "";
    debug_info += "left: " + position.left + ", ";
    debug_info += "top: " + position.top + " | ";
    debug_info += "x: " + x_pos + ", ";
    debug_info += "y: " + y_pos + ", ";
    debug_info += "window w: " + win_width + ", ";
    debug_info += "document w: " + doc_width;
    //alert(debug_info); // uncomment to see debug info
    // end
	
    if ($.browser.msie || $.browser.mozilla) {
      if (x_pos <= position.left || x_pos >= (position.left+page_width)) {
	alert('clicked on background image');
      }
    }
    else if ($.browser.webkit || $.browser.safari) {
      if (x_pos <= (win_width-page_width-x_pos) || win_width-x_pos <= (win_width-page_width)/2) {
	alert('clicked on background image');
      }
    }

  });
});

There is a conditional in the code above that prevents usage of the 'admin-menu' from triggering this event.

The separate logic for webkit/safari is used because zen fixed width layouts use an auto margin on the page div, which causes the x and y pos to be reported differently in webkit browsers.