var ImageGrid = function(container)
{
	var lastPosition = 0;
	var table;
	var thumbnails = [];
	var selectedThumbnail = null;
	
	var initialize = function()
	{
		container = (typeof(container) == "string") ? document.getElementById(container) : container;
		container.className = "image-grid";
	};

	var createThumbnail = function(image1url, image2url)
	{
		var image1 = null;
		var image2 = null;
		var currentImage = null;
		var delta = 0;
		var size = 46;
		var minSize = 46;
		var maxSize = 70;
		var leftPosition = 0;
		var topPosition = 0;
	
		var initializeThumbnail = function()
		{
			leftPosition = lastPosition % 3;
			topPosition = (lastPosition - leftPosition) / 3;
			lastPosition++;

			leftPosition *= 71;
			topPosition *= 71;
			
			image1 = document.createElement("img");
			image1.src = image1url;
			image1.onclick = select;
			image1.style.marginLeft = leftPosition + "px";
			image1.style.marginTop = topPosition + "px";
			container.appendChild(image1);
	
			image2 = document.createElement("img");
			image2.src = image2url;
			image2.onclick = select;	
			image2.style.marginLeft = leftPosition + "px";
			image2.style.marginTop = topPosition + "px";		
			container.appendChild(image2);

			image2.style.display = "none";
			
			currentImage = image1;
			currentImage.height = minSize;
			currentImage.width = minSize;
			
			image1.onmouseover = function()
			{
				delta = 8;
				resizeImage();
			};
			
			image2.onmouseout = function()
			{
				delta = -5;
				resizeImage();
			};
			
			thumbnails.push(thumbnailPub);
		};
		
		var setData = function(data)
		{
			thumbnailPub.data = data;
			return thumbnailPub;
		};
		
		var select = function()
		{
			if(selectedThumbnail != thumbnailPub)
			{			
				if(selectedThumbnail)
					selectedThumbnail.deselect();
				
				selectedThumbnail = thumbnailPub;
				image1.className = "selected";
				image2.className = "selected";

				leftPosition -= 2;
				topPosition -= 2;
				repositionImage();

				if(pub.onclick) pub.onclick(thumbnailPub);
			}
		};
		
		var deselect = function()
		{
			image1.className = "";
			image2.className = "";

			leftPosition += 2;
			topPosition += 2;
			repositionImage();
		};
		
		var resizeImage = function()
		{
			if(delta > 0)
			{
				size = Math.min(maxSize, size + delta);
				
				if(size < maxSize)
					window.setTimeout(resizeImage, 30);
			}
			else
			{
				size = Math.max(minSize, size + delta);
				
				if(size > minSize)
					window.setTimeout(resizeImage, 30);
			}
			
			var image = (size == minSize) ? image1 : image2;
			
			if(image != currentImage)
			{
				image.style.display = "";
				currentImage.style.display = "none";
				currentImage = image;
			}
			
			currentImage.height = size;
			currentImage.width = size;
			
			repositionImage();
		};
		
		var repositionImage = function()
		{
			var positionCorrection = (size - minSize) / 2;
			currentImage.style.marginLeft = (leftPosition - positionCorrection) + "px";
			currentImage.style.marginTop = (topPosition - positionCorrection) + "px";
		};
		
		var thumbnailPub = {
			select : select,
			deselect : deselect,
			setData : setData,
			data : null
		};
		
		initializeThumbnail();
		
		return thumbnailPub;
	};
	
	var getThumbnail = function(index)
	{
		return thumbnails[index];
	};
	
	var pub = {
		createThumbnail : createThumbnail,
		getThumbnail : getThumbnail,
		onclick : null
	};

	initialize();
	
	return pub;
};