function open_modal(id) {
   
      //Get the screen height and width
      var maskHeight = $(document).height();
      //var maskWidth = $(window).width();
      var maskWidth = $(document).width();
   
      //Set heigth and width to mask to fill up the whole screen
      $('#mask').css({'width':maskWidth,'height':maskHeight});
      
      //transition effect     
      $('#mask').fadeIn(1000);   
      $('#mask').fadeTo("slow",0.8);   
   
      //Get the window height and width
      var winH = $(window).height();
      var winW = $(window).width();
              
      //Set the popup window to center
      $(id).css('top',  winH/2-$(id).height()/2);
      $(id).css('left', winW/2-$(id).width()/2);
   
      //transition effect
      $(id).fadeIn(2000); 
      
}

function hide_dialog() {
   //transition effect
   $('#mask').fadeOut(500); 
   $('.dialog').hide();
   // we need this or else there will be problems with width and height when opening once more the same dialog
   $('.dialog').css('top',  0);
   $('.dialog').css('left', 0);
}

$(document).ready(function() {   

   //select all the a tag with name equal to modal
   $('a[name=modal]').click(function (e) {
      //Cancel the link behavior
      e.preventDefault();
      
   });
   
   $('div.help-button').click(function (e) {
      //Get the A tag
      var id = $(this).children(':first').attr('href');
      
      open_modal(id);
   });
   
   //if close button is clicked
   $('.dialog .close').click(function () {
      hide_dialog();
   });
   
   //if mask is clicked
   $('#mask').click(function () {
      hide_dialog();
   });
   
});