var HotpepBeauty = function(){};

////////////////////////////////////////
// スタートページ（初期値）
////////////////////////////////////////
HotpepBeauty.start = 1;

////////////////////////////////////////
// データ表示件数
////////////////////////////////////////
HotpepBeauty.count = 10;

////////////////////////////////////////
// ある地点からの範囲内のサロンの検索
// 1: 300m
// 2: 500m
// 3: 1000m (初期値)
// 4: 2000m
// 5: 3000m
////////////////////////////////////////
HotpepBeauty.range = 2;

////////////////////////////////////////
// 検索結果の並び順
// 0: ランダム(初期値)
// 1: サロン名かな順
// 2: 小エリアコード順
// 3: ビューティーおすすめ順
////////////////////////////////////////
HotpepBeauty.order = 3;

HotpepBeauty.affi_1 = '<a href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2169233&pid=878551707&vc_url=';
HotpepBeauty.affi_2 = '" target="_blank" ><img src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2169233&pid=878551707" height="1" width="1" border="0">';
HotpepBeauty.affi_3 = '</a>';

HotpepBeauty.qry = {
	url		: 'http://webservice.recruit.co.jp/beauty/salon/v1/',
	params	: {
		key				: '27825066dac9e9fb',
		format			: 'jsonp',
		callback		: 'HotpepBeauty.callBackFuncSalon',
		order			: HotpepBeauty.order,
		start			: HotpepBeauty.start,
		count			: HotpepBeauty.count,
		range			: HotpepBeauty.range,
		service_area	: 'SI',
		middle_area		: 'ID'
	}
};

