function showModal(element) {

    var id = $(element).attr('href');  

    if ( id.charAt(0) != '#' ) { // not an id, a url for Ajax

      $.get(id, function(data) {
        id = $(element).attr('id') + "__modal__";
        var e = $('#'+id);
        if ( e.length == 0 ) {
          $(document.body).append($('<div id="'+id+'" class="window">').html(data));
        } else {
          $(e.children()[0]).replaceWith(data); //FIXME: gotta be better syntax?
        }
        $(document).trigger('ready');
        completeShowModal('#' + id);
      });
    } else {
        completeShowModal(id);
    }
}

function completeShowModal(id) {

    //Get the screen height and width  
    var maskHeight = $(document).height();  
    var maskWidth = $(window).width();  
  
    //Set height 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.5);    
  
    //Get the window height and width  
    var winH = $(window).height();  
    var winW = $(window).width();  

    //Set the popup window to center  
    var top = winH/2-$(id).height()/2;  
    if ( top < 0 )
      top = 0;

    $(id).css('top',  top);
    $(id).css('left', winW/2-$(id).width()/2);  
  
    //transition effect  
    $(id).fadeIn(2000);   
  
    // scroll to top
    $('html, body').animate({scrollTop:0}, 'slow');
}

$(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();  
        //Get the A tag  
        
        showModal(this);
    });  
      
    //if close button is clicked  
    $('.window .close').click(function (e) {  
        //Cancel the link behavior  
        e.preventDefault();  
        $('#mask, .window').hide();  
    });   
      
});