// documentオブジェクトの拡張
Object.extend(document, {
	// id、classNameを付加した要素を作成
	createElementWithId: function(tagName, id, className) {
		var element = document.createElement(tagName);
		if (id) element.id = id;
		if (className) element.className = className;
		return element;
	}
});

var photos = [];

Event.observe(window, 'load', gallery);

function gallery() {
	var imageBg = new Image();
	imageBg.src = '../images/bg_main.gif';

	var tables = document.getElementsByClassName('photo');
	var table = tables[0];
	var tds = table.getElementsByTagName('td');

	var length = tds.length;
	for (i = 0; i < length; i++) {
		var td = tds[i];
		photos[i] = $H({});

		var as = td.getElementsByTagName('a');
		var a = as[0];

		photos[i].src = a.href;
		photos[i].image = new Image();
		photos[i].image.src = a.href;
		photos[i].text = td.innerHTML.stripTags();

		a.href = 'javascript:void(0);';
		a.target = '_self';

		Event.observe(a, 'click', showPhoto.bindAsEventListener(null, i));
	}
}

function showPhoto(e, i) {
	var outer = document.createElementWithId('DIV', 'showPhotoOuter');
	outer.style.height = document.documentElement.scrollHeight + 'px';

	var inner = document.createElementWithId('DIV', 'showPhoto');
	inner.innerHTML = '<table class="nav"><tr>'
		+ '<td class="backNext"><a id="showPhotoBack" href="javascript:void(0);">前へ</a> <a id="showPhotoNext" href="javascript:void(0);">次へ</a></td>'
		+ '<td class="no"><span id="showPhotoNo"></span></td>'
		+ '<td class="close"><a id="showPhotoClose" href="javascript:void(0);">閉じる</a></td>'
		+ '</tr></table>'
		+ '<a id="showPhotoPhoto" href="javascript:void(0);"></a><br />'
		+ '<span id="showPhotoText"></span>'

	setTimeout(function () {
		document.body.appendChild(outer);
		document.body.appendChild(inner);

		inner.style.top = parseInt(document.documentElement.scrollTop + document.documentElement.clientHeight / 2 - inner.offsetHeight / 2) + 'px';
		inner.style.left = parseInt(document.documentElement.clientWidth / 10) + 'px';

		switchPhoto(e, i);

		Event.observe($('showPhotoClose'), 'click', closePhoto);
	}, 10);
}

function switchPhoto(e, i) {
	var length = photos.length;
	var photo = photos[i];

	setTimeout(function () {
		$('showPhotoNo').innerHTML = (i + 1) + '/' + length;
		$('showPhotoPhoto').innerHTML = '<img id="showPhotoImage" src="' + photo.src + '" style="opacity: 0; filter: alpha(opacity=0);" />';
		$('showPhotoText').innerHTML = photo.text;

		var backNo = (i == 0) ? length - 1 : i - 1;
		var nextNo = (i == length - 1) ? 0 : i + 1;

		$('showPhotoBack').onclick = switchPhoto.bindAsEventListener(null, backNo);
		$('showPhotoNext').onclick = switchPhoto.bindAsEventListener(null, nextNo);
		$('showPhotoPhoto').onclick = switchPhoto.bindAsEventListener(null, nextNo);

		setTimeout(fadeIn, 10);
	}, 10);
}

function closePhoto() {
	document.body.removeChild($('showPhotoOuter'));
	document.body.removeChild($('showPhoto'));
}

function fadeIn() {
	var opacity = parseInt($('showPhotoImage').style.opacity * 25);

	if (opacity < 25) {
		opacity++;
		$('showPhotoImage').style.opacity = opacity / 25;
		$('showPhotoImage').style.filter = 'alpha(opacity=' + (opacity * 4) + ')';

		setTimeout(fadeIn, 10);
	}
}