HotpepBeauty.callBackFuncSalon = function( jsondata ){
	var jsonResults = jsondata.results;
	
	var pageDataMap = {
		allNum		: jsonResults.results_available,
		perPageNum	: HotpepBeauty.count,
		startNum	: jsonResults.results_start,
		resNum      : jsonResults.results_returned,
		onClickFunc : 'HotpepBeauty.salonPager'
	};
	var pagerHtmls = KtUtils.makePager( pageDataMap );
	
	var salons     = jsonResults.salon;
	var salonHtmls = pagerHtmls;
	$.each(salons, function( i ){
		var shopHref       = this.urls.pc;
		var salonName      = this.name;
		var affiLink       = HotpepBeauty.affi_1 + encodeURIComponent(shopHref) + HotpepBeauty.affi_2 + salonName + HotpepBeauty.affi_3;
		var affiLinkImg    = HotpepBeauty.affi_1 + encodeURIComponent(shopHref) + HotpepBeauty.affi_2 + '<img src="'+this.main.photo.s+'" alt="'+this.main.caption+'" title="'+this.main.caption+'" />' + HotpepBeauty.affi_3;
		var affiLinkYoyaku = HotpepBeauty.affi_1 + encodeURIComponent(shopHref) + HotpepBeauty.affi_2 + '<img src="/images/btn/go_site_yoyaku.gif" alt="予約サイトへ" title="予約サイトへ" />' + HotpepBeauty.affi_3;
		var affiLinkCoup   = HotpepBeauty.affi_1 + encodeURIComponent(this.coupon_urls.pc) + HotpepBeauty.affi_2 + '<img src="/images/btn/go_site_coupon.gif" alt="クーポン券サイトへ" title="クーポン券サイトへ" />' + HotpepBeauty.affi_3;
		
		var thisMood  = this.mood;
		var moodHtmls = '<div class="mood_title">'+salonName+'のイメージ</div>';
		$.each(thisMood, function(){
			moodHtmls += '<div class="mood">'+
								'<div class="mood_photo">'+
									'<img src="'+this.photo+'" alt="'+this.caption+'" title="'+this.caption+'" />'+
								'</div>'+
								'<div class="mood_caption">'+
									this.caption+
								'</div>'+
							'</div>';
		});
		
		var thisFeature  = this.feature;
		var featureHtmls = '<div class="feature_title">'+salonName+'のコンセプト</div>';
		$.each(thisFeature, function(){
			featureHtmls += '<div class="feature">'+
								'<div class="feature_name">'+this.name+'</div>'+
								'<div class="feature_image">'+
									'<img src="'+this.photo.m+'" alt="'+this.name+'" title="'+this.name+'" />'+
								'</div>'+
								'<div class="img_big_btn">'+
									'<a href="'+this.photo.l+'" title="'+this.name+'">'+
										'<img src="/images/btn/img_big_btn_01.gif" alt="画像拡大"/>'+
									'</a>'+
								'</div>'+
								'<div class="feature_caption">'+this.caption+'</div>'+
								'<div class="feature_description">'+this.description+'</div>'+
							'</div>';
		});
		
		salonHtmls += '<div class="salon">'+
							'<div class="salon_l">'+
								'<div class="name_kana">'+this.name_kana+'</div>'+
								'<div class="name">'+
									affiLink+
								'</div>'+
								'<div class="image">'+
									affiLinkImg+
								'</div>'+
								'<div class="img_big_btn">'+
									'<a href="'+this.main.photo.l+'" title="'+salonName+'">'+
										'<img src="/images/btn/img_big_btn_01.gif" alt="画像拡大"/>'+
									'</a>'+
								'</div>'+
								'<div class="yoyaku">'+
									affiLinkYoyaku+
								'</div>'+
								'<div class="coupon">'+
									affiLinkCoup+
								'</div>'+
								'<div class="address">'+this.address+'</div>'+
							'</div>'+
							'<div class="salon_r">'+
								'<div class="catch_copy">'+this.catch_copy+'</div>'+
								'<div class="description">'+this.description+'</div>'+
								'<div class="note desc_title_body"><span class="desc_title">備考：</span>'+this.note+'</div>'+
								'<div class="price desc_title_body"><span class="desc_title">カット価格：</span>'+this.price+'</div>'+
								'<div class="open desc_title_body"><span class="desc_title">営業時間：</span>'+this.open+'</div>'+
								'<div class="close desc_title_body"><span class="desc_title">定休日：</span>'+this.close+'</div>'+
								'<div class="parking desc_title_body"><span class="desc_title">駐車場：</span>'+this.parking+'</div>'+
								'<div class="near_salon">'+
									'<select class="near_salon_sel">'+
										'<option value="1">300m 圏内</option>'+
										'<option value="2" selected="selected">500m 圏内</option>'+
										'<option value="3">1km 圏内</option>'+
										'<option value="4">2km 圏内</option>'+
										'<option value="5">3km 圏内</option>'+
									'</select>'+
									'<button>近くのヘアサロンを検索</button>'+
									'<input type="hidden" name="lat" value="'+this.lat+'" />'+
									'<input type="hidden" name="lng" value="'+this.lng+'" />'+
									'<input type="hidden" name="salon_name" value="'+salonName+'" />'+
									'<input type="hidden" name="select_dist" class="select_dist" value="500m 圏内" />'+
								'</div>'+
								'<div class="detail_btn" onclick="HotpepBeauty.toggleDetail(this,'+i+');">'+
									'<img src="/images/btn/detail_down_01.gif" alt="詳細情報" />'+
								'</div>'+
							'</div>'+
							'<div id="bottom_area_'+i+'" class="salon_b">'+
								'<div class="capacity desc_title_body"><span class="desc_title">席数：</span>'+this.capacity+'</div>'+
								'<div class="stylist_num desc_title_body"><span class="desc_title">スタイリスト数：</span>'+this.stylist_num+'</div>'+
								'<div class="credit_card desc_title_body"><span class="desc_title">クレジットカード：</span>'+this.credit_card+'</div>'+
								'<div class="kodawari desc_title_body"><span class="desc_title">こだわり条件：</span>'+this.kodawari+'</div>'+
								'<div class="mood_area">'+moodHtmls+'</div>'+
								'<div class="feature_area">'+
									featureHtmls+
								'</div>'+
								'<div class="last_update">'+
									'最終更新日：&nbsp;'+this.last_update+
								'</div>'+
							'</div>'+
						'</div>';
	});
	salonHtmls += pagerHtmls;
	
	$('#disp_salons').html( salonHtmls );
	
	var salonObj = $('div.salon');
	$.each(salonObj, function(i){
		var thisObj = $(this);
		var r_height = $('div.salon_r', thisObj).height();
		var l_height = $('div.salon_l', thisObj).height();
		if( r_height < l_height ){
			$('div.salon_r', thisObj).height( l_height );
		}
	});
	
	$('select.near_salon_sel').change(function(){
		var parentThis = $(this).parent();
		
		$('input.select_dist', parentThis).val( $('option:selected', this).text() );
	});
	
	$('div.near_salon BUTTON').click(function(){
		var parentThis = $(this).parent();
		var hiddens = $( 'input:hidden', parentThis );
		var salon_name = '';
		
		$.each(hiddens, function(){
			var hidThis = $(this);
			var hidName = hidThis.get(0).name;
			if( hidName != 'salon_name' ){
				HotpepBeauty.qry.params[hidName] = hidThis.val();
			} else {
				salon_name = hidThis.val();
			}
		});
		HotpepBeauty.qry.params.range = $('select.near_salon_sel', parentThis).val();
		HotpepBeauty.qry.params.start = 1;
		
		HotpepBeauty.changePage();
		
//alert($('input.select_dist', parentThis).val());
		var selectedText = $('select.near_salon_sel option:selected', parentThis).text();
		$('#near_salon_text').html(
			'<span>' + salon_name + '</span>' + 'の' + selectedText + 'にあるヘアサロン'
		);
	});
	
	$('div.img_big_btn A').lightBox({
		//overlayBgColor	: '#FFECF5',
		overlayOpacity	: 0.6,
		txtOf			: ' / '
	});
	
//objectdump(jsondata);
};

