$(document).ready(function() {  

  //if close button is clicked
  $('.window .close').click(function (e) {
    //Cancel the link behavior
    e.preventDefault();
    
    $('#mask').fadeOut(100);
    $('.window').fadeOut(200);
  });    
});

$(document).keyup(function(e) {
  if (e.which == 27) {
    $('#mask').fadeOut(100);
    $('.window').fadeOut(200);
  }
});

function openModalPanel(modalId, topSize) {
  if (topSize == null) {
  	topSize = 150;
  }
  //Cancel the link behavior
  //e.preventDefault();
      
  //Get the A tag
  //var id = $(this).attr('href');
  var id = modalId;
    
  //Get the screen height and width
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();
    
  //Set heigth and width to mask to fill up the whole screen
  $('#mask').css({'width':maskWidth,'height':maskHeight});
      
  //transition effect    
  $('#mask').fadeIn(100).fadeTo("fast",0.3);
    
  //Get the window height and width
  var winH = $(window).height();
  var winW = $(window).width();
                
  //Set the popup window to center
  $(id).css('top',  topSize);
  $(id).css('left', winW/2-$(id).width()/2);
    
  //transition effect
  $(id).fadeIn(100); 
};


function closeModalPanel(modalId) {
  //e.preventDefault();
  $('#mask').fadeOut(100);
  $('.window').fadeOut(200);
};