var id;

$(document).ready(function() {
		$('a[name=modal]').click(function(e) {
			$('select').hide();
			//Cancel the link behavior
			e.preventDefault();		
			//Set id for content div position
			id = $(this).attr('href');
			//call rezize to position div dynamically in center of window
			doAction(id);
			//fade mask and content
			fadeMask(id);		

		});
		
		$('a[class=close]').click(function (e) {
			//Cancel the link behavior
			e.preventDefault();		
			$('#mask').hide();
			$('.window').hide();
			$('select').show();
		});	
		
		/*
		$('.window').click(function (e) {
			//Cancel the link behavior
			e.preventDefault();		
			$('#mask').hide();
			$('.window').hide();
			$('select').show();
		});
		*/
		
		//if mask is clicked
		$('#mask').click(function (e) {
			$(this).hide();
			$('.window').hide();
			$('select').show();
		});

	//on window re-size adjust div content position to middle of screen
	$(window).resize(function() { doAction(id); });
		
	function fadeMask(id){
			//transition effect		
			$('#mask').show();	
			$('#mask').fadeTo("fast",0.8);					
			//transition effect
			$(id).fadeIn(500); 
	}
	
	function doAction(id)
	{
				var browserType=navigator.userAgent.toLowerCase();

				var maskHeight = $(document).height();
				var maskWidth = $(window).width();
				var winH = $(window).height();
				var winW = $(window).width();
			
				//Set heigth and width to mask to fill up the whole screen
				$('#mask').css({'width':maskWidth,'height':maskHeight});
				
				if($('.window').innerHeight() >= (winH - 100)){$(id).css('top',  (winH/2-$(id).height()/2 - 15));}
				else{$(id).css('top',  winH/2-$(id).height()/2);}
				
				$(id).css('left', winW/2-$(id).width()/2);

				if(winH < 700 && $('.window').innerHeight() >= winH ){$('.window').css({position:'absolute'}); $(id).css('top',  2);}
				else if(browserType.indexOf("msie") == -1)
				{
					$('.window').css({position:'fixed'}); 
				}				
	}		
	
});