// JavaScript Document

/* ==========================================================================


概要

 1. フォトギャラリー

(C) 920
 Lastupdate： 2009.06.16    by 920

========================================================================== */


/* ----------------------------------------------------------------------
 1. フォトギャラリー
------------------------------------------------------------------------- */

// 設置方法
// ----------------------------------------------------------------------

/*

全体のボックスの設定
	id： 任意

大きい画像の設定
	id： 任意

キャプション表示ボックスの設定
	id： 任意

サムネール画像の設定
	alt： キャプションを設定
	class： 任意

関数の呼び出し
	全体のボックスの後ろに記述
	photoGallery(全体のボックスのid','サムネール画像のclass','大きい画像のid','キャプションを表示するボックスのid)


＜(X)HTML の例＞

<div id="gallerys">

<div><img src="" alt="" id="viewerImg" /></div>
<p id="galleryCaption">キャプション</p>

<ul id="thumbnails">
<li><img src="サムネール画像のurl" alt="任意" class="galleryImg" title="キャプション" /></li>
<li><img src="サムネール画像のurl" alt="任意" class="galleryImg" title="キャプション" /></li>
</ul>

</div>

<script type="text/javascript">
<!--
photoGallery('gallerys','galleryImg','viewerImg','galleryCaption');
// -->
</script>

*/


// 初期設定
// ----------------------------------------------------------------------

// サムネール画像の添え字
var thumStr = "_thum";			// abcd_thum.jpg

// ミドルサイズ画像の添え字
var viewerStr = "_middle";		// abcd_middle.jpg


// ----------------------------------------------------------------------


function photoGallery(thumbnails,galleryImg,viewerImg,galleryCaption) {

document.getElementById(galleryCaption).style.visibility = "hidden";

if(document.getElementsByTagName) {
		
		var images = document.getElementById(thumbnails).getElementsByTagName("img");
		
		for(var i=0; i < images.length; i++) {

			if(images[i].getAttribute("class")) {
				var thumbnailClass = images[i].getAttribute("class");
			}
			else {
				var thumbnailClass = images[i].getAttribute("className");
			}


			if(thumbnailClass == "galleryImg") {

				var thumImg = images[i].getAttribute("src");
				var viewImg = thumImg.replace(thumStr,viewerStr);

				(new Image()).src = viewImg;
				
				images[i].onmouseover = function() {
					var thumbnail = this.getAttribute("src");
					var viewer = thumbnail.replace(thumStr,viewerStr)
					document.getElementById(viewerImg).src = viewer;
					document.getElementById(galleryCaption).innerHTML = this.getAttribute("title");
					document.getElementById(galleryCaption).style.visibility = "visible";
				}
				images[i].onmouseout = function() {
					document.getElementById(galleryCaption).style.visibility = "hidden";
				}

			}
		}
	}

}