var inProc = false;
var justClick = false;
$(document).ready(function() {	
	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		inProc = true;
		e.preventDefault();
		var id = "#dialog";
		var maskHeight = Math.max($(document).height(),$(window).height());
		var maskWidth = Math.max($(document).width(),$(window).width());
		$('#mask').css({
			'width':maskWidth,
			'height':maskHeight,
			'top':0,
			'left':0,
			"opacity":0.8,
			"filter":"alpha(opacity=80)",
			"zoom":1
		}).fadeIn(500);
		
		imgzoom = $("#zoomImg");
		imgref = this.getAttribute('href');
		
		$("#loadStatus").show();
		imgzoom.hide();
		
		var winH = $(window).height();
		var winW = $(window).width();
		//Set the popup window to center
		$(id).css({
			'width': 160,
			'height': 34,
			'top':  (winH - 34)/2 + $(document).scrollTop(),
			'left': (winW - 160)/2 + $(document).scrollLeft()
		});
		
		//transition effect
		$(id).fadeIn(500,function(){
			inProc = false;
			justClick = true;
			imgzoom.attr('src',imgref);
		});
		imgzoom.load(function(){
			if(!inProc && justClick){
				inProc = true;
				//Get the window height and width
				var winH = $(window).height();
				var winW = $(window).width();
				
				$("#loadStatus").hide();
				//transition effect
				$(id).animate({
					'top': (winH-imgzoom.height()-10)/2 + $(document).scrollTop(),
					'left': (winW-imgzoom.width()-10)/2 + $(document).scrollLeft(),
					'width': imgzoom.width() + 10,
					'height': imgzoom.height() + 10
				},500,"",function(){
					inProc = false;
					imgzoom.show();
					$(window).scroll(function(){
						$(id).css({
							'top': (winH-imgzoom.height()-10)/2 + $(document).scrollTop(),
							'left': (winW-imgzoom.width()-10)/2 + $(document).scrollLeft()
						});
					});
				});
			}
		});
	});
	
	//if mask is clicked
	$('#mask').click(function () {
		if(!inProc){
			$(this).hide();
			$('.window').hide();
			justClick = false;
			$("#zoomImg").attr('src','');
			$(window).unbind('scroll');
		}
	});
});