var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0);
var isOpera = (navigator.userAgent.toLowerCase().indexOf('opera')+1?1:0);
if (isOpera) isIE = false;
var isSafari = (navigator.appVersion.toLowerCase().indexOf('safari')+1?1:0);

var imageViewDiv = document.createElement('div');
var imageViewImg = document.createElement('img');
var imageViewClose = document.createElement('div');

function setImageViewerListener()
{
	var contents = document.getElementById('photo_gallery');
	var images = contents.getElementsByTagName('img');
	for(var i = 0; i < images.length; i ++)
	{
		if(images[i].src.toLowerCase().match(/^(.+\/[^\/]+)_s(\.[^\/]+)$/))
		{
			if(isIE)
			{
				images[i].attachEvent('onclick', function(e) { return(displayImage(e));});
			}
			else
			{
				images[i].addEventListener('click', function OnClick(e) { return(displayImage(e));}, false);
			}
		}
	}
	document.body.appendChild(imageViewDiv);
	imageViewDiv.style.cssText = 'position: absolute; top: 0; left: 0; z-index: 100; display: none; padding: 8px; width: 100px; height: 100px; background-color: white; border: 1px solid gray';
	imageViewDiv.appendChild(imageViewImg);
	imageViewClose.style.cssText = 'text-align: right';
	imageViewClose.innerHTML = '<a href="javascript:void(0)" style="color: black" onclick="imageViewDiv.style.display = ' + "'none'" + '">閉じる</a>';
	imageViewDiv.appendChild(imageViewClose);
	if(isIE)
	{
		imageViewDiv.attachEvent('onclick', function() {imageViewDiv.style.display = 'none';});
		imageViewImg.attachEvent('onclick', function() {imageViewDiv.style.display = 'none';});
		imageViewImg.attachEvent('onload', displayImage2);
	}
	else
	{
		imageViewDiv.addEventListener('click', function OnClick() {imageViewDiv.style.display = 'none';}, false);
		imageViewImg.addEventListener('click', function OnClick() {imageViewDiv.style.display = 'none';}, false);
		imageViewImg.addEventListener('load', displayImage2, false);
	}
}

function displayImage(e)
{
	imageViewDiv.style.display = 'block';
	if(isIE)
	{
		var src = e.srcElement.src;
	}
	else
	{
		var src = e.target.src;
	}
	if(src.toLowerCase().match(/^(.+\/[^\/]+)_s(\.[^\/]+)$/)) imageViewImg.src = RegExp.$1 + RegExp.$2;;
}

function displayImage2()
{
	imageViewDiv.style.width = imageViewImg.offsetWidth + 'px';
	if(document.documentElement.clientWidth < imageViewDiv.offsetWidth)
	{
		var viewX = 0;
	}
	else
	{
		var viewX = Math.floor((document.documentElement.clientWidth - imageViewDiv.offsetWidth) / 2);
	}
	var viewHeight = imageViewImg.offsetHeight + 16;
	imageViewDiv.style.left = viewX + 'px';
	imageViewDiv.style.height = viewHeight + 'px';
	var scrollTop  = document.documentElement.scrollTop || document.body.scrollTop;
	if(document.documentElement.clientHeight < imageViewDiv.offsetHeight)
	{
		var viewY = scrollTop;
	}
	else
	{
		var viewY = Math.floor((document.documentElement.clientHeight - imageViewDiv.offsetHeight) / 2 + scrollTop);
	}
	imageViewDiv.style.top = viewY + 'px';
}