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

summary:show selected thumbnail's large image.

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

new function() {
	
	var ImagesMaskId = 'images_mask';
	var ImagesMenuId = 'images_menu';
	
	var fadeInTime = 600;
	var fadeOutTime = 200;
	var fadeOpacity = 0.5;
	var animateTime = 400; // msec
	
	var $visibleImage = null;
	var moving = false;
	
	$(document).ready( function() {
		init();
	});
	
	/**
	 * 初期化
	 */
	function init() {
		
		var $menu = $( '#' + ImagesMenuId );
		
		if ( $menu.length ) {
			$menu.
				children( 'li' ).
					children( 'a' ).
						click( onClickMenu ).
					end().
				end();
		}
		
		var $list = $( '#' + ImagesMaskId ).children( 'ul' );
		var $firstImage = $list.children( 'li:first' ).children( 'img' );
		var $hiddenImages = $list.children( 'li:gt(0)' ).children( 'img' );
		
		$visibleImage = $firstImage;
		
		if ( $hiddenImages.length ) {
			$hiddenImages.fadeTo( 0, fadeOpacity );
		}
	}
	
	/**
	 * メニューをクリック
	 */
	function onClickMenu( e ) {
		
		if ( moving ) {
			return false;
		}
		
		var key = $(this).attr( 'href' );
		scrollImage( key );
		
		return false;
	}
	
	/**
	 * イメージを移動
	 */
	function scrollImage( key ) {
		
		var $list = $( '#' + ImagesMaskId ).children( 'ul' );
		var $nextImage = $( key ).children( 'img' );
		
		if ( $nextImage.get(0) == $visibleImage.get(0) ) {
			return;
		}
		
		moving = true;
		
		if ( $list.length
		&&	$nextImage.length ) {
			
			$visibleImage.fadeTo( fadeOutTime, fadeOpacity, function(){
				
				var left = $nextImage.position().left * -1;
				
				$list.animate( { 'left':left }, animateTime, 'swing', function(){
					$nextImage.fadeTo( fadeInTime, 1, function() {
						$visibleImage = $nextImage;
						moving = false;
					} );
				});
			});
		}
	}
}