var openWindowId = '';
	var imageWindowWidth = 840;
	var imageWindowHeight = 657;
	var images = new Array();
	var descriptions = new Array();
	var imageTitles = new Array();
	var imageIndex = 0;
	var image;
	
	//-------------------------------------------------------------------------
	// Show the image window
	function ShowImageWindow(imageUrl)
	//-------------------------------------------------------------------------
	{
		imageIndex = GetImageIndex(imageUrl);	
		
		openWindowId = 'largeImageWindow';	
		GrayOut(true);
		//HideById('largeImageWindowPrev');
		//HideById('largeImageWindowNext');
		CenterWindow(openWindowId);
		ShowById(openWindowId);
		ShowImage();
	}
	
	//-------------------------------------------------------------------------
	function GetImageIndex(imageUrl)
	//-------------------------------------------------------------------------
	{
		var index = 0;
		for(var i=0; i<images.length; i++)
		{
			if (images[i] == imageUrl)
			{
				index = i;
			}
		}

		return index;
	}
	
	//-------------------------------------------------------------------------
	// Change the height to be displayed in the middle.
	function CenterWindow(elementId)
	//-------------------------------------------------------------------------
	{
		var window = GetObject(elementId);
		var windowWidth = 1280;
		var windowHeight = 1024;
		
		if (window.innerHeight)
		{
			windowWidth = window.innerWidth;
			windowHeight = window.innerHeight;
		}
		else
		{
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		}
		
		//alert(windowWidth + "x" + windowHeight);
		
		window.style.top = (windowHeight - imageWindowHeight ) / 2  + 'px';
		//window.style.left = (windowWidth - imageWindowWidth ) / 2 + 'px';		
	}
		
	//-------------------------------------------------------------------------
	// Hide Window.
	function HideWindow()
	//-------------------------------------------------------------------------
	{
		if (openWindowId != '')
		{
			HideById(openWindowId);
		}
		GrayOut(false);
	}
	
	//-------------------------------------------------------------------------
	// Load and show image
	function ShowImage()
	//-------------------------------------------------------------------------
	{
		openWindowId = 'largeImageWindow';

		image = new Image();
		image.onload = RepositionImageAndText;
		image.src = images[imageIndex];	
	}
	
	//-------------------------------------------------------------------------
	// Center the image in the middel of the window with a little negative margin
	// to the top to have enough space for the comment
	function RepositionImageAndText()
	//-------------------------------------------------------------------------
	{
		var largeImg = GetObject('largeImageWindowImg');
		var container = GetObject('largeImageWindowContainer');
		var descrDiv = GetObject('largeImageWindowDescr');
		
		// Position image to the center
		var height = image.height;
		var width = image.width;
		
		var top = (imageWindowHeight - height ) /2 - 17;
		var left = (imageWindowWidth - width ) /2 - 4;
		
		container.style.top = top  + 'px';
		container.style.left =  left+ 'px';
		
		//descrDiv.style.top = top + height + 15 + 'px';
		
		largeImg.src = image.src;		
		
		SetText(imageTitles[imageIndex], descriptions[imageIndex]);
		
		Show(container);
		Show(descrDiv);

	}
	
	//-------------------------------------------------------------------------
	function SetText(title, description)
	//-------------------------------------------------------------------------
	{
		var titleSpan = GetObject('largeImageTitle');
		var descrSpan = GetObject('largeImageDescription');
		
		var desrlen = trim(description).length;
		
		if (desrlen > 0)
		{
			title = title + " - ";
		}
		
		titleSpan.innerHTML = title;
		descrSpan.innerHTML = description;
	}
	
	//-------------------------------------------------------------------------
	// Show the previous / next image "button", it's not realy a button
	function ShowButton(elementId, isVisible)
	//-------------------------------------------------------------------------
	{
		if (isVisible)
		{
			ShowById(elementId);	
		}
		else
		{
			HideById(elementId);
		}
	}
	
	//-------------------------------------------------------------------------
	// Load the next image
	function NextImage()
	//-------------------------------------------------------------------------
	{
		CleanUp();
		
		imageIndex++;
		
		// After reaching the end, start from the beginning
		if (imageIndex >= images.length) imageIndex = 0;
		
		ShowImage();
	}
	
	//-------------------------------------------------------------------------
	// Load the previous image
	function PrevImage()
	//-------------------------------------------------------------------------
	{
		CleanUp();
	
		imageIndex--;		
		
		// Going back from the first image will lead to the last one.
		if (imageIndex < 0) imageIndex = images.length - 1;
		
		ShowImage();
	}
	
	//-------------------------------------------------------------------------
	function CleanUp()
	//-------------------------------------------------------------------------
	{
		var container = GetObject('largeImageWindowContainer');
	
		SetText('','');
		Hide(container);
	}