/*
	対象の要素をフェードイン/アウトする
	element: 対象の要素オブジェクト
	interval: 透明度を変化させる間隔(ms)
	addition: 透明度を変化させる割合(%)
	fadeMode: 0=フェードアウト, 1=フェードイン
*/
function fadeElement(element,interval,addition,fadeMode) {
	var count = 0;
	var callback = function()
	{
		// countが100を超えないようにする
		count = Math.min(count,100);
		var opacity = fadeMode ? count : 100-count;
		// Opera, Safari, Chrome, Firefox>=3.5
		element.style.opacity = opacity/100;
		// Firefox
		element.style.MozOpacity = opacity/100;
		// Internet Explorer
		element.style.filter = 'alpha(opacity='+opacity+')';
		if ( count<100 )
		{
			// countが100未満であれば
			// 加算
			count += addition;
			// setTimeoutに自身（関数オブジェクト）を指定
			setTimeout(callback,interval);
		}
	};
	callback();
}
/*
	対象のクラスが設定された画像をフェードイン/アウトする
	targetClass: 対象のクラス名
	interval: 透明度を変化させる間隔(ms)
	addition: 透明度を変化させる割合(%)
	fadeMode: 0=フェードアウト, 1=フェードイン
*/
function fadeTargetClass(targetClass,interval,addition,fadeMode) {
	var elements = document.images;
	for ( var i=0; i<elements.length; i++ )
	{
		var element = elements[i];
		var classes = element['className']||element['class'];
		if ( classes )
		{
			// クラスが設定されていた場合
			classes = classes.split(' ');
			for ( var j=0; j<classes.length; j++ )
			{
				// 設定されたクラスの名前を全て調べる
				if ( classes[j]==targetClass )
				{
					// ターゲットクラスならフェードアウト処理
					fadeElement(element,interval,addition,fadeMode);
					changeDisplay(targetClass);
				}
			}
		}
	}
}

function changeDisplay(targetId) {
	if (targetId == 'fadeImage1') {
		document.getElementById('fadeImage1').style.display = 'inline';
		document.getElementById('fadeImage2').style.display = 'none';
		document.getElementById('fadeImage3').style.display = 'none';
	} else if (targetId == 'fadeImage2') {
		document.getElementById('fadeImage1').style.display = 'none';
		document.getElementById('fadeImage2').style.display = 'inline';
		document.getElementById('fadeImage3').style.display = 'none';
	} else {
		document.getElementById('fadeImage1').style.display = 'none';
		document.getElementById('fadeImage2').style.display = 'none';
		document.getElementById('fadeImage3').style.display = 'inline';
	}
}

