/**
 * 画像スクロール
 *  トップ動画ニュース
 *  トップ写真ニュース
 *  サイド動画ニュース
 *  サイド写真ニュース
 *
 * @require jquery.scrollTo.js
 * @require jquery.em.js
 *
 * NOTE:
 *  .screen
 *    .sections   枠（固定幅、overflor:hidden）
 *      ul        スクロール面（全liが入る固定幅）
 *        li * N  1アイテム（固定幅）
 *    .scroll_controller
 *      .prev     前ボタン
 *      .next     次ボタン
 */

$(function(){
	$('.screen').each(function(){

		var screen = $(this);

		//移動秒
		var duration = 500;

		//前ボタン
		var prev = screen.find('.prev');
		//次ボタン
		var next = screen.find('.next');
		//スクロールペイン
		var pane = screen.find('.sections');

		//UL
		var ul = pane.find('ul');
		//LI郡
		var lis = ul.find('li');

		//現在値
		var index = 0;
		//最大値
		var maxIndex = lis.size();

		// ULのwidth設定
		ul.width(maxIndex*lis.width()+pane.width());

		//オートスクロール時間
		var autoScrollMSec = 5000;
		//オートスクロールインターバル
		var autoScrollIntval;

		//初期位置移動
		pane.scrollTo( 'li:eq(' + index + ')', 0, {axis: 'x'});

		//次へボタンアクション
		next.click(function(){
			onClickNext();
			stopAutoScroll();
		});

		//前へボタンアクション
		prev.click(function(){
			onClickPrev();
			stopAutoScroll();
		});

		//オートスクロール開始（継続）
		var startAutoScroll = function(){
			stopAutoScroll();
			autoScrollIntval = setInterval(function(){onClickNext();}, autoScrollMSec);
		};

		//オートスクロール停止
		var stopAutoScroll = function(){
			clearInterval(autoScrollIntval);
		};

		//オートスクロール開始
		//startAutoScroll();

		//フォントサイズ変更イベント（jquery.em.js）
		var onEmChange = function(){
			//paneのマージン
			var paneMargin = Number((pane.css('margin-top')).replace(/[^0-9]/g,'')) + Number((pane.css('margin-bottom')).replace(/[^0-9]/g,''));
			//スクロールペインの高さ＋ペインのマージン＋次、前ボタンの高さで、screenの高さ再設定
			screen.height(pane.height() + paneMargin);
		}

		//jquery.em.jsでのフォントサイズ変更時にもバインド再設定
		$(document).bind(
			'emchange',
			function(){
				onEmChange();
			}
		);

		//最初に高さ再設定
		onEmChange();

		//次に移動するアクション
		var onClickNext = function(){
			//アクションを無効
			next.unbind('click');

			if(index == maxIndex-1){
				//最後であれば
				//LIを複製して後ろに追加
				lis.clone().addClass('js_duplicated').appendTo(ul);
				//追加したLIに移動
				index++;
				pane.scrollTo( 'li:eq(' + index + ')', duration,
					{
						axis: 'x',
						onAfter: function(){
							//移動後に、indexを0に戻して
							index = 0;
							//もとの対応するLIに軸を戻す
							pane.scrollTo( 'li:eq(' + index + ')', 0, {axis: 'x'});
							//追加したLIを削除
							ul.find('.js_duplicated').remove();
							//アクションを有効
							next.click(function(){
								onClickNext();
								stopAutoScroll();
							});
						}
					}
				);
			}else{
				//通常時は次のLIに移動
				index++;
				pane.scrollTo( 'li:eq(' + index + ')', duration,
					{
						axis: 'x',
						onAfter: function(){
							//アクションを有効
							next.click(function(){
								onClickNext();
								stopAutoScroll();
							});
						}
					}
				);
			}
		};

		//前に移動するアクション
		var onClickPrev = function(){
			//アクションを無効
			prev.unbind('click');

			//オートスクロール停止
			stopAutoScroll();

			if(index == 0){
				//先頭であれば
				//LIを複製して後ろに追加
				lis.clone().addClass('js_duplicated').appendTo(ul);
				//LIの軸をずらす
				index = maxIndex;
				pane.scrollTo( 'li:eq(' + index + ')', 0, {axis: 'x'});
				//移動
				index--;
				pane.scrollTo( 'li:eq(' + index + ')', duration,
					{
						axis: 'x',
						onAfter: function(){
							//追加したLIを削除
							ul.find('.js_duplicated').remove();
							//アクションを有効
							prev.click(function(){
								onClickPrev();
								stopAutoScroll();
							});
						}
					}
				);
			}else{
				index--;
				pane.scrollTo( 'li:eq(' + index + ')', duration,
					{
						axis: 'x',
						onAfter: function(){
							//アクションを有効
							prev.click(function(){
								onClickPrev();
								stopAutoScroll();
							});
						}
					}
				);
			}
		};

	});
});