/*
======== table of content. =================================

summary: scroll and show contents when tab button is clicked.

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

new function() {
	
	var scrollTabClass = 'scrollTab';
	var menuClass = 'menu';
	var prevButtonClass = 'prevButton';
	var nextButtonClass = 'nextButton';
	var tabButtonSelector = 'ul li a';
	var contentsClass = 'contents';
	var scrollClass = 'scroll';
	var tabContentsClass = 'tab_contents';
	
	var visibleClass = 'visible';
	var disabledClass = 'disabled';
	var selectedClass = 'selected';
	
	var fadeInTime = 600;
	var fadeOutTime = 200;
	var fadeOpacity = 0.5;
	var animateTime = 400; // msec
	
	var moving = false;
	var scrollHeight = [];
	
	$(document).ready( function() {
		init();
	});
	
	/**
	 * 初期化
	 */
	function init() {
		
		var i = 0;
		var $scrollTab = $( '.' + scrollTabClass );
		
		$scrollTab.each( function() {
			
			var $menu = $(this).find( '.' + menuClass );
			var $prevButton = $menu.find( '.' + prevButtonClass );
			var $nextButton = $menu.find( '.' + nextButtonClass );
			var $tabButtons = $menu.find( tabButtonSelector );
			
			$prevButton.click( onClickPrevButton );
			$nextButton.click( onClickNextButton );
			$tabButtons.click( onClickTabButton );
			
			var $contents = $(this).find( '.' + contentsClass );
			var $scroll = $contents.find( '.' + scrollClass );
			var $firstContents = $scroll.find( '.' + tabContentsClass + ':first' );
			var $hiddenContents = $scroll.find( '.' + tabContentsClass + ':gt(0)' );
			
			$firstContents.addClass( visibleClass );
			
			// $contents.height( $firstContents.height() );
			$contents.height( $scroll.height() );
			scrollHeight[ i ] = $scroll.height();
			setInterval( checkScrollHeight, 300 );
			
			fixMenu( $(this) );
			
			if ( $hiddenContents.length ) {
				$hiddenContents.fadeTo( 0, fadeOpacity );
			}
			
			i ++;
		});
		
		// IE PNG対応
		if ( typeof( DD_belatedPNG ) !== 'undefined' ) {
			DD_belatedPNG.fix( '.' + scrollTabClass + ' .dd_png' );
		}
	}
	
	/**
	 * スクロール部の高さを調査
	 */
	function checkScrollHeight() {
		
		var i = 0;
		var $scrollTab = $( '.' + scrollTabClass );
		
		$scrollTab.each( function() {
			
			var $contents = $(this).find( '.' + contentsClass );
			var $scroll = $contents.find( '.' + scrollClass );
			
			if ( scrollHeight[ i ] != $scroll.height() ) {
				$contents.height( $scroll.height() );
				scrollHeight[ i ] = $scroll.height();
			}
			
			i ++;
		});
	}
	
	/**
	 * タブをクリック
	 */
	function onClickTabButton( e ) {
		
		if ( moving ) {
			return false;
		}
		
		var key = $(this).attr( 'href' );
		scrollContents( key );
		
		return false;
	}
	
	/**
	 * 前へボタンをクリック
	 */
	function onClickPrevButton( e ) {
		
		var $prevButton = $(this);
		
		if ( $prevButton.hasClass( disabledClass ) ) {
			return false;
		}
		
		var $menu = getParentClass( $prevButton, menuClass );
		var $currentSelected = $menu.find( '.' + selectedClass );
		var $prev = $currentSelected.parent().prev( 'li' ).children( 'a' );
		var key = $prev.attr( 'href' );
		
		scrollContents( key );
		
		return false;
	}
	
	/**
	 * 次へボタンをクリック
	 */
	function onClickNextButton( e ) {
		
		var $nextButton = $(this);
		
		if ( $nextButton.hasClass( disabledClass ) ) {
			return false;
		}
		
		var $menu = getParentClass( $nextButton, menuClass );
		var $currentSelected = $menu.find( '.' + selectedClass );
		var $next = $currentSelected.parent().next( 'li' ).children( 'a' );
		var key = $next.attr( 'href' );
		
		scrollContents( key );
		
		return false;
	}
	
	/**
	 * コンテンツを移動
	 */
	function scrollContents( key ) {
		
		var $nextContents = $( key );
		var $scrollTab = getParentClass( $nextContents, scrollTabClass );
		var $visibleContents = $scrollTab.find( '.' + visibleClass );
		
		if ( $visibleContents.length
		&&	$visibleContents.get(0) == $nextContents.get(0) ) {
			return;
		}
		
		moving = true;
		
		$visibleContents.removeClass( visibleClass );
		$nextContents.addClass( visibleClass );
		
		fixMenu( $scrollTab );
		
		$visibleContents.fadeTo( fadeOutTime, fadeOpacity, onFadeOutContents );
	}
	
	/**
	 * 表示コンテンツのフェードアウト完了
	 */
	function onFadeOutContents() {
		
		var $fadedContents = $(this);
		var $scrollTab = getParentClass( $fadedContents, scrollTabClass );
		var $contents = $scrollTab.find( '.' + contentsClass );
		var $scroll = $contents.find( '.' + scrollClass );
		var $visibleContents = $scrollTab.find( '.' + visibleClass );
		
		if ( $scroll.length
		&&	$visibleContents.length ) {
			
			var left = Math.floor( $visibleContents.position().left ) * -1;
			// var height = Math.floor( $visibleContents.height() );
			
			// $contents.animate( { 'height' : height }, animateTime, 'swing' );
			$scroll.animate( { 'left' : left }, animateTime, 'swing', onScrollContents );
			
		}
	}
	
	/**
	 * スクロール完了
	 */
	function onScrollContents() {
		
		var $scroll = $(this);
		var $visibleContents = $scroll.find( '.' + visibleClass );
		
		if ( $visibleContents.length ) {
			
			$visibleContents.fadeTo( fadeInTime, 1, onFadeInContents );
		}
	}
	
	/**
	 * 表示コンテンツのフェードイン完了
	 */
	function onFadeInContents() {
		
		moving = false;
	}
	
	/**
	 * 直上の対象クラスを取得
	 */
	function getParentClass( $child, className ) {
		
		var $parent = $child.parent();
		
		if ( $parent == null ) {
			return null;
		}
		
		if ( $parent.hasClass( className ) ) {
			return $parent;
		}
		else {
			return getParentClass( $parent, className );
		}
	}
	
	/**
	 * メニューを調整
	 */
	function fixMenu( $scrollTab ) {
		
		var $visibleContents = $scrollTab.find( '.' + visibleClass );
		var $tabContents = $scrollTab.find( '.' + tabContentsClass );
		var $firstContents = $tabContents.filter( ':first' );
		var $lastContents = $tabContents.filter( ':last' );
		var visibleId = $visibleContents.attr( 'id' );
		
		var $menu = $scrollTab.find( '.' + menuClass );
		var $tabButtons = $menu.find( tabButtonSelector );
		var $selectedButton = $tabButtons.filter( '[href$=#'+visibleId+']' );
		
		var $prevButton = $scrollTab.find( '.' + prevButtonClass );
		var $nextButton = $scrollTab.find( '.' + nextButtonClass );
		
		$tabButtons.removeClass( selectedClass );
		$selectedButton.addClass( selectedClass );
		
		if ( $visibleContents.get(0) == $firstContents.get(0) ) {
			$prevButton.addClass( disabledClass );
		}
		else {
			$prevButton.removeClass( disabledClass );
		}
		
		if ( $visibleContents.get(0) == $lastContents.get(0) ) {
			$nextButton.addClass( disabledClass );
		}
		else {
			$nextButton.removeClass( disabledClass );
		}
	}
}