﻿function displayImage(url, title)
     {
		imageHolder = $("#imageHolder");
		
		if (imageHolder.attr('src') == url)
		{
			imageHolder.load();
			return;
		}

		if(!imageHolder.length)
		{
			imageHolder = $("<img id='imageHolder' style='display: none'/>");
			$("body").append(imageHolder);
			imageHolder.load(function() 
			{
				imgWidth = imageHolder.width();
				imgHeight = imageHolder.height();
				screenHeight = $(window).height();
				if(imgHeight > (screenHeight - 75))
				{
					ratio = imgHeight/(screenHeight - 75);
					imgHeight = imgHeight / ratio;
					imgWidth = imgWidth / ratio;
				}
			
				modalImage = $("<img />");
				$(modalImage).attr('alt', imageHolder.attr('alt'));
				$(modalImage).attr('src', imageHolder.attr('src'));
				
				$("<div id='displayImageModalDialog'></div>").append($(modalImage)).dialog({
					modal: true,
					resizable: false,
					title: imageHolder.attr('alt'),
					width: imgWidth + 40,
					draggable: false,
					autoOpen: false,
					close: function(event, ui)
					{
						$("#displayImageModalDialog").remove();
					}
				});
				
				$(modalImage).attr('width', Math.round(imgWidth));
				$(modalImage).attr('height', Math.round(imgHeight));
				$("#displayImageModalDialog").dialog('open');
				$(".ui-widget-overlay").click(function() {
					$("#displayImageModalDialog").dialog('close');					
				});
			});
		}
		
		imageHolder.attr('alt', title);
		imageHolder.attr('src', url);
     }
