/**
 * [すべての基幹となるオブジェクト]
 *
 * @type {[Object]}
 */
var suumo = suumo || {};
/**
 * [frDetail fr詳細用クラス]
 * @constructor
 */
suumo.frDetail = function() {};

/**
 * [詳細画面スライダー用名前空間]
 */
suumo.frDetail.dtlSlider = {};

/**
 * [詳細画面スライダー用パラメータ]
 */
// ナビゲーション1ページの最大パネル数
suumo.frDetail.dtlSlider.NAVI_PNL_MAX = 15;
// メインスライダーの画像横幅最大値
suumo.frDetail.dtlSlider.MAIN_IMG_WIDTH = 478;
// メインスライダーの画像縦幅最大値
suumo.frDetail.dtlSlider.MAIN_IMG_HEIGHT = 478;
// ナビゲーションパネルの画像横幅最大値
suumo.frDetail.dtlSlider.NAVI_IMG_WIDTH = 98;
// ナビゲーションパネルの画像縦幅最大値
suumo.frDetail.dtlSlider.NAVI_IMG_HEIGHT = 98;

/**
 * [init 詳細画面スライダー初期化]
 * @param  {[String]} options.targetID         スライダー全体のラッパーID.
 * @param  {[String]} options.targetSliderID   写真スライダー本体のID.
 * @param  {[String]} options.targetNaviID     ナビスライダー本体のID.
 * @param  {[String]} options.targetCaptionID     スライダー用キャプションのID.
 * @param  {[String]} options.targetNaviPager    ナビスライダー用ナビゲーションボタンのセレクタ.
 * @param  {[String]} options.targetNaviPnl     ナビスライダー用パネルボタンのセレクタ.
 */
suumo.frDetail.dtlSlider.init = function(options){
	var idx = 0;
	var naviIdx = 0;
	var $targetID = $(options.targetID);
	var $targetSld = $(options.targetSliderID);
	var $targetNavi = $(options.targetNaviID);
	var $slidePnl = $targetSld.find('li');
	var $naviPage = $targetNavi.find('li');
	var $naviPnls = $targetNavi.find(options.targetNaviPnl);
	var $tmpImg;

	// 初期値設定
	var maxIdx = $slidePnl.length -1;

	// 各種パラメータを保持
	$targetID.data('$targetSld', $targetSld);
	$targetID.data('$targetNavi', $targetNavi);
	$targetID.data('$slidePnl', $slidePnl);
	$targetID.data('$naviPage', $naviPage);
	$targetID.data('$naviPnls', $naviPnls);
	$targetID.data('$pagers', $targetID.find(options.targetNaviPager));
	$targetID.data('$targetCaption', $(options.targetCaptionID));
	$targetID.data('idx', idx);
	$targetID.data('naviIdx', naviIdx);
	$targetID.data('maxIdx', maxIdx);
	$targetID.data('navLoadCnt', 0);

	// 画像サイズリサイズ（メイン）
	for(var i = 0, j = $slidePnl.length; i < j; i++){
		$tmpImg = $slidePnl.eq(i).find('img');
		suumo.frDetail.dtlSlider.lazyload($tmpImg, i, $targetID, suumo.frDetail.dtlSlider.setImgMain);
	}
	// 画像サイズリサイズ（ナビゲーション）
	for(i = 0, j = $naviPnls.length; i < j; i++){
		$tmpImg = $naviPnls.eq(i).find('img');
		suumo.frDetail.dtlSlider.lazyload($tmpImg, i, $targetID, suumo.frDetail.dtlSlider.setImgNavi);
	}
};

/**
 * [setImgMain 詳細画面スライダー 画像サイズ・位置調整（メイン用）]
 * @param  {[object]} $img   画像オブジェクト.
 * @param  {[number]} idx   インデックス.
 */
suumo.frDetail.dtlSlider.setImgMain = function($img, idx){
	suumo.frDetail.dtlSlider.resizeImg($img, suumo.frDetail.dtlSlider.MAIN_IMG_WIDTH, suumo.frDetail.dtlSlider.MAIN_IMG_HEIGHT);
	suumo.frDetail.dtlSlider.setImgPos($img);
	if(idx > 0){
		$img.closest('li').hide();
	}
};

/**
 * [setImgNavi 詳細画面スライダー 画像サイズ・位置調整（ナビゲーション用）]
 * @param  {[object]} $img   画像オブジェクト.
 * @param  {[number]} idx   インデックス.
 * @param  {[object]} $slider  スライダー本体のオブジェクト.
 */
suumo.frDetail.dtlSlider.setImgNavi = function($img, idx, $slider){
	var loadCnt, $naviPage;
	suumo.frDetail.dtlSlider.resizeImg($img, suumo.frDetail.dtlSlider.NAVI_IMG_WIDTH, suumo.frDetail.dtlSlider.NAVI_IMG_HEIGHT);
	suumo.frDetail.dtlSlider.setImgPos($img);
	loadCnt = $slider.data('navLoadCnt');
	loadCnt++;
	if(loadCnt >= $slider.data('maxIdx') + 1){
		$naviPage = $slider.data('$naviPage');
		$naviPage.hide();
		$naviPage.eq(0).show();
	}
	$slider.data('navLoadCnt', loadCnt);
};

