// JavaScript Document

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


概要

 1. 新着マークの表示（CLASSを追加）
 2. 「lightbox」を設定したイメージに拡大鏡のイメージを重ねて配置する
 3. 
 4. 

(C) 920
最終更新日： 2008.06.11 17:10    by 920

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

window.onload = function () {
	newMark();
//	addMagnifier();
	addCaption();
}


/* ----------------------------------------------------------------------
 1. 新着マークの表示（CLASSを追加）
---------------------------------------------------------------------- */

/* ブラウザの動作状況

	Windows
		× Internet Explorer 5.0
		× Internet Explorer 5.5
		○ Internet Explorer 6
		○ Internet Explorer 7
		○ Safari 3
		× Opera 9.27 
	Mac
		○ Safari 3
		× Internet Explorer 5.23
		× Opera 9.25 
*/


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

// 新着として扱う日数
var passage = 7;

// 新着の情報を判断するエレメントに設定されたクラスネーム
var targetClass = "ifNew";

// 新着の情報に追加するクラスネーム
var addClass = "newItem";

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

var currentDate = new Date().getTime();

function newMark() {
	var elements = document.getElementsByClassName(targetClass);
	elements.each(
		function (item) {
			var updateTime = item.getAttribute('title');
			var times = updateTime.split("/");
			var entryDate = new Date(times[0], times[1]-1, times[2], 0, 0, 0).getTime();
			var passDay = Math.floor((currentDate - entryDate) / (24 * 60 * 60 * 1000));
			if(passage >= passDay) {
				Element.addClassName(item, addClass);
			}
		}
	);
}


/* ----------------------------------------------------------------------
 2. 「lightbox」を設定したイメージに拡大鏡のイメージを重ねて配置する
---------------------------------------------------------------------- */

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

var lboxTargetClass = "zm";					// 新着の情報を判断するエレメントに設定されたクラスネーム

var imgFile = "/temp/images/zoom-in.gif";	// 拡大鏡のイメージファイル
var altText = "ZOOM IN";				// 拡大鏡イメージの代替文字
var wSize = "16";						// 拡大鏡イメージの幅
var hSize = "16";						// 拡大鏡イメージの高さ

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

function addMagnifier() {
	var elements = document.getElementsByClassName(lboxTargetClass);
	elements.each(
		function (item) {
			Element.makePositioned(item);
			Element.setStyle(item, {'display': 'inline-block'});
//			Element.setStyle(item, {'margin-top': '-41px'});

			var imgTag = document.createElement("img");
			imgTag.setAttribute("src",imgFile);
			imgTag.setAttribute("alt",altText);
			imgTag.setAttribute("width",wSize);
			imgTag.setAttribute("height",hSize);
//			item.appendChild(imgTag);
			item.insertBefore(imgTag,item.firstChild);

			Element.setStyle(imgTag, { 'position': 'absolute', 'left': '5px', 'top': '5px' });
//			Element.setStyle(imgTag, { 'margin-top': '-26px', 'margin-right': '-5px' });

		}
	);
}


/* ----------------------------------------------------------------------
 2. 「lightbox」を設定したイメージに拡大鏡のイメージを重ねて配置する
---------------------------------------------------------------------- */

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

var observerTargetClass = "imgCaption";		// キャプションを表示させたいエレメントのクラス名
var captionTarget = "photoCaption";				// キャプションを表示させるエレメントのid

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


function addCaption() {
	var elements = document.getElementsByClassName(observerTargetClass);

	elements.each(
		function (item) {
			var targetId = item.getAttribute('id');
			Event.observe(targetId, 'mouseover', dispCap);
			Event.observe(targetId, 'mouseout', hideCap);
		}
	);


}
function dispCap(event) {
	var item = Event.element(event); 
	var imgCaption = item.getAttribute('alt');
	document.getElementById(captionTarget).innerHTML = imgCaption;
}

function hideCap(event) {
	document.getElementById(captionTarget).innerHTML = " ";
}