(function($){
	$(document).ready(function(){
		var 
		funcNumberFormat = function(number){
			return number.toString().replace(/([0-9]+?)(?=(?:[0-9]{3})+$)/g , '$1,');
		}, 
		//config
		cfg = {
			api:{
				url:'https://alamode1.xsrv.jp', 
				shopId:18, 
				displayKeywords:'【スタッフコーデ】', 	//表示キーワード
				displayKeywordsFlag:1, 					//キーワードフラグ※0 => 'OR検索', 1 => 'AND検索'
				sortItem:'id', 							//並び順対象項目
				sortRows:'1', 							//昇降順
				seasonCodeReflect:'0', 					//季節コード※0 => '反映しない', 1 => '反映する'
				stockFlg:'1', 							//在庫切れ商品※0 => '表示しない', 1 => '表示する'
				limit:30 								//上限数
			}, 
			staffCoordinateCarousel:{
				items:6, 
				itemsDesktop:[1199, 6],
				itemsDesktopSmall:[979, 6],
				itemsTablet:[768, 6],
				itemsMobile:[479, 6],
				autoPlay:3000,
				singleItem:false, 
				navigation:true, 
				navigationText:[
					'<img src="/img/common/button/carousel/prev.png" alt="前へ">', 
					'<img src="/img/common/button/carousel/next.png" alt="次へ">' 
				], 
				slideSpeed:500, 
				paginationSpeed:700 
			}, 
			detail:{
				detailOpacitySpeed:400, 
				cssMarginDetailArea:30 
			} 
		}, 
		//constructor
		cst = new function(){
			this.getItemCode = location.href.match(/\/fs\/alamode\/([a-z0-9_\-]+)/);
			this.itemCode = this.getItemCode !== null?this.getItemCode[1]:'';
			this.staffList = new Array();
			this.flagGetDetail = true;
		}, 
		funcGetStaffCoordinateCarousel = function(){
			var 
			eleStaffCoordinateCarousel = $('#staff_coordinate_carousel'), 
			eleStaffCoordinateCarouselParent = $('#staff_coordinate_carousel_parent');
			$.ajax({
				url:cfg.api.url + '/shop/set_item/search/index.php?request=get_list' + 
				'&shop_id=' + cfg.api.shopId + 
				'&season_code_reflect=' + cfg.api.seasonCodeReflect + 
				'&display_keywords=' + encodeURIComponent(cfg.api.displayKeywords) + 
				'&display_keywords_flag=' + cfg.api.displayKeywordsFlag + 
				'&item_code=' + encodeURIComponent(cst.itemCode) + 
				'&sort_item=' + cfg.api.sortItem + 
				'&sort_rows=' + cfg.api.sortRows + 
				'&limit=' + cfg.api.limit, 
				dataType:'jsonp', 
				error:function(jqXHR, textStatus, errorThrown){
					console.log(textStatus);
				}, 
				success:function(response, textStatus, jqXHR){
					if(response.total === '0')
					return false;
					for(var i = 0, l = response.set_item.length;i < l;i++){
						var 
						d = response.set_item[i], 
						id = d.comment.match(/【id:(.+?)】/), 
						keyId = id === null?'-1':id[1], 
						comment = d.comment.replace(/\r?\n/g, "").match(/【comment:(.+?)】/), 
						staffInfo = typeof cst.staffList[keyId] !== 'undefined'?
						cst.staffList[keyId]:{
							name:'', 
							size:'' 
						}, 
						dataComment = comment === null?'':comment[1];
						eleStaffCoordinateCarousel
						.append('\
							<div class="item">\
								<a href="javascript:void(0);" class="staff_coordinate_item_check_button" data-set_item_code="' + d.set_code + '" data-coordinate_img="' + d.img_url_0 + '" data-comment="' + dataComment + '" data-staff_id="' + keyId + '" data-name="' + staffInfo.name + '" data-size="' + staffInfo.size + '">\
									<img src="' + d.img_url_0 + '" alt="スタッフコーディネート">\
								</a>\
							</div>\
						');
					}
					//詳細表示用イベントリスナー
					$('.staff_coordinate_item_check_button').each(function(){
						$(this).on('click', function(){
							var 
							dataSetItemCode = $(this).data('set_item_code'), 
							dataCoordinateImg = $(this).data('coordinate_img'), 
							dataComment = $(this).data('comment'), 
							dataStaffId = $(this).data('staff_id'), 
							dataName = $(this).data('name'), 
							dataSize = $(this).data('size');
							showDetail(dataSetItemCode, dataCoordinateImg, dataComment, dataStaffId, dataName, dataSize);
						});
					});
					eleStaffCoordinateCarousel.owlCarousel(cfg.staffCoordinateCarousel);
					eleStaffCoordinateCarouselParent.show();
				} 
			});
		}, 
		showDetail = function(setItemCode, coordinateImg, comment, staffId, name, size){
			if(cst.flagGetDetail === false)
			return false;
			cst.flagGetDetail = false;
			$('#staff_coordinate_detail_area').html('\
				<section id="staff_coordinate_detail_area_inner" style="width:950px; margin-left:-475px; position:absolute; left:50%; z-index:2; background:#fff; box-shadow:6px 6px 10px rgba(0,0,0,0.4); opacity:0; filter:alpha(opacity=0);">\
					<div class="clearfix" style="width:94%; margin:15px auto; position:relative;">\
						<a href="javascript:void(0);" id="staff_coordinate_detail_button_close" style="width:26px; height:26px; line-height:26px; font-size:14px; background:#FFF; border:solid #999 2px; border-radius:16px; -webkit-border-radius:16px; -moz-border-radius:16px; box-shadow:0 0 3px rgba(0,0,0,0.4); position:absolute; top:5px; right:-5px; display:block;">\
							×\
						</a>\
						<div style="width:45%; float:left;">\
							<img src="' + coordinateImg + '" style="width:100%;" onerror="this.src=\'/img/common/error.gif\';">\
						</div>\
						<div style="width:55%; float:right;">\
							<div style="position:relative; width:90%; margin:auto;">\
								<div class="clearfix" style="width:100%; margin:0 auto 20px;">\
									<img src="/item/coordinate/staff/img/staff/' + staffId + '.jpg" style="width:26%; float:left;" onerror="this.src=\'/img/common/error.gif\';">\
									<div style="width:70%; float:right;">\
										<img src="/item/coordinate/staff/img/model_coordinate_title.png" style="width:68%; margin:0 auto 20px;">\
										<span style="font-size:13px; line-height:22px; display:block;">\
											【' + name + '　' + size + '】\
										</span>\
									</div>\
								</div>\
								' + (comment !== '' && comment !== null?'\
								<div style="width:100%; margin:10px 0;">\
									<p style="font-size:13px; text-align:left;">\
										' + comment + '\
									</p>\
								</div>':'') + '\
								<div style="width:100%; margin:10px 0;">\
									<p style="color:#FFF; font-size:16px; line-height:32px; background:#000;">\
										＼合わせたアイテムはコレ／\
									</p>\
									<ul id="staff_coordinate_detail_item_list" style="width:100%; height:-moz-calc(100% - 79px); height:calc(100% - 79px); height:-webkit-calc(100% - 79px); background:#d4d4d4; padding-bottom:10px; text-align:left; overflow:auto; position:relative;">\
										<div class="load_animation" style="position:absolute; top:50%; left:50%; margin-top:-16px; margin-left:-16px;"></div>\
									</ul>\
								</div>\
							</div>\
						</div>\
					</div>\
				</section>\
			')
			.height($('.layout_body').eq(0).outerHeight(true))
			.show();
			
			$('#staff_coordinate_detail_area_inner')
			.css('top', ($(window).scrollTop() + cfg.detail.cssMarginDetailArea) + 'px')
			.animate(
				{
					'opacity':'1'
				}, 
				cfg.detail.detailOpacitySpeed 
			);
			
			$('#staff_coordinate_detail_button_close').on('click', function(){
				if(cst.flagGetDetail === false)
				return false;
				$('#staff_coordinate_detail_area_inner')
				.animate({
					'opacity':0
				}, 
				cfg.detail.detailOpacitySpeed, 
				function(){
					$(this).remove();
					$('#staff_coordinate_detail_area').hide();
				});
			});
			
			//着用商品情報取得
			$.ajax({
				url:cfg.api.url + '/shop/set_item/search/index.php?request=get_detail&shop_id=' + cfg.api.shopId + '&set_code=' + setItemCode + '&stock_flg=' + cfg.api.stockFlg, 
				dataType:'jsonp', 
				error:function(jqXHR, textStatus, errorThrown){
					console.log(textStatus);
					cst.flagGetDetail = true;
				}, 
				success:function(data, textStatus, jqXHR){
					for(var i = 0, l = data.set_item.length;i < l;i++)
					$('#staff_coordinate_detail_item_list').append('\
							<li>\
								<div class="clearfix" style="width:90%; margin:0 auto 10px; padding-top:10px; position:relative;">\
									' + (data.set_item[i].nostock === '1'?'\
									<a href="/fs/alamode/' + data.set_item[i].item_code + '" target="_blank" style="width:112px; height:112px; margin:auto; text-align:center; overflow:hidden; display:block; position:relative; float:left;">\
										<div style="width:100%; height:100%; color:#FFF; line-height:112px; background:rgba(0,0,0,.30); position:absolute; top:0; left:0; z-index:1;">売り切れ</div>\
										<img src="' + data.set_item[i].item_img_dir + '" style="width:112px; margin:auto;" onerror="this.src=\'/img/common/error.gif\';">\
									</a>\
									':'\
									<a href="/fs/alamode/' + data.set_item[i].item_code + '" target="_blank" style="width:112px; margin:auto; text-align:center; display:block; float:left;">\
										<img src="' + data.set_item[i].item_img_dir + '" style="width:112px; margin:auto;" onerror="this.src=\'/img/common/error.gif\';">\
									</a>\
									') + '\
									<div style="width:-moz-calc(100% - 120px); width:calc(100% - 120px); width:-webkit-calc(100% - 120px); text-align:left; float:right;">\
										<h3 class="item_name">\
											' + data.set_item[i].short_name + '\
										</h3>\
										<div class="price">\
											' + funcNumberFormat(data.set_item[i].price) + '円\
											<span class="tax_flag">\
												(税抜)\
											</span>\
										</div>\
										<a href="/fs/alamode/' + data.set_item[i].item_code + '" target="_blank" style="	background:#FFF; border:solid #000 1px; padding:4px 8px; position:absolute; bottom:0; right:0;">\
											<span>ご購入はこちら ≫</span>\
										</a>\
									</div>\
								</div>\
							</li>\
					');
					cst.flagGetDetail = true;
				}
			});
		};
		
		$.ajax({
			url:'/item/coordinate/staff/configs/staff.json?' + Math.random(), 
			dataType:'json', 
			error:function(jqXHR, textStatus, errorThrown){
				console.log(textStatus);
			}, 
			success:function(response, textStatus, jqXHR){
				var 
				code = '\
					<div id="staff_coordinate_carousel_parent" style="width: 100%; margin: 8px auto 20px; display:none; clear:both;">\
						<h2 style="font-size:14px; font-weight:bold; text-align:left; line-height:40px; margin-bottom:10px;">\
							このアイテムを使ったコーディネート<!--<br>\
							▼写真をクリック▼-->\
						</h2>\
						<div id="staff_coordinate_carousel" class="owl-carousel"></div>\
					</div>\
				';
				if($('#item_color_list_parent')[0]){
					$('#item_color_list_parent').after(code);
				}else 
				if($('#main_item_list_parent')[0]){
					$('#main_item_list_parent').after(code);
				}else{
					$('.FS2_additional_image_itemdetail_container').eq(0).append(code);
				}
				$('body').append('\
					<div id="staff_coordinate_detail_area" style="width:100%; background:rgba(255, 255, 255, 0.9); position:absolute; top:0; left:0; z-index:2147483647; display:none;"></div>\
				');
				cst.staffList = response;
				funcGetStaffCoordinateCarousel();
			}
		});
	});
})(jQuery);