function createImageViewer(height) {
	if (document.getElementById('divImageViewer') != null) { return; }

	var form = document.getElementsByTagName('form')[0];
	var body = document.getElementsByTagName('body')[0];
	var content = document.getElementById('pageContent');

	var container = document.createElement('div');
	container.setAttribute('id', 'divImageViewer');

	container.className = 'imageViewer';
	container.setAttribute('class', 'imageViewer');

	container.style.position = 'absolute';
	container.style.width = content.offsetWidth + 'px';
	container.style.height = height + 'px';
	container.style.left = ((form.offsetWidth / 2) - (content.offsetWidth / 2)) + 'px';
	container.style.backgroundImage = 'url(_Assets/Images/GradientGenerator.ashx?Width=' + content.offsetWidth + '&Height=' + height + '&StartColor=EEF0F2&EndColor=D0D6DD&Angle=75&EndPosition=1&Background=000000&GradientType=Linear)';
	container.style.backgroundColor = '#ffffff';
	container.style.zIndex = 100001;
	container.style.display = 'none';

	/* close.style.position = 'absolute';
	close.style.left = (content.offsetWidth - 16 - 5) + 'px';
	close.style.top = '5px'; */

	var mask = document.createElement('div');
	mask.setAttribute('id', 'divImageViewer_mask');
	mask.style.position = 'absolute';
	mask.style.left = '0px';
	mask.style.top = '0px';
	mask.style.width = content.offsetWidth + 'px';
	mask.style.backgroundColor = '#000000';
	mask.style.zIndex = 100000;
	mask.style.display = 'none';

	if (mask.style.opacity == null) {
		mask.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=75)';
	} else {
		mask.style.opacity = .75;
	}

	if (document.documentElement) {
		container.style.top = ((document.documentElement.clientHeight / 2) - (height / 2) + document.documentElement.scrollTop) + 'px';
		mask.style.height = ((document.documentElement.clientHeight > document.documentElement.scrollHeight)?document.documentElement.clientHeight:document.documentElement.scrollHeight) + 'px';
		mask.style.width = (document.documentElement.clientWidth) + 'px';
	} else {
	}

	var imagePanel = document.createElement('div');
	imagePanel.style.position = 'relative';
	imagePanel.setAttribute('id', 'divImageViewer_imagePanel');
	imagePanel.style.width = '100%';
	imagePanel.style.height = (height - 125) + 'px';
	container.appendChild(imagePanel);

	var close = document.createElement('div');
	close.setAttribute('id', 'divImageViewer_closeButton');
	close.style.position = 'absolute';
	close.style.left = content.offsetWidth + 'px';
	close.style.top = '2px';
	close.style.float = 'right';
	close.onclick = function () {
		container.style.display = 'none';
		mask.style.display = 'none';

		container.parentNode.removeChild(container);
		mask.parentNode.removeChild(mask);
	}
	container.appendChild(close);

	var galleryPanel = document.createElement('div');
	galleryPanel.setAttribute('id', 'divImageViewer_galleryPanel');
	galleryPanel.style.width = (content.offsetWidth - 10) + 'px';
	galleryPanel.style.height = '115px';
	galleryPanel.style.margin = '5px';
	galleryPanel.style.overflow = 'auto';
	galleryPanel.style.zIndex = 100002;
	container.appendChild(galleryPanel);

	var galleryTable = document.createElement('table')
	galleryTable.id = 'divImageViewer_galleryTable';
	galleryTable.setAttribute('id', 'divImageViewer_galleryTable');
	galleryTable.style.width = '100%';
	galleryTable.style.marginLeft = '1px';
	galleryTable.style.zIndex = 100003;
	galleryPanel.appendChild(galleryTable);

	galleryTable.appendChild(document.createElement('tr'));

	body.appendChild(container);
	body.appendChild(mask);
}

function showImageViewer(url) {
	var xr = null;
	try {
		xr = new XMLHttpRequest();
	} catch (e) {
		xr = new ActiveXObject('Microsoft.XMLHTTP');
	}

	if (!xr) { return; }

	var panel = document.getElementById('divImageViewer_galleryPanel');
	var tbl = document.getElementById('divImageViewer_galleryTable');
	var row = tbl.getElementsByTagName('tr')[0];
	var cells = row.getElementsByTagName('td');
	for (var i = cells.length - 1; i >= 0; i--) {
		row.removeChild(cells[i]);
	}

	xr.onreadystatechange = function () {
		if (xr.readyState == 'complete' || xr.readyState == 4) {
			var de = xr.responseXML.documentElement;

			var imagePanel = document.getElementById('divImageViewer_imagePanel');
			if (imagePanel.childNodes.length >= 1) { imagePanel.removeChild(imagePanel.childNodes[0]); }

			for (var i = 0; i < de.childNodes.length; i++) {
				if (de.childNodes[i].tagName != 'Image') { continue; }

				var thumb = document.createElement('img');
				thumb.src = de.childNodes[i].getAttribute('thumb');
				thumb.setAttribute('url', de.childNodes[i].getAttribute('url'));

				var cell = document.createElement('td');
				cell.style.width = '1px';
				cell.appendChild(thumb);

				row.appendChild(cell);

				if (imagePanel.childNodes.length == 0) {
					var img = document.createElement('img');
					img.style.display = 'none';
					img.onload = imageViewerLoaded;
					imagePanel.appendChild(img);

					var imageUrl = de.childNodes[i].getAttribute('url');
					setTimeout(function () { img.src = imageUrl; }, 500);
				}
			}

			// Add spacer cell to make scrollbar appear
			row.appendChild(document.createElement('td'));

			if (tbl.rows.length != null && tbl.rows.length == 0) {
				var panelNew = panel.cloneNode(false);
				panelNew.innerHTML = panel.innerHTML;
				panel.parentNode.replaceChild(panelNew, panel);
				panel = panelNew;
			}

			var thumbs = panel.getElementsByTagName('img');
			for (var x = 0; x < thumbs.length; x++) {
				var item = thumbs[x];
				item.onclick = function () {
					imageViewer_ThumbnailClicked(imagePanel, this);
				}
			}

			document.getElementById('divImageViewer').style.display = '';
			document.getElementById('divImageViewer_mask').style.display = '';
		}
	}

	xr.open('POST', url, true);
	xr.send('');
}

function imageViewerLoaded() {
	if (this.parentNode == null) { return; }

	this.style.display = '';

	var container = this.parentNode;
	var containerAspect = (container.offsetWidth / container.offsetHeight);
	var imageAspect = (this.offsetWidth / this.offsetHeight);

	var width = 0;
	var height = 0;

	if (containerAspect >= imageAspect) {
		height = (container.offsetHeight - 10);
		width = (height * imageAspect);
	} else {
		width = (container.offsetWidth - 10);
		height = (width / imageAspect);
	}

	this.style.position = 'absolute';
	this.style.width = width + 'px';
	this.style.height = height + 'px';
	this.style.left = ((container.offsetWidth / 2) - (width / 2)) + 'px';
	this.style.top = ((container.offsetHeight / 2) - (height / 2)) + 'px';
}

function imageViewer_ThumbnailClicked(imagePanel, thumb) {
	if (imagePanel.childNodes.length >= 1) { imagePanel.removeChild(imagePanel.childNodes[0]); }

	var img = document.createElement('img');
	img.style.display = 'none';
	img.onload = imageViewerLoaded;
	imagePanel.appendChild(img);
	setTimeout(function () { img.src = thumb.getAttribute('url'); }, 250);
}