$(function(){
	set_fade("top_slide", 5000);


	/* ■■■■■■ トップギャラリーセット ■■■■■■ */
	galleryLI = new Array();
	$('.top_gallery').each(function(i){
		galleryLI[i] = $(this).find('li');

		$(this).find('li').on('click', function(){
			$('.popup figure').html( '<p>' + $(this).attr('data-custmer') + '</p>' + $(this).html() );
			$('.popup').fadeIn(300);
			nowIndex = $(this).index();
			nowgallery = i;
		});
	});
	$('.popup .next').on('click', function(){
		nowIndex++;
		if( nowIndex >= galleryLI[nowgallery].length ) nowIndex = 0;
		$('.popup figure').html( '<p>' + galleryLI[nowgallery].eq(nowIndex).attr('data-custmer') + '</p>' + galleryLI[nowgallery].eq(nowIndex).html() );
	});
	$('.popup .prev').on('click', function(){
		nowIndex--;
		if( nowIndex < 0 ) nowIndex = galleryLI[nowgallery].length - 1;
		$('.popup figure').html( '<p>' + galleryLI[nowgallery].eq(nowIndex).attr('data-custmer') + '</p>' + galleryLI[nowgallery].eq(nowIndex).html() );
	});
	$('.popup .close, .popup').on('click', function(){
		$('.popup').fadeOut(300);
	});
	$('.popup > div').on('click', function(e){
		e.stopPropagation();
	});

	/* ■■■■■■ スライドショーセット ■■■■■■ */
	slideNum = 0;
	$slideList = $('.slideshow_list li');
	$(window).on('resize load',function(){
		if( $(this).width() < 584 ){
			$('.slideshow_list ul').css('width', $slideList.length * 100 + '%');
			$slideList.css('width', ( 100 / $slideList.length ) + '%');
		}else{
			$('.slideshow_list ul').css('width', '');
			$slideList.css('width', '');
		}
	});
	$('.slideshow_list .next').on('click', function(){
		slideNum++;
		if( slideNum >= $slideList.length ) slideNum = 0;
		$('.slideshow_list ul').animate({left: -slideNum + "00%"}, 300);
	});
	$('.slideshow_list .prev').on('click', function(){
		slideNum--;
		if( slideNum < 0 ) slideNum = $slideList.length - 1;
		$('.slideshow_list ul').animate({left: -slideNum + "00%"}, 300);
	});

	/* ■■■■■■ スマホバナー表示 ■■■■■■ */
	$('.topics nav .more').css("cursor","pointer").on('click', function(){
		$('.topics > nav a').each( function(i){
			setTimeout("$('.topics > nav a').eq(" + i + ").fadeIn(300)", i*50);
		});
		$(this).fadeOut(500);
	});

	/* ■■■■■■ サロン切り換え ■■■■■■ */
	$('.salon_box .folder_links a').on('click', function(){
		if( !$('this').hasClass('on') ){
			$('.salon_all article').removeClass('on');
			$('.salon_all article').eq($(this).index()).addClass('on');
		}
	});
});


/* ■■■■■■ Webカメラリロード ■■■■■■ */
$(document).ready(function() {
    window.setInterval("refreshCamera();", 10000); // one second interval
});
var url = 'http://108.174.35.66:5015/SnapshotJPEG?Resolution=640x480&Quality=Motion';
var forcerefresh = 0;
function refreshCamera() {
    forcerefresh = forcerefresh + 1;
    $('#webcam').attr('src',url + forcerefresh);
}


/* ■■■■■■ fade ■■■■■■ */

Fades = new Array();		//ID内の<p>タグエレメント用（配列変数）
nowFade = new Array();	 	//現在表示中の番号用（配列変数）
fadeDelay = new Array();	//フェードの間隔用（配列変数）
setTO = new Array();		//setTimeout用（clearTimeoutでキャンセルするために用意）