/**
 * [lazyload 詳細画面スライダー 画像の遅延読み込み]
 * @param  {[object]} $img   画像オブジェクト.
 * @param  {[function]} $callback   コールバック関数.
 */
suumo.frDetail.dtlSlider.lazyload = function($img, idx, $slider, callback){
	var path;
	path = $img.attr('data-src');
	$img.hide().bind('load', function(){
		var $elem = $(this);
		var toString = Object.prototype.toString;
		$elem.show();
		if(toString.call(callback) === '[object Function]'){
			callback($elem, idx, $slider);
		}
	}).bind('error', function(){
		$(this).show();
	});
	$img.attr('src', path);
};

/**
 * [chgSlider 詳細画面スライダー 写真スライダー変更]
 * @param  {[number]} nextIdx   次に表示するスライダーのidx.
 * @param  {[object]} $slider   スライダー本体のオブジェクト.
 */
suumo.frDetail.dtlSlider.chgSlider = function(nextIdx, $slider){
	var $slidePnl = $slider.data('$slidePnl');
	// アニメーション
	$slidePnl.hide();
	$slidePnl.eq(nextIdx).show();
};

/**
 * [chgNavi 詳細画面スライダー ナビスライダー変更]
 * @param  {[number]} nextNaviIdx   次に表示するナビスライダーのidx.
 * @param  {[object]} $slider      スライダー本体のオブジェクト.
 */
suumo.frDetail.dtlSlider.chgNavi = function(nextNaviIdx, $slider){
	var $naviPage = $slider.data('$naviPage');
	// アニメーション
	$naviPage.hide();
	$naviPage.eq(nextNaviIdx).show();
};

/**
 * [setCurrent 詳細画面スライダー カレント表示セット]
 * @param  {[number]} idx         次に表示するスライダーのidx.
 * @param  {[number]} naviIdx     次に表示するナビスライダーのidx.
 * @param  {[object]} $slider     スライダー本体のオブジェクト.
 */
suumo.frDetail.dtlSlider.setCurrent = function(idx, naviIdx, $slider){
	var actCls = 'is-active';
	var $naviPnls = $slider.data('$naviPnls');
	var $pagers = $slider.data('$pagers');
	// 現在設定されているカレントクラスを削除
	$naviPnls.removeClass(actCls);
	$pagers.removeClass(actCls);

	// 変更後のカレントクラスをセット
	$naviPnls.eq(idx).addClass(actCls);
	$pagers.eq(naviIdx).addClass(actCls);
};

/**
 * [setCaption 詳細画面スライダー キャプション文言セット]
 * @param  {[number]} idx         次に表示するスライダーのidx.
 * @param  {[object]} $slider     スライダー本体のオブジェクト.
 */
suumo.frDetail.dtlSlider.setCaption = function(idx, $slider){
	var $targetCaption = $slider.data('$targetCaption');
	var $slidePnl = $slider.data('$slidePnl');
	// キャプションの文言を変更
	$targetCaption.html($slidePnl.eq(idx).attr('data-caption'));
};

/**
 * [resizeImg 詳細画面スライダー 画像サイズ変更]
 * @param  {[object]} $img       リサイズ対象のimgオブジェクト.
 * @param  {[number]} maxWidth   リサイズする横幅の最大値.
 * @param  {[number]} maxHeight  リサイズする縦幅の最大値.
 */
suumo.frDetail.dtlSlider.resizeImg = function($img, maxWidth, maxHeight){
	var ratio, imgRatio, imgWidth, imgHeight;
	// 画像サイズ取得
	$img.css({width: '95%', height: 'auto'});
	imgWidth = $img.width();
	imgHeight = $img.height();
	// アスペクト比取得
	ratio = maxWidth / maxHeight;
	imgRatio = imgWidth / imgHeight;

	// 画像サイズが各最大値より小さい場合は処理を行わない
	if(imgWidth <= maxWidth && imgHeight <= maxHeight){
		// 画像表示位置調整
		suumo.frDetail.dtlSlider.setImgPos($img);
		return false;
	}

	// アスペクト比によって設定サイズを変更
	if(imgRatio > ratio){
		// widthが最大値より大きい場合
		$img.css('width', maxWidth);
	}else{
		// heightが最大値より大きい場合
		$img.css('height', maxHeight);
	}

	// 画像表示位置調整
	suumo.frDetail.dtlSlider.setImgPos($img);
};


/**
 * controller
 */
//スライダー機能初期化
var $slider = $('#js-dtlslider');
suumo.frDetail.dtlSlider.init({
	targetID: $slider,
	targetSliderID: '#js-dtlslider-main',
	targetNaviID: '#js-dtlslider-navi',
	targetCaptionID: '#js-dtlslider-caption',
	targetNaviPager: '.js-dtlslider-navi-pager',
	targetNaviPnl: '.js-dtlslider-navi-pnl'
});

