var core = {
	
	Modal : function() {
		jQuery(document).ready(function(){
			//select all the a tag with name equal to modal
			$('a[class~=modal]').click(function(e) {
				//Cancel the link behavior
				e.preventDefault();
				//Get the A tag
				var id = $(this).attr('href');
			 
				//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').fadeTo(400, 0.3); 
			 					   
				//Set the modal position
				if($(id).height() > $(window).height()) {
					$(id).css({
						'top': '20px',
						'margin-left': -($(id).width() / 2)
					});
				}else {
					$(id).css({
						'top': '50%',
						'margin-top': -($(id).height() / 2),
						'margin-left': -($(id).width() / 2)
					});
				}
							 
				//transition effect
				$(id).fadeIn(400);
			 
			});
		 
			//if close button is clicked
			$('.window .close').click(function(e) {
				//Cancel the link behavior
				e.preventDefault();
				$('#mask').fadeOut(200);
				$('.window').fadeOut(200);
			});    
			 
			//if mask is clicked
			$('#mask').click(function () {
				$(this).fadeOut(200);
				$('.window').fadeOut(200);
			});
		});
	}
	
}// End main function

jQuery(function($) {
	if($("#modals").length){ core.Modal(); }
});