/* ■■■■ 初期設定（<p>タグエレメント読み込み、イベントハンドラ設置など） ■■■■ */
function set_fade(ID, Delay){
	Fades[ID] = document.getElementById(ID).getElementsByTagName("li");	//Fades[ID] に、<li>タグエレメント取得
	nowFade[ID] = 0;	//nowFade[ID]の初期値＝０
	fadeDelay[ID] = Delay;	//fadeDelay[ID]に、フェードの間隔時間を入れておきます。
	Fades[ID][nowFade[ID]].className = "on";							//<li>タグエレメントの一番目に、class="on"を追加。
	setTO[ID] = setTimeout("fade_next('" + ID + "')", fadeDelay[ID]);	//setTimeoutで、fadeDelay[ID]÷1000秒後にfade_next(ID)を発動。

	if(document.getElementById(ID).getElementsByClassName("next").length > 0 ){		//もし、ID内にclass="next"が存在していたら、
		document.getElementById(ID).getElementsByClassName("next")[0].onclick = function(){
			fade_next(ID);		//class="next"に、イベントハンドラonclickで、fade_next(ID)発動。
		}
	}
	if(document.getElementById(ID).getElementsByClassName("prev").length > 0 ){	//もし、ID内にclass="prev"が存在していたら、
		document.getElementById(ID).getElementsByClassName("prev")[0].onclick = function(){
			fade_prev(ID);		//class="prev"に、イベントハンドラonclickで、fade_prev(ID)発動。
		}
	}
	if(document.getElementById(ID).getElementsByTagName("div").length > 0 ){	//もし、ID内に<div>が存在していたら、
		for(i=0; i<Fades[ID].length; i++){							//<a>タグ追加。（それぞれがfade_change(ID)のJavascriptを持つ）
			document.getElementById(ID).getElementsByTagName("div")[0].innerHTML += "<a href='javascript:fade_change(\"" + ID + "\"," + i + ");'>&nbsp;</a>";
		}
		document.getElementById(ID).getElementsByTagName("div")[0].getElementsByTagName("a")[0].className = "on";	//先頭の<a>タグに、class="on"追加。
	}
}

/* ■■■■ 指定番号NUMの<p>タグエレメントにclass="on"を付けるスクリプト ■■■■ */
function fade_change(ID,NUM){
	clearTimeout(setTO[ID]);			//ここで、いったん、前に設定された 「setTimeout("fade_next('" + ID + "')", fadeDelay[ID])」をキャンセル。
	Fades[ID][nowFade[ID]].className = "";	//現在表示中（nowFade[ID]）の<li>タグエレメントのクラス名を無くす。（表示OFF）
	if( document.getElementById(ID).getElementsByTagName("div").length > 0 ){
		document.getElementById(ID).getElementsByTagName("div")[0].getElementsByTagName("a")[nowFade[ID]].className = "";	//nowFade[ID]番の<a>タグのクラス名を無くす。
		document.getElementById(ID).getElementsByTagName("div")[0].getElementsByTagName("a")[NUM].className = "on";			//NUM番の<a>タグに、class="on"追加。
	}
	nowFade[ID] = NUM;													//nowFade[ID]にNUMを代入。
	Fades[ID][nowFade[ID]].className = "on";							//NUM番目の<li>タグエレメントに、class="on"追加。（表示ON）
	setTO[ID] = setTimeout("fade_next('" + ID + "')", fadeDelay[ID]);	//setTimeoutで、fadeDelay[ID]÷1000秒後にfade_next(ID)を発動。
}

/* ■■■■ 次の番号に移動してfade_changeを発動 ■■■■ */
function fade_next(ID){
	nowNUM = nowFade[ID];							//nowNUM に、nowFade[ID]を一時代入。
	nowNUM++;										//nowNUMに１をプラス。
	if( nowNUM >= Fades[ID].length ) nowNUM = 0;	//もし、nowNUMが<li>タグエレメントの数を超えていたら、nowNUM = 0。
	fade_change(ID,nowNUM);							//nowNUM でfade_changeを発動。
}

/* ■■■■ 前の番号に移動してfade_changeを発動 ■■■■ */
function fade_prev(ID){
	nowNUM = nowFade[ID];							//nowNUM に、nowFade[ID]を一時代入。
	nowNUM--;										//nowNUMに１をマイナス。
	if( nowNUM < 0 ) nowNUM = Fades[ID].length - 1;	//もし、nowNUMが0より低かったら、<li>タグエレメントの最終番号を代入。
	fade_change(ID,nowNUM);							//nowNUM でfade_changeを発動。
}

/* ■■■■ SPスライダー（海が見えるウェディングサロン・日本人スタッフ対応・ドレス200着とタキシード選び放題） ■■■■ */

$(function(){
	function spTopSliderSetting(){

		var width = $(window).width();

		if(width <= 768){
			$('.spTop-slide').not('.slick-initialized').slick({
			infinite: true,
			slidesToShow: 1, // 1スライド表示
			slidesToScroll: 1, // 1つずつスライド
			speed: 500,
			autoplay: false,
			initialSlide:0,
			prevArrow: '<div class="slidePrev"></div>',
			nextArrow: '<div class="slideNext"></div>'
			});
		} else {
			$('.spTop-slide.slick-initialized').slick('unslick');
		}
	}

	spTopSliderSetting();

	$(window).resize( function() {
		spTopSliderSetting();
	});
});