<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="generator" content="http://getpagemap.com/">
	<meta name="robots" content="noindex, nofollow">

	<title></title>

	<style type="text/css">
		/* BODY */
		
		body {
			margin: 25px;
			background: #000;
			font: 12px Arial, Helvetica, sans-serif;
			line-height: 18px;
			text-align: center;
			color: #111;
		}
		
		div.page-element {
			margin: 0 auto;
			text-align: left;
		}
		
		/* IMAGE */
		div#image {
			background-color: #fff;
			text-align: center;
			line-height: 0;
		}
		
		h2#title {
			margin: 0;
			font-size: 18px;
			line-height: 26px;
			font-weight: bold;
		}
	</style>
</head>

<body>
	
	<div class="page-element" id="image"><img style="-ms-interpolation-mode: bicubic" id="image-object" src="" width="" alt=""></div>
	
	<div class="page-element" id="title-container"><h2 id="title-element"><!-- dynamic content --></h2></div>
	<div class="page-element" id="description"><!-- dynamic content --></div>
	
	<script type="text/javascript">
		window.onload = function() {
	    	// Cross-browser innerWidth and innerHeight
	    	var innerSize = function(mode) {
	    		var value;
	    		if(self.innerWidth) {
	    			value = (mode == 'width') ? self.innerWidth : self.innerHeight;
	    		} else if(document.documentElement && document.documentElement.clientWidth) {
	    			value = (mode == 'width') ? document.documentElement.clientWidth : document.documentElement.clientHeight;
	    		} else if(document.body) {
	    			value = (mode == 'width') ? document.body.clientWidth : document.body.clientHeight;
	    		}
	    		return (value < 0) ? 0 : value;
			};
		
			// Global data
			var noCache = window.opener.noCache;
			var createXMLHttpRequest = window.opener.createXMLHttpRequest;
			var imageSRC = '<?php echo $_GET['image']; ?>';
			var imagesPath = window.opener.imagesPath;
			var imageFilename = imageSRC.substr(imageSRC.lastIndexOf('/') + 1);
			var imageContainer = document.getElementById('image');
			var imageObject = document.getElementById('image-object');
			var pagemapImages = window.opener.pagemapImages;
			var popupWidth = window.opener.popupWidth;
			var titleObject = document.getElementById('title-element');
			var titleContainer = document.getElementById('title-container');
			var descriptionObject = document.getElementById('description');
			var showImageProperties = window.opener.showImageProperties;
			
			// Load image
			if(typeof pagemapImages[imageFilename] != 'undefined') {
				document.title = imageFilename;
				
				imageContainer.style.height = 10000 + 'px';
				var contentWidth = imageContainer.offsetWidth;
				imageContainer.style.height = 'auto';
		
				var maxWidth = pagemapImages[imageFilename]['width'] < contentWidth ? pagemapImages[imageFilename]['width'] : contentWidth;
				
				imageObject.src = imageSRC;
				imageObject.width = maxWidth;

	    		// Get image data from XML file
	    		if(showImageProperties == 1) {
					var XMLcontent = createXMLHttpRequest();
					XMLcontent.open('get', noCache(imagesPath + 'storage/' + imageFilename + '.xml'), true);
					
					XMLcontent.onreadystatechange = function() {
						if(XMLcontent.readyState == 4 && XMLcontent.status == 200) {
							if(XMLcontent.responseXML) {
								var fileNode = XMLcontent.responseXML.getElementsByTagName('file')[0];
								if(fileNode) showProperties(fileNode);
							}
						}
					};
					
					XMLcontent.send(null);
					
					// Show properties (title and description)
		    		titleObject.innerHTML = '';
		    		descriptionObject.innerHTML = '';
		    		
					var showProperties = function(fileNode) {
						var titleNode = fileNode.getElementsByTagName('title')[0];
						var descriptionNode = fileNode.getElementsByTagName('description')[0];
						
						if(titleNode && titleNode.childNodes[0]) { document.title = titleNode.childNodes[0].nodeValue; titleObject.innerHTML = titleNode.childNodes[0].nodeValue; }
						if(descriptionNode && descriptionNode.childNodes[0]) descriptionObject.innerHTML = descriptionNode.childNodes[0].nodeValue;
					};
	    		}
			}
			
			// Pure Popup mode
			if(showImageProperties == 0) {
				document.getElementsByTagName('body')[0].style.margin = '0';
	
				imageContainer.style.overflow = 'hidden';
				imageContainer.style.width = innerSize('width') + 'px';
				imageContainer.style.height = innerSize('height') + 'px';
	
				imageObject.style.width = innerSize('width') + 'px';
				imageObject.style.height = innerSize('height') + 'px';
				
				titleObject.style.display = 'none';
				descriptionObject.style.display = 'none';
			}
		};
	</script>

</body>
</html>