$(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
		var id = $(this).attr('href');
		openModalWindow(id);
	});



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

function openModalWindow(id) {

	//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(1000);
	$('#mask').fadeTo("slow",0.6);

	//Get the window height and width
	var winW = $(window).width();
	var page = $('.page').position();
	if (false&&$(id).height()>=$('.page').height()) {
		$(id).css('top',  page.top+'px');
	} else {
		$(id).css('top',  (page.top+($('.page').height()/2)-($(id).height()/2)-5)+'px');
	}

	//Set the popup window to center
	$(id).css('left', winW/2-$(id).width()/2);

	var last = $('.section',$(id)).length;
	if (last>=1) {
		$('.section',$(id)).eq((last-1)).after('<input type="button" class="close"/>');
		//if close button is clicked
		$('.window .close').click(function (e) {
			//Cancel the link behavior
			e.preventDefault();

			$('#mask').hide();
			$('.window').hide();
		});
	}

	//transition effect
	$(id).fadeIn(2000);
}
/*

                ___,,___
           _,-='=- =-  -`"--.__,,.._
        ,-;// /  - -       -   -= - "=.
      ,'///    -     -   -   =  - ==-=\`.
     |/// /  =    `. - =   == - =.=_,,._ `=/|
    ///    -   -    \  - - = ,ndDMHHMM/\b  \\
  ,' - / /        / /\ =  - /MM(,,._`YQMML  `|
 <_,=^Kkm / / / / ///H|wnWWdMKKK#""-;. `"0\  |
        `""QkmmmmmnWMMM\""WHMKKMM\   `--. \> \
 hjm          `""'  `->>>    ``WHMb,.    `-_<@)
                                `"QMM`.
                                   `>>>

 */