// --------------------------------------------------------------------
// Author  : mashimonator
// Create  : 2009/10/05
// Update  : 2009/10/05
// Description : タブ制御
// --------------------------------------------------------------------


//-----------------------------------------
// onloadイベントが発生するまで非表示
//-----------------------------------------
document.write('<style type="text/css">');
document.write('#tabContents01,');
document.write('#tabContents02,');
document.write('#tabContents03,');
document.write('#tabContents04,');
document.write('#tabContents05,');
document.write('#tabContents06,');
document.write('#tabContents07,');
document.write('#tabContents08,');
document.write('#tabContents09,');
document.write('#tabContents10,{');
document.write('display:none;');
document.write('}</style>');

//-----------------------------------------
// IE6のチラつき対策
//-----------------------------------------
try {
	document.execCommand('BackgroundImageCache', false, true); 
} catch(e) {}


var tabControl = {
	//-----------------------------------------
	// 設定値
	//-----------------------------------------
	conf : {
		// ナビゲーションのID
		tabNavId : 'tabNav',
		// デフォルトアクティブとする要素に付加するクラス名
		activeCls : 'activeTab',
		// タブ切り替えの際に表示中コンテンツを非表示にする速さ
		hideHeightSpeed : 1,
		// タブ切り替えの際に非表示コンテンツを表示にする速さ
		viewSpeed : 1,
		// 以下、処理の中で使用する変数（編集不可）
		activeNav : null,
		activeContent : null,
		hideNav : null,
		hideContent : null,
		contentsHeight : [],
		viewContentHeight : 0,
		hideContentHeight : 0,
		hideHeightUnit : 8,
		execNum : 0,
		viewOpacity : 0,
		hideOpacity : 10,
		changing : false
	},
	//-----------------------------------------
	// 初期化処理
	//-----------------------------------------
	init : function() {
		// タブナビゲーションを取得
		var nav = document.getElementById( tabControl.conf.tabNavId );
		if ( nav ) {
			// ナビゲーションの子要素を取得
			var children = nav.childNodes;
			var len = children.length;
			// ナビゲーション数だけLOOP
			for (var i = 0; i < len; i++) {
				if ( children[i].nodeType == '1' && children[i].nodeName.match(/^li$/i) ) {
					// li要素にidを付加
					children[i].id = tabControl.conf.tabNavId + '_' + i;
					// a要素を取得
					var a = children[i].getElementsByTagName('A');
					if ( a[0] ) {
						// コンテンツのIDを取得
						var contentId = a[0].getAttribute('href').split('#');
						// 表示切替関数をセット
						a[0].setAttribute('href','javascript:tabControl.change("' + contentId[1] + '","' + children[i].id + '");');
						// コンテンツを取得
						var content = document.getElementById( contentId[1] );
						content.style.display = 'block';
						// ボックスに入りきらない要素を非表示
						content.style.overflow = 'hidden';
						// コンテンツの高さを取得
						var size = tabControl.getElementSize(content);
						// コンテンツの高さを保持
						tabControl.conf.contentsHeight[ contentId[1] ] = size.height;
						// 初期アクティブタブの取得
						if ( children[i].className && children[i].className.match(tabControl.conf.activeCls) ) {
							// アクティブコンテンツとして変数に保持
							tabControl.conf.activeContent = content;
							tabControl.conf.activeNav = children[i];
							// アクティブナビゲーションをセット
							tabControl.changeActiveNav();
						} else {
							// 非表示
							content.style.display = 'none';
						}
					}
				}
			}
		}
	},
	//-----------------------------------------
	// 表示タブを切り替える
	//-----------------------------------------
	change : function( conId, navId ) {
		// 実行中フラグの判定
		if ( tabControl.conf.changing ) {
			// 表示切り替え処理中であれば抜ける
			return;
		} else {
			if ( tabControl.conf.activeContent && tabControl.conf.activeContent.id == conId ) {
				// 既にアクティブなタブの場合抜ける
				return;
			} else {
				// 実行フラグを実行中に設定
				tabControl.conf.changing = true;
			}
		}
		// 現在のアクティブコンテンツを非表示用変数に保持
		tabControl.conf.hideContent = tabControl.conf.activeContent;
		tabControl.conf.hideNav = tabControl.conf.activeNav
		tabControl.conf.hideContentHeight = tabControl.conf.contentsHeight[ tabControl.conf.hideContent.id ];
		// 次のアクティブコンテンツを表示用変数に保持
		tabControl.conf.activeContent = document.getElementById(conId);
		tabControl.conf.activeNav = document.getElementById(navId);
		tabControl.conf.viewContentHeight = tabControl.conf.contentsHeight[ conId ];
		// アクティブナビゲーションを切り替え
		tabControl.changeActiveNav();
		// 表示コンテンツ切り替え処理
		if ( tabControl.conf.hideContentHeight < tabControl.conf.viewContentHeight ) {
			// 表示中コンテンツの方が小さい場合
			tabControl.conf.execNum = 10 / ( (tabControl.conf.viewContentHeight - tabControl.conf.hideContentHeight) / tabControl.conf.hideHeightUnit );
			// コンテンツ領域を伸ばしつつ切り替え
			tabControl.stretch();
		} else if ( tabControl.conf.hideContentHeight >= tabControl.conf.viewContentHeight ) {
			// 表示中コンテンツの方が大きい場合
			tabControl.conf.execNum = 10 / ( (tabControl.conf.hideContentHeight - tabControl.conf.viewContentHeight) / tabControl.conf.hideHeightUnit );
			// コンテンツ領域を縮ませつつ切り替え
			tabControl.shrink();
		}
	},
	//-----------------------------------------
	// アクティブなナビゲーションの切り替え
	//-----------------------------------------
	changeActiveNav : function() {
		if ( tabControl.conf.activeNav ){
			// クラス名を付加
			tabControl.conf.activeNav.className = tabControl.conf.activeCls;
			// アクティブ化するimg要素を取得
			var activeImg = tabControl.conf.activeNav.getElementsByTagName('IMG');
			if ( activeImg[0] ) {
				// 画像を切り替え
				tabControl.changeButtonImage('_n.','_a.',activeImg[0]);
				// カーソル設定
				activeImg[0].style.cursor = 'default';
			}
		}
		if ( tabControl.conf.hideNav ){
			// クラス名をクリア
			tabControl.conf.hideNav.className = '';
			// 非アクティブ化するimg要素を取得
			var hideImg = tabControl.conf.hideNav.getElementsByTagName('IMG');
			if ( hideImg[0] ) {
				// 画像を切り替え
				tabControl.changeButtonImage('_a.','_n.',hideImg[0]);
				// カーソル設定
				hideImg[0].style.cursor = 'pointer';
			}
		}
	},
	//-----------------------------------------
	// ボタン画像の切り替え
	//-----------------------------------------
	changeButtonImage : function( str, repStr, element ) {
		if ( element ) {
			// 画像を切り替え
			var fileName = element.getAttribute('src');
			fileName = fileName.replace(str,repStr);
			element.setAttribute('src',fileName);
		}
	},
	//-----------------------------------------
	// 伸ばす
	//-----------------------------------------
	stretch : function() {
		if( tabControl.conf.hideContentHeight < tabControl.conf.viewContentHeight ) {
			// 高さを変更
			tabControl.conf.hideContentHeight += tabControl.conf.hideHeightUnit;
			tabControl.conf.hideContent.style.height = tabControl.conf.hideContentHeight + 'px';
			// 透明度を変更
			tabControl.conf.hideOpacity -= tabControl.conf.execNum;
			tabControl.setOpacity( tabControl.conf.hideContent, tabControl.conf.hideOpacity );
			// 再起呼出
			window.setTimeout('tabControl.stretch()',tabControl.conf.hideHeightSpeed);
		} else {
			// 透明度設定を初期化
			tabControl.conf.hideOpacity = 10;
			// 表示中タブを非表示
			tabControl.conf.hideContent.style.display = 'none';
			// 表示中タブの透明度・高さを初期化
			tabControl.setOpacity( tabControl.conf.hideContent, 10 );
			tabControl.conf.hideContent.style.height = tabControl.conf.contentsHeight[ tabControl.conf.hideContent.id ]+ 'px';
			// アクティブなタブを表示
			tabControl.conf.activeContent.style.display = 'block';
			tabControl.view();
		}
	},
	//-----------------------------------------
	// 縮ませる
	//-----------------------------------------
	shrink : function() {
		if( tabControl.conf.hideContentHeight > tabControl.conf.viewContentHeight ) {
			// 高さを変更
			tabControl.conf.hideContentHeight -= tabControl.conf.hideHeightUnit;
			tabControl.conf.hideContent.style.height = tabControl.conf.hideContentHeight + 'px';
			// 透明度を変更
			tabControl.conf.hideOpacity -= tabControl.conf.execNum;
			tabControl.setOpacity( tabControl.conf.hideContent, tabControl.conf.hideOpacity );
			// 再起呼出
			window.setTimeout('tabControl.shrink()',tabControl.conf.hideHeightSpeed);
		} else {
			// 透明度設定を初期化
			tabControl.conf.hideOpacity = 10;
			// 表示中タブを非表示
			tabControl.conf.hideContent.style.display = 'none';
			// 表示中タブの透明度・高さを初期化
			tabControl.setOpacity( tabControl.conf.hideContent, 10 );
			tabControl.conf.hideContent.style.height = tabControl.conf.contentsHeight[ tabControl.conf.hideContent.id ]+ 'px';
			// アクティブなタブを表示
			tabControl.conf.activeContent.style.display = 'block';
			tabControl.view();
		}
	},
	//-----------------------------------------
	// 表示
	//-----------------------------------------
	view : function() {
		if( tabControl.conf.viewOpacity < 10 ) {
			// 透明度を変更
			tabControl.conf.viewOpacity += 0.5;
			tabControl.setOpacity( tabControl.conf.activeContent, tabControl.conf.viewOpacity );
			// 再起呼出
			window.setTimeout('tabControl.view()',tabControl.conf.viewSpeed);
		} else {
			tabControl.conf.viewOpacity = 0;
			// 実行中フラグを解除
			tabControl.conf.changing = false;
		}
	},
	//-----------------------------------------
	// 透明度をセットする
	//-----------------------------------------
	setOpacity : function( element, value ) {
		element.style.filter = 'alpha(opacity=' + (value * 10) + ')';
		element.style.MozOpacity = value / 10;
		element.style.opacity = value / 10;
		element.alpha = value;
	},
	//-----------------------------------------
	// 対象要素のサイズを取得する
	//-----------------------------------------
	getElementSize : function( element ) {
		var w = element.offsetWidth;
		var h = element.offsetHeight;
		return ({ 'width': w, 'height': h });
	},
	//-----------------------------------------
	// イベントに関数を付加する
	//-----------------------------------------
	addEvent : function( target, event, func ) {
		try {
			target.addEventListener(event, func, false);
		} catch (e) {
			target.attachEvent('on' + event, func);
		}
	}
}
// 実行
tabControl.addEvent( window, 'load', tabControl.init );