// (c) http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
function getWindowSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  return [myWidth, myHeight];
}
// (c) http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

function center(id)
{
	var element = document.getElementById(id);
	if(element != null)
	{
		element.style.position = 'absolute';

		// Position the element in the middle of the screen
		var icw = element.offsetWidth;
		var ich = element.offsetHeight;
		var w = getWindowSize();
		var s = getScrollXY();

		element.style.left = (w[0] - icw) / 2 + s[0] +'px';
		element.style.top = (w[1] - ich) / 2 + s[1] +'px';

	//	alert('IC: ' +icw +'x' +ich +' | Body: ' +bw +'x' +bh +' | Scroll: ' +st +'x' +sl);
	}
	else
	{
		return false;
	}
}

function SimpleImageViewer()
{
	var as = document.getElementsByTagName('a');
	var i;

	for(i=0; i<as.length; i++)
	{
		if(as[i].className.indexOf('pop-up') != -1)
		{
			as[i].onclick = function()
			{
				// Remove imageContainer if there already is one
				if(document.getElementById('simple-image-viewer'))
				{
					var oldImageContainer = document.getElementById('simple-image-viewer');
					oldImageContainer.parentNode.removeChild(oldImageContainer);
				}

				// Create imageContainer
				var imageContainer = document.createElement('div');
				imageContainer.id = 'simple-image-viewer';
				imageContainer.innerHTML = '<h2>' +this.getAttribute('title') +' <em>(Click to close)</em></h2><img src="' +this.getAttribute('href') +'" alt="" />';
				imageContainer.style.position = 'absolute';

				// Preload image
				var preload = new Image();
				preload.src = this.getAttribute('href');

				// Create loader
				if(!preload.complete)
				{
					var loader = document.createElement('div');
					loader.id = 'simple-image-viewer-loader';
					loader.innerHTML = 'Loading...';
					loader.style.position = 'absolute';

					document.body.appendChild(loader);

					center('simple-image-viewer-loader');
				}

				preload.onload = function()
				{
					// Remove loader
					if(document.getElementById('simple-image-viewer-loader'))
					{
						var oldImageContainer = document.getElementById('simple-image-viewer-loader');
						oldImageContainer.parentNode.removeChild(oldImageContainer);
					}

					// Append it to body
					document.body.appendChild(imageContainer);

					center('simple-image-viewer');
				}

				// Remove imageContainer on-click
				imageContainer.onclick = function()
				{
					this.parentNode.removeChild(this);
				}

				return false;
			}
		}
	}
}