//スライダー 次へボタン挙動
$('#js-dtlslider-main-btnnext').click(function(){
	var nextIdx, nextNaviIdx;
	var idx = $slider.data('idx');
	var naviIdx = $slider.data('naviIdx');
	var maxIdx = $slider.data('maxIdx');

	// 表示対象のスライダー用idxを取得
	nextIdx = idx + 1;
	if(nextIdx > maxIdx){
		nextIdx = 0;
	}

	// 表示対象のナビゲーション用idxを取得
	nextNaviIdx = Math.floor((nextIdx + 1) / suumo.frDetail.dtlSlider.NAVI_PNL_MAX) - 1;
	if((nextIdx + 1) % suumo.frDetail.dtlSlider.NAVI_PNL_MAX > 0){
		nextNaviIdx++;
	}

	// スライダー表示変更
	suumo.frDetail.dtlSlider.chgSlider(nextIdx, $slider);

	// ナビゲーション表示ページが違ったらページ変更
	if(naviIdx !== nextNaviIdx){
		suumo.frDetail.dtlSlider.chgNavi(nextNaviIdx, $slider);
	}

	// キャプション文言を変更
	suumo.frDetail.dtlSlider.setCaption(nextIdx, $slider);

	// 各スライダー表示中のindexを保持
	$slider.data('idx', nextIdx);
	$slider.data('naviIdx', nextNaviIdx);

	// 表示中パネルをカレント表示
	suumo.frDetail.dtlSlider.setCurrent(nextIdx, nextNaviIdx, $slider);
});

//スライダー 前へボタン挙動
$('#js-dtlslider-main-btnprev').click(function(){
	var prevIdx, prevNaviIdx;
	var idx = $slider.data('idx');
	var naviIdx = $slider.data('naviIdx');
	var maxIdx = $slider.data('maxIdx');

	// 表示対象のスライダー用idxを取得
	prevIdx = idx - 1;
	if(prevIdx < 0){
		prevIdx = maxIdx;
	}

	// 表示対象のナビゲーション用idxを取得
	prevNaviIdx = Math.floor((prevIdx + 1) / suumo.frDetail.dtlSlider.NAVI_PNL_MAX) - 1;
	if((prevIdx + 1) % suumo.frDetail.dtlSlider.NAVI_PNL_MAX > 0){
		prevNaviIdx++;
	}

	// スライダー表示変更
	suumo.frDetail.dtlSlider.chgSlider(prevIdx, $slider);

	// ナビゲーション表示ページが違ったらページ変更
	if(naviIdx !== prevNaviIdx){
		suumo.frDetail.dtlSlider.chgNavi(prevNaviIdx, $slider);
	}

	// キャプション文言を変更
	suumo.frDetail.dtlSlider.setCaption(prevIdx, $slider);

	// 各スライダー表示中のindexを保持
	$slider.data('idx', prevIdx);
	$slider.data('naviIdx', prevNaviIdx);

	// 表示中パネルをカレント表示
	suumo.frDetail.dtlSlider.setCurrent(prevIdx, prevNaviIdx, $slider);
});

// ナビスライダー内パネルボタン制御
$slider.data('$naviPnls').bind('click', function(){
	var $self, nextIdx, nextNaviIdx;
	var naviIdx = $slider.data('naviIdx');
	$self = $(this);
	nextIdx = Number($self.attr('data-idx'));

	// 表示対象のナビゲーション用idxを取得
	nextNaviIdx = Math.floor((nextIdx + 1) / suumo.frDetail.dtlSlider.NAVI_PNL_MAX) - 1;
	if((nextIdx + 1) % suumo.frDetail.dtlSlider.NAVI_PNL_MAX > 0){
		nextNaviIdx++;
	}

	// スライダー表示変更
	suumo.frDetail.dtlSlider.chgSlider(nextIdx, $slider);

	// ナビゲーション表示ページが違ったらページ変更
	if(naviIdx !== nextNaviIdx){
		suumo.frDetail.dtlSlider.chgNavi(nextNaviIdx, $slider);
	}

	// キャプション文言を変更
	suumo.frDetail.dtlSlider.setCaption(nextIdx, $slider);

	// 各スライダー表示中のindexを保持
	$slider.data('idx', nextIdx);
	$slider.data('naviIdx', nextNaviIdx);

	// 表示中パネルをカレント表示
	suumo.frDetail.dtlSlider.setCurrent(nextIdx, nextNaviIdx, $slider);
});

// ナビスライダーページャーボタン制御
$slider.data('$pagers').bind('click', function(){
	var naviIdx = $slider.data('naviIdx');
	var nextNaviIdx = Number($(this).attr('data-navidx'));
	if(naviIdx !== nextNaviIdx){
		suumo.frDetail.dtlSlider.chgNavi(nextNaviIdx, $slider);
	}

	// ナビスライダーのidxを保持
	$slider.data('naviIdx', nextNaviIdx);

	// 表示中パネルをカレント表示
	suumo.frDetail.dtlSlider.setCurrent($slider.data('idx'), nextNaviIdx, $slider);
});