/**
 * objectplanet.ImageViewer.js This module displays images in the web page.
 * Requires the objectplanet.Dimmer.js and objectplanet.BrowserSize modules. 
 **/

/* Set up the name space */
var objectplanet;
if (!objectplanet) objectplanet = {};
objectplanet.ImageViewer = {};

/* Make sure we have the modules needed */
if (!objectplanet.Dimmer) {
	alert("The objectplanet.Dimmer.js module is missing");
}
if (!objectplanet.BrowserSize) {
	alert("The objectplanet.BrowserSize.js module is missing");
}

/* Expose only public methods in the name space  */
(function() {

	/* The name of the image element */
	var IMAGE = "objectplanet.ImageViewer.image";
	
	/* The browser size module */
	var size = objectplanet.BrowserSize;

	/* This method displays an image */
	function show(imageUrl, width, height) {
		// get or create the image element
		if (!document.getElementById(IMAGE)) {
			document.body.appendChild(createImage());
		}
		
		// dim the web page, make sure we close the image also when clicked
		objectplanet.Dimmer.dim(document.getElementById(IMAGE));
	
		// display the image in the center of the document viewport
		var img = document.getElementById(IMAGE);
		img.src = imageUrl;
		img.style.width = width + 'px';
		img.style.height = height + 'px';
		img.style.left = (size.getCenterX() - width/2) + "px";
		img.style.top = Math.max(size.getCenterY() - height/2, size.getOffsetY()) + "px";
		img.style.visibility = 'visible';
	};
	
	// assign function to the global namespace
	objectplanet.ImageViewer.show = show;

	
// private methods

	
	/* Creates the image component */
	function createImage() {
		// create the image and set the style
		var img = new Image();
		img.id = IMAGE;
		img.style.zIndex = 101;
		img.style.position = 'absolute';
		img.style.border = '10px solid white';
		
		// make sure the image and background is closed when clicked
		img.onclick = function() {
			this.style.visibility = 'hidden';
			document.getElementById(objectplanet.Dimmer.DIMMER).style.visibility = 'hidden';
		};
		return img;
	}
})();