$(document).ready( function () {
	
	var tableTabsId = 'table#table-tabs';
	var selectedTabId = 'selected-tab';
	var tabContent = 'tab-content';
	var opacityValue = 0.5;
	var fadeTime = 0.5; // sec
	
	// タブを表示
	$( tableTabsId )
			.css({'display': 'block'});
	
	// 最初のタブが選択されているようにする
	$(tableTabsId + ' th:first')
			.attr('id', selectedTabId)
			.css({'opacity': 1.0});
			
	// タブのコンテンツを最初のタブに設定
	$('#' + tabContent)
			.css({'display': 'block'})
			.html( $('.' + tabContent + ':first').html() );
	// 各タブのコンテンツ
	$('.' + tabContent).css({'display': 'none'});
	
	// マウスイベントの処理
	$(tableTabsId + ' th')
			.mouseover( function () {
				// マウスをタブに当てたとき
				$(this)
						.not('#' + selectedTabId)
						.css({
							'cursor': 'pointer',
							'font-weight': 'bold',
							'opacity': 1.0
						});
			})
			.mouseout( function () {
				// マウスをタブから外したとき
				$(this)
						.not('#' + selectedTabId)
						.css({
							'cursor': 'normal',
							'font-weight': 'normal',
							'opacity': opacityValue
						});
			});
	
	// タブがクリックされたときの操作
	$(tableTabsId + ' th')
		.click( function () {
			/*
			 * 選択されているタブの変更
			 */
			$('#' + selectedTabId )
					.css({
						'cursor': 'normal',
						'font-weight': 'normal',
						'opacity': opacityValue
					})
					.removeAttr('id');
			$(this)
					.css({
						'cursor': 'pointer',
						'opacity': 1.0
					})
					.attr('id', selectedTabId);
					
			/*
			 * タブのコンテンツを入れ替える
			 */
			// 選択するタブのポジションを取得
			position = 0;
			for ( i = 0; i < $(tableTabsId + ' th').length; i++ ) {
				// 選択中のタブかどうか
				if ( $(tableTabsId + ' th').eq( i ).attr('id') == selectedTabId ) {
					position = i;
					break;
				}
			}
			
			// HTMLを書き換える
			setTimeout( function( obj ) {
				$( '#' + tabContent ).html( $('div.' + tabContent ).eq( i ).html() );
			}, fadeTime * 1000 );
			
			// タブのコンテンツを非表示
			$('#' + tabContent ).slideUp( fadeTime * 1000 );
			
			// タグのコンテンツを表示
			setTimeout( function() {
					$( '#' + tabContent ).slideDown( fadeTime * 1000);
				}
				, fadeTime * 1000 
			);
		});
});