HotpepBeauty.toggleDetail = function( obj, i ){
	$('#bottom_area_'+i).toggle( 800 );
	
	var jqThis = $(obj);
	var imgSrc = $('IMG', jqThis).get(0).src;
	if( imgSrc.search(/down/) != -1 ){
		$('IMG', jqThis).get(0).src = imgSrc.replace(/down/, 'up');
		
	} else if( imgSrc.search(/up/) != -1 ){
		$('IMG', jqThis).get(0).src = imgSrc.replace(/up/, 'down');
	}
};

HotpepBeauty.salonPager = function( num ){
	HotpepBeauty.qry.params.start = (num-1) * HotpepBeauty.count + 1;
	HotpepBeauty.changePage();
};

HotpepBeauty.changePage = function(){
	$('#disp_salons').html(
		'<div class="beauty_load">'+
			'<img src="/images/loading_circle_01.gif" />'+
		'</div>'
	);
	
	var bSelVal   = $('#area_select').val();
	if( bSelVal.length == 0 ){
		HotpepBeauty.qry.params['small_area'] = '';
	} else {
		HotpepBeauty.qry.params['small_area'] = bSelVal;
	}
	
	HotpepBeauty.qry.params.order = $('#order_select').val();
	
	KtUtils.ajxJsonp( HotpepBeauty.qry );
};

HotpepBeauty.topPage = function(){
	HotpepBeauty.qry.params['callback'] = 'HotpepBeauty.callBackFuncSalonTopPage';
	HotpepBeauty.qry.params['count'] = 4;
	
	KtUtils.ajxJsonp( HotpepBeauty.qry );
};

HotpepBeauty.callBackFuncSalonTopPage = function( jsondata ){
	var jsonResults = jsondata.results;
	
	var salons      = jsonResults.salon;
	var salonTotal  = jsonResults.results_available;
	var resStartNum = jsonResults.results_start;
	
	var resultHtmls = '';
	$.each(salons, function(){
		var shopHref       = this.urls.pc;
		var salonName      = this.name;
				
		var affiLink       = HotpepBeauty.affi_1 + encodeURIComponent(shopHref) + HotpepBeauty.affi_2 + salonName + HotpepBeauty.affi_3;
		var affiLinkImg    = HotpepBeauty.affi_1 + encodeURIComponent(shopHref) + HotpepBeauty.affi_2 + '<img src="'+this.main.photo.s+'" alt="'+this.main.caption+'" title="'+this.main.caption+'" />' + HotpepBeauty.affi_3;
		var affiLinkYoyaku = HotpepBeauty.affi_1 + encodeURIComponent(shopHref) + HotpepBeauty.affi_2 + '<img src="/images/btn/go_site_yoyaku.gif" alt="予約サイトへ" title="予約サイトへ" />' + HotpepBeauty.affi_3;
		var affiLinkCoup   = HotpepBeauty.affi_1 + encodeURIComponent(this.coupon_urls.pc) + HotpepBeauty.affi_2 + '<img src="/images/btn/go_site_coupon.gif" alt="クーポン券サイトへ" title="クーポン券サイトへ" />' + HotpepBeauty.affi_3;
		
		resultHtmls += '<div class="hair_salon">'+
							'<div class="hair_salon_name">'+
								affiLink+
							'</div>'+
							'<div class="hair_salon_image">'+
								affiLinkImg+
							'</div>'+
							'<div class="hair_salon_coupon">'+
								affiLinkCoup+
							'</div>'+
						'</div>';
	});
	
	$('#hairsalon').html( resultHtmls );
	$('div.hair_salon_image IMG').show( 600 );
};

$(function(){
	KtUtils.ajxJsonp( HotpepBeauty.qry );
	
	$('#beauty_select_btn').click(function(){
		$('#near_salon_text').empty();
		
		HotpepBeauty.qry.params.lat   = '';
		HotpepBeauty.qry.params.lng   = '';
		HotpepBeauty.qry.params.start = 1;
		
		HotpepBeauty.changePage();
	});
});