// JavaScript Document


$(window).load(function (){



	// 読み込む外部ファイル情報
	var manifest = [
	    {src: "img/main1.jpg"} // Image
	];
	// LoadQueueクラス
	var loadQueue = new createjs.LoadQueue();

	// 並列での読み込み数を設定
	loadQueue.setMaxConnections(1);

	// 読み込みの進行状況が変化した
	loadQueue.addEventListener("progress", handleProgress);

	// 1つのファイルを読み込み終わったら
	loadQueue.addEventListener("fileload", handleFileLoadComplete);

	// 全てのファイルを読み込み終わったら
	loadQueue.addEventListener("complete", handleComplete);

	// 読み込み開始
	loadQueue.loadManifest(manifest);

	function handleProgress(event) {
	    // 読み込み率を0.0~1.0で取得
	    var progress = event.progress;
	    // console.log(progress);
	}

	function handleFileLoadComplete(event) {
	    // 読み込んだファイル
	    var result = event.result;
	    // console.log("result");
	}

	function handleComplete() {
	    // console.log("白背景読み込み");

	    //次のロードを開始
	    firstLoad();
	}


	function firstLoad(){
		// 読み込む外部ファイル情報
		var manifest = [

		    {src: "img/bg2.jpg"}, // Image
		    {src: "img/ldoor.png"},  // Image
		    {src: "img/rdoor.png"}  // Image
		];
		// LoadQueueクラス
		var loadQueue = new createjs.LoadQueue();

		// 並列での読み込み数を設定
		loadQueue.setMaxConnections(4);

		// 読み込みの進行状況が変化した
		loadQueue.addEventListener("progress", handleProgress);

		// 1つのファイルを読み込み終わったら
		loadQueue.addEventListener("fileload", handleFileLoadComplete);

		// 全てのファイルを読み込み終わったら
		loadQueue.addEventListener("complete", handleComplete);

		// 読み込み開始
		loadQueue.loadManifest(manifest);

		function handleProgress(event) {
		    // 読み込み率を0.0~1.0で取得
		    var progress = event.progress;
		    // console.log(progress);
		}

		function handleFileLoadComplete(event) {
		    // 読み込んだファイル
		    var result = event.result;
		    // console.log("result");
		}

		function handleComplete() {
		    // console.log("ドアロード後表示");
			$('.fadeChanger li:nth-of-type(2)').fadeIn(fadeDuration); //ドアと背景表示
		    //次のロードを開始
		    nextLoad();
		}
	};
	function nextLoad(){
		// 読み込む外部ファイル情報
		var manifest = [
		    {src: "img/main2.png"}, // Image
		    {src: "img/main2_txt.png"}, // Image
		    {src: "img/main3.jpg"},  // Image
		    {src: "img/main3_txt.png"},  // Image
		    {src: "img/main4.jpg"},  // Image
		    {src: "img/main4_txt.png"},  // Image
		    {src: "img/main4_btn.png"}  // Image
		];
		// LoadQueueクラス
		var loadQueue = new createjs.LoadQueue();

		// 並列での読み込み数を設定
		loadQueue.setMaxConnections(7);

		// 読み込みの進行状況が変化した
		loadQueue.addEventListener("progress", handleProgress);

		// 1つのファイルを読み込み終わったら
		loadQueue.addEventListener("fileload", handleFileLoadComplete);

		// 全てのファイルを読み込み終わったら
		loadQueue.addEventListener("complete", handleComplete);

		// 読み込み開始
		loadQueue.loadManifest(manifest);

		function handleProgress(event) {
		    // 読み込み率を0.0~1.0で取得
		    var progress = event.progress;
		    // console.log(progress);
		}

		function handleFileLoadComplete(event) {
		    // 読み込んだファイル
		    // var result = event.result;
		    // console.log("result");
		}

		function handleComplete() {
		    // console.log("アニメーション開始");
		    //次のロードを開始
		    fadeChanger();
		}
	};





	var replayFlag = 0;
	var fadeDuration = 500;	
	function fadeChanger(){
		// console.log("ok");
		
		if(replayFlag > 0){
			$('.fadeChanger li:nth-of-type(2)').fadeIn(fadeDuration); //ドアと背景表示
		}
		
		//オープニングのドア
		setTimeout(function(){
			$("#lDoor").animate({
				'left':'-50%'
			}, 1500 ,"easeInOutSine");
			$("#rDoor").animate({ 
				'right':'-50%'
			}, 1500 ,"easeInOutSine");

		//});
		}, 1200);　//1.2秒後
			
		setTimeout(function(){
			$('#text1_2').addClass('anime2');//いらっしゃいませ
		}, 3000);
		setTimeout(function(){
			$('.fadeChanger li:nth-of-type(2) #text1_2').fadeOut(fadeDuration); //いらっしゃいませ消える
			setTimeout(function(){
				$('#text1').addClass('anime');	//セブンの店頭
				setTimeout(function(){	
					$('.fadeChanger li:nth-of-type(2)').fadeOut(fadeDuration); //セブン店頭消える
					setTimeout(function(){
						$('.fadeChanger li:nth-of-type(3)').fadeIn(fadeDuration);//来店せず簡単注文in
						setTimeout(function(){
							$('#text2').addClass('anime');//来店せず簡単注文アニメ
							setTimeout(function(){
								$('.fadeChanger li:nth-of-type(3)').fadeOut(fadeDuration);
								setTimeout(function(){
									$('.fadeChanger li:nth-of-type(4)').fadeIn(fadeDuration);
									setTimeout(function(){
										$('#text3').addClass('anime');
										setTimeout(function(){
											$('.fadeChanger #text4').fadeIn(fadeDuration);
												setTimeout(function(){
														/* ドア閉じる */
														$("#lDoor").animate({
															'left':'0%'
														}, 15 ,"easeInOutSine");
														$("#rDoor").animate({ 
															'right':'0%'
														}, 15 ,"easeInOutSine");
														
												},500);
										},1400);
									},500);
								},500);
							},2500);	//来店せず簡単注文消える	
						},500);//来店せず簡単注文
					},500);//セブン店頭消える
				},2500);//セブンの店頭
			}, 600);//いらっしゃいませ消える
		},5000);
		/*setTimeout(function(){
				$('.fadeChanger li:nth-of-type(4)').fadeOut(fadeDuration);
				setTimeout(function(){
						//fadeChanger();
						$('.fadeChanger li:nth-of-type(5)').fadeIn(fadeDuration);
				},fadeDuration);
		},9000);*/
	}

	/* ドアが開くところから再スタート */
	$('#reloadStart').on('click',function(){
		$('.fadeChanger li:nth-of-type(4)').fadeOut(fadeDuration);
		$('#text1, #text2, #text3').removeClass('anime');
		$('#text1_2').removeClass('anime2');
		$('#text1_2').css({ 'display':'block'});
		$('#text4').css({ 'display':'none'});
		replayFlag = 1;
		setTimeout(function(){
			fadeChanger();
		},800);
	});
	
	//スライダー画面中に入ったら動かす
	var flag1 = 0;
	var flag2 = 0;
	var subFlag = 0;
	var slider = 	$('.bxslider2').bxSlider({
		auto: false,
		mode: 'fade', 
		pager: false, 
		infiniteLoop: true,
		pause: 4000, 
		speed: 500　//スライドのアニメーションの時間
	});

	$(window).scroll(function(){
	// .bxslider2までの高さを取得
	var distanceMargin = $(window).height() - 150;
	var distanceTop = $('.bxslider2').offset().top - distanceMargin;
	var flag;
	// id2に達しているかどうかを判別
		if ($(window).scrollTop() > distanceTop){ //範囲に入ってるとき
			subFlag = 1;
			if(flag1 == 0 || subFlag == 1){
					slider.startAuto();
					flag1 = 1;
			}else if(flag1 == 1){
				flag2 = 0;
			}
		}else{ 
			subFlag = 0;
			if(flag2 ==0 || subFlag ==0){ //範囲から出てるとき
				slider.stopAuto();
				flag2 = 1;
			}else if(flag2 == 1){
				flag1 = 0;

			}
		}
	});
	///////////////////////////////////

//	$('.bxslider3').bxSlider({
//		nextSelector: '#next', 
//		prevSelector: '#prev',
//		pager: true, 
//		infiniteLoop: false,
//		hideControlOnEnd: true, // false
//		speed: 200　//スライドのアニメーションの時間
//	});



	//お届けセブンの特徴
	var pauseTime = 0;	
	$('.img_features_1').one('inview', function(event, isInView) {
    if (isInView) {
			var $div1 = $(this);
			var timer1 = setTimeout(function(){
				$div1.addClass('anime');
			},pauseTime);
    } else {
			clearTimeout(timer1);
      $(this).removeClass('anime');
    }
  });

	
	$('.img_features_3').one('inview', function(event, isInView) {
    if (isInView) {
			var $div3 = $(this);
			var timer3 = setTimeout(function(){
				$div3.addClass('anime');
			},pauseTime);
    } else {
			clearTimeout(timer3);
      $(this).removeClass('anime');
    }
  });

	
	$('.img_features_5').one('inview', function(event, isInView) {
    if (isInView) {
			var $div5 = $(this);
			var timer5 = setTimeout(function(){
				$div5.addClass('anime');
			},pauseTime);
    } else {
			clearTimeout(timer5);
      $(this).removeClass('anime');
    }
  });

	
	
	//サービス概要
	$('.img_service_1').one('inview', function(event, isInView) {
    if (isInView) {
			var $div2_1 = $(this);
			var timer2_1 = setTimeout(function(){
				$div2_1.addClass('anime');
			},pauseTime);
    } else {
			clearTimeout(timer2_1);
      $(this).removeClass('anime');
    }
  });
	$('.img_service_4').one('inview', function(event, isInView) {
    if (isInView) {
			var $div2_4 = $(this);
			var timer2_4 = setTimeout(function(){
				$div2_4.addClass('anime');
			},pauseTime);
    } else {
			clearTimeout(timer2_4);
      $(this).removeClass('anime');
    }
  });
	$('.img_service_3').one('inview', function(event, isInView) {
    if (isInView) {
			var $div2_3 = $(this);
			var timer2_3 = setTimeout(function(){
				$div2_3.addClass('anime');
			},pauseTime);
    } else {
			clearTimeout(timer2_3);
      $(this).removeClass('anime');
    }
  });



	$('.img_service_5').one('inview', function(event, isInView) {
    if (isInView) {
			var $div2_5 = $(this);
			var timer2_5 = setTimeout(function(){
				$div2_5.addClass('anime');
			},pauseTime);
    } else {
			clearTimeout(timer2_5);
      $(this).removeClass('anime');
    }
  });

	
});

$(function(){
	//メインスライダー プラグイン設定//////////
	$('#slider').slick({
		autoplay: false,
		speed: 500, //スライドするスピード(ms)
		dots: true,
		cssEase: 'ease',
		fade: false,
		infinite: false
	});
});