title: how to optimize this popup extension jquery code
body: <p>I have this code below - and am thinking maybe there is a way to make it more concise? I'm not an expert programmer so any help and pointers are appreciated.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; 
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; 
  &lt;head&gt; 
          &lt;title&gt;&lt;/title&gt; 
          &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt;     
          &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"&gt;&lt;/script&gt; 
  &lt;/head&gt; 
  &lt;script type="text/javascript"&gt; 
          $(document).ready(function() {
              ph      =   $('#popup').height();
              ot      =   $('#launcher').offset().top;
              ats     =   function(){return ot - $(document).scrollTop();}
              abs     =   function(){return ($(document).scrollTop() + $(window).height() ) - ot;}
              popPos  =   function(){
                              var ret = {};
                              if (abs() &lt;= ph) {
                                  ret.top = ( ot - ( ph - $('#launcher').height() ) )
                              } 
                              else {
                                  ret.top = ot
                              }
                              ret.left = $('#launcher').offset().left;
                              return ret;
                          }
              showPop =   function(){
                              $('#popup')
                                  .css(
                                      {
                                          'top'   :   popPos().top    + 'px',
                                          'left'  :   popPos().left   + 'px'
                                      }
                                  )
                                  .show()
                              ;
                          }
  
              $('body')
                  .click(
                      function(event){
                          if(event.target.id != 'launcher' ){
                              $('#popup')
                                  .hide()
                              ;
                          }
                          else {
                              if( $('#popup').is(':visible') ){
                                  $('#popup')
                                      .hide()
                                  ;
                              }
                              else {
                                  showPop();
                              }
                              window.getSelection().empty();
                          }
                      }
                  )
              ;
          }); 
  
  &lt;/script&gt; 
  &lt;style type="text/css"&gt; 
  html, body, #container {
      margin          :   0px;
      padding         :   0px;
      border          :   0px;
      width           :   100%;
      height          :   100%;
  }
  .scroll {
      margin          :   auto;
      overflow-y      :   auto;
      overflow-x      :   hidden;
  }
  .font {
      size            :   12px;
      line-height     :   14px;
      color           :   #000;
      text-align      :   left;
      font-family     :   'Arial', '_sans';
  }
  #launcher {
      border          :   1px solid #999;
      width           :   400px;
  }
  #popup {
      position        :   absolute;
      z-index         :   2;
      width           :   200px;
      height          :   300px;
      border          :   1px solid #900;
      padding         :   0px;
      margin          :   0px;
      background      :   #efefef;
      display         :   none;
  }
  &lt;/style&gt; 
  &lt;body&gt; 
  dfg&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;
  dfg&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;
  dfg&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;
  dfg&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;
  &lt;div id="launcher" class="x" style="margin-left:76px;"&gt;
      launch
  &lt;/div&gt; 
  dfg&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;
  dfg&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;
  dfg&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;
  dfg&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;
  dfg&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;
  dfg&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;
  dfg&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;
  dfg&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;
  dfg&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;
  dfg&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;
  dfg&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;
  dfg&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;dfg&lt;br/&gt;&lt;br/&gt;
   &lt;div id="popup" class="x"&gt;
      popup
  &lt;/div&gt; 
  
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>