(function($) {
$(function() {
	//ウィンドウサイズ
	var winW = 0;
	var winH = 0;
	//画像サイズ取得
	var imgW = $('#view img').width();
	var imgH = $('#view img').height();
	
	fitImageSize();
	
	//アニメーションスピード
	var _dx =200;
	//画像の初期位置
	var _posX = 0;
	//マウスの位置
	var _mouseX = 0;
	//画面中央
	var _winCenter =  winW / 2;
	//移動方向
	var _xvec = -0.15;
	
	//サムネイル画像サイズ
	var _thumWidth = 104;

	//画像をウィンドウに合わせる
	
	
	function fitImageSize() {
		winW = $(window).width();
		winH = $(window).height();
	
		var scaleW = winW / imgW;
		var scaleH = winH / imgH;
		var fixScale = Math.max(scaleW, scaleH);
		var setW = imgW * fixScale;
		var setH = imgH * fixScale;
		var moveX = Math.floor((winW - setW) / 2);
		var moveY = Math.floor((winH - setH) / 2);
	
	/*	$('#view img').css({
			'width': setW,
			'height': setH,
			'left' : moveX,
			'top' : moveY
		});*/
	}
	
		 	
	$('#photo')
		//サムネイルを画面下に配置
		//.css('top', winH - $('#photo').outerHeight())
		//サムネイル全てのWidthを取得
		.find('ul li').each(function(){
			_thumWidth +=  $(this).outerWidth(true);
		})
		.end()
		//サムネイルの全体のwidthをliの合計にする
		.find('ul').css('width', _thumWidth)

		.end()
		.mousemove(function(e) {
			//マウスのX座標取得
			_mouseX = e.pageX;
			//xvec（移動する方向）マウスがステージの中心より左だったらマイナス、右だったらプラス  
			_xvec =  (_winCenter - _mouseX) / _dx; 
		});

	//リサイズしたら実行
/*	$(window).resize(function(){
		fitImageSize();
		//サムネイルを画面下に配置
		//$('#photo').css('top', winH - $('#photo').outerHeight());
		_winCenter =  winW / 2;
	});*/
	
	
	//サムネイルがクリックされたら
	$('#photo a').click(function(e) {
		/*//aリンクの動作を停止
		e.preventDefault();
		//次の画像URLを取得
		var nextImg = $(this).attr('href');*/

		/*$('#view')
			.empty() //子要素の削除
			.hide()	//非表示
			.append('<img src="'+nextImg+'" />')	//新しい画像を配置
			.fadeIn();		//フェードインで表示*/
		
		//画像を画面サイズに合わせる
		imgW = $('#view img').width();
		imgH = $('#view img').height();
		fitImageSize();
	});
	
	//アニメーション処理
	setInterval(function(){
		//左方向に移動しているときは一番右の画像が見えたら止まる
		if (_xvec < 0) {
			if(_posX >(986 - _thumWidth) - 10 ) { //980を変えるとスライド終わりの余白が変更される
				$('#photo ul').css("margin-left",_posX+"px");
				_posX += _xvec;
			}
		}
		//右方向に移動しているときは一番左の画像が見えたら止まる
		else {
			if(_posX < 0 ) {
				$('#photo ul').css("margin-left",_posX+"px");
				_posX += _xvec;
			}
		}
	}, 1);
	
});
})(jQuery);