$(document).ready(function() {

    //select all the a tag with name equal to modal
    $('.loginbtn').click(function(e) {

        //Cancel the link behavior
        e.preventDefault();

        //Get the A tag
        var id = '#loginpanel'

        //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-4 });

        //transition effect		
        $('.mask').fadeIn(200);
        $('.mask').fadeTo(0, 0.2);

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        $(id).css("position", "absolute");
        $(id).css("top", ($(window).height() - $(id).height()) / 2 + $(window).scrollTop() + "px");
        $(id).css("left", ($(window).width() - $(id).width()) / 2 + $(window).scrollLeft() + "px");

        //transition effect
        $(id).fadeIn(200);

    });

    //if mask is clicked
    $('.mask').click(function() {
        $(this).hide();
        $('.loginpanel').hide();
    });

});