function TPictureDialogLocationConfiguration()
{
	this.picture = '/image/picture.jpg';
	this.closeButton = '/image/close.png';
	this.progressIcon = '/image/progress.gif';
}

function TPictureDialogCssConfiguration()
{
	this.picture = 'pdPicture';
	this.pictureContainer = 'pdPictureContainer';
	this.mask = 'pdMask';
	this.progressIcon = 'pdProgressIcon';
	this.closeButton = 'pdCloseButton';
}

function TPictureDialog()
{
	//private

	var self = this;
	var container = null;
	var mask = null;
	var pictureContainer = null;
	var picture = null;
	var closeButton = null;
	var progressIcon = null;
	var eventSource = null;
	var ie = (document.all && window.showModalDialog?true:false);
	var opera = (window.opera?true:false);
	var zIndex = 2000;
	var complete = false;
	var fadingOut = false;
	var maskFadeSmoothness = 0;
	var maskOpacity = 0;
	var pictureContainerOpacity = 0;

	//to correct x and y value, IE cannot calculate offset correctly when using css margin, padding

	var alignmentOffsetX = (ie?-9:(opera?0:1));
	var alignmentOffsetY = (ie?1:(opera?0:1));

	function create()
	{
		if (ie)
		{
			//ie
			window.attachEvent('onresize', onResizeHandler);
		}
		else
		{
			//mozilla, opera, safari
			window.addEventListener('resize', onResizeHandler, false); 
		}
	}

	function onResizeHandler()
	{
		if (complete)
		{
			var scrollWidth = self.document.body.scrollWidth;
			if (!scrollWidth) { scrollWidth = self.document.documentElement.scrollWidth; }
	
			var scrollHeight = self.document.getElementById(self.outerSiteLayerID).offsetHeight;

			container.style.left = '0px';
			container.style.top = '0px';
			container.style.width = scrollWidth+'px';	
			container.style.height = scrollHeight+'px';

			var pictureContainerWidth = picture.width;
			var pictureContainerHeight = picture.height;

			pictureContainer.style.width = pictureContainerWidth+'px';
			pictureContainer.style.height = pictureContainerHeight+'px';

			var e = eventSource;
			var x = 0;
			var y = 0;
	
			//to correct x and y value, IE cannot calculate offset correctly when using css margin, padding
			var xOffset = (ie?10:0); 
			var yOffset = 0; 

			do
			{
				x += e.offsetLeft;
				y += e.offsetTop;
			
				e = e.offsetParent;
			}
			while (e);

			var originX = x-xOffset;
			var originY = y-yOffset;
		
			var x = (originX-Math.round(pictureContainerWidth/2));
			if (x < 0) { x = 0; };

			var y = (originY-Math.round(pictureContainerHeight/2));
			if (y < 0) { y = 0; };
			
			if (x+pictureContainerWidth+10 > scrollWidth) { x = scrollWidth-pictureContainerWidth-10; }
			if (y+pictureContainerHeight+10 > scrollHeight) { y = scrollHeight-pictureContainerHeight-10; }

			if (x < 0) { x = 0 };
			if (y < 0) { y = 0 };

			pictureContainer.style.left = x+'px';
			pictureContainer.style.top = y+'px';
		}
	}

	function setOpacity(element, percent)
	{
		if (ie)
		{
			element.style.filter = 'alpha(opacity='+percent+');'; 
		} else
		{
			element.style.opacity = percent / 100;
		}
	}

	function fadeIn()
	{
		if (!fadingOut)
		{
			maskOpacity += maskFadeSmoothness;

			setOpacity(mask, maskOpacity);

			pictureContainerOpacity += self.fadingSmoothness;

			if (pictureContainerOpacity < 100)
			{
				setOpacity(pictureContainer, pictureContainerOpacity);
				window.setTimeout(fadeIn, self.fadingSpeed);
			}
			else
			{
				pictureContainerOpacity = 100;

				setOpacity(pictureContainer, pictureContainerOpacity);
			}
		}
	}

	function fadeOut()
	{
		fadingOut = true;

		maskOpacity -= maskFadeSmoothness;

		setOpacity(mask, maskOpacity);

		pictureContainerOpacity -= self.fadingSmoothness;

		if (pictureContainerOpacity > 0)
		{
			setOpacity(pictureContainer, pictureContainerOpacity);
			window.setTimeout(fadeOut, self.fadingSpeed);
		}
		else
		{
			self.hide(null,true);
		}
	}

	function checkComplete()
	{
		if (picture.complete && picture.width > 0 && picture.height > 0)
		{
			maskOpacity = 0;
			pictureContainerOpacity = 0;
			maskFadeSmoothness = (self.maskOpacityDialog*self.fadingSmoothness/100); 

			setOpacity(mask, maskOpacity);
			setOpacity(pictureContainer, pictureContainerOpacity);

			pictureContainer.style.visibility = 'visible';
			progressIcon.style.visibility = 'hidden';

			complete = true;

			onResizeHandler();
	
			fadingOut = false;

			fadeIn();
		}
		else
		{
			window.setTimeout(checkComplete, 250);
		}
	}
	
	//public
	this.document = document;
	this.outerSiteLayerID = 'site';
	this.fadingSmoothness = 10; //the higher the less the fading smoothness
	this.fadingSpeed = 25; //the higher the slower the fading
	this.maskOpacityProgress = 50;
	this.maskOpacityDialog = 50;
	this.location = new TPictureDialogLocationConfiguration();
	this.css = new TPictureDialogCssConfiguration();

	this.hide = function(event, removeContainer)
	{
		if (!removeContainer)
		{
			fadeOut();
		}
		else
		{
			if (container.parentNode)
			{
				container.parentNode.removeChild(container);
			}
			complete = false;
		}		
	}

	this.show = function(pEvent)
	{
		if (pEvent)
		{
			complete = false;
			eventSource = (pEvent.srcElement?pEvent.srcElement:pEvent.target);

			if (!container)
			{
				container = this.document.createElement('div');
				container.style.position = 'absolute';
				container.style.zIndex = zIndex;
			}

			if (!mask)
			{
				mask = this.document.createElement('div');
				mask.className = this.css.mask;

				container.appendChild(mask);
			}

			if (!progressIcon)
			{
				progressIcon = this.document.createElement('img');
				progressIcon.src = this.location.progressIcon;
				progressIcon.className = this.css.progressIcon;

				mask.appendChild(progressIcon);
			}

			if (!pictureContainer)
			{
				pictureContainer = this.document.createElement('div');
				pictureContainer.className = this.css.pictureContainer;

				container.appendChild(pictureContainer);
			}

			if (!closeButton)
			{
				closeButton = this.document.createElement('img');
				closeButton.onclick = this.hide;
				closeButton.src = this.location.closeButton;
				closeButton.className = this.css.closeButton;

				pictureContainer.appendChild(closeButton);
			}

			if (picture)
			{
				picture.parentNode.removeChild(picture);
				picture = null;
			}
			

			picture = this.document.createElement('img'); 
			picture.onclick = this.hide;
			picture.src = this.location.picture;
			picture.className = this.css.picture;

			pictureContainer.appendChild(picture);

			if (eventSource.tagName.toLowerCase() == 'img')
			{
				//show event source progress overlay
				pictureContainer.style.visibility = 'hidden';
				progressIcon.style.visibility = 'visible';

				var e = eventSource;
				var x = 0;
				var y = 0;

				do
				{
					x += e.offsetLeft;
					y += e.offsetTop;
			
					e = e.offsetParent;
				}
				while (e);

				container.style.left = (x+alignmentOffsetX)+'px';
				container.style.top = (y+alignmentOffsetY)+'px';
				container.style.width = eventSource.width+'px';
				container.style.height = eventSource.height+'px';

				setOpacity(mask, this.maskOpacityProgress);
			}

			this.document.body.appendChild(container);
			
			checkComplete();
		}
	}

	create();
}