//additional properties for jQuery object
jQuery(document).ready(function(){
   //align element in the middle of the screen
   jQuery.fn.alignCenter = function() {
      //get margin left
      var marginLeft =  - jQuery(this).width()/2 + 'px';
      //get margin top
      var marginTop =  - jQuery(this).height()/2 + 'px';
      //return updated element
      return jQuery(this).css({'margin-left':marginLeft, 'margin-top':marginTop});
   };

   jQuery.fn.togglePopup = function(){
     //detect whether popup is visible or not
     if(jQuery('#popup').hasClass('hidden'))
     {
       //hidden - then display
       //when IE - fade immediately
       if(jQuery.browser.msie)
       {
         jQuery('#opaco').height(jQuery(document).height()).toggleClass('hidden')
                    .click(function(){jQuery(this).togglePopup();});
       }
       else
       //in all the rest browsers - fade slowly
       {
         jQuery('#opaco').height(jQuery(document).height()).toggleClass('hidden').fadeTo('fast', 0.6)
                    .click(function(){jQuery(this).togglePopup();});
       }

       jQuery('#popup')
         .html(jQuery(this).html())
         .alignCenter()
         .toggleClass('hidden');
     }
     else
     {
       //visible - then hide
       jQuery('#opaco').toggleClass('hidden').removeAttr('style').unbind('click');
       jQuery('#popup').toggleClass('hidden');
     }
   };
});