// JavaScript Document

(function($){
	$.kh	= {
		display		: function(type){
			$("#"+type).show();
			$("#popup").fadeIn();
			$("#overlay").css({opacity:0}).show().animate({opacity:0.5});
			$("select").css({visibility:"hidden"});
		},
		hide		: function () {
			$("#popup").fadeOut(function(){
				$("> div", this).hide();
			});
			$("#overlay").fadeOut();
			$("select").css({visibility:"visible"});
		}
	};
	
	$(function(){
		$("#flashcontents a").click(function(){
			var type = $(this).attr("href").replace(/^#/,"");
			if (type) { $.kh.display(type); }
			return false;
		});
		$("#overlay").bind("click",function(){
			$(this).trigger("clicked");
		});
		$("#popup .toolbar a[href=#close]").click(function(event){
			$.kh.hide();
			return false;
		});
		
		$("#popup").bind("fadeOut",function(event){
			$.kh.hide();
		});
		
		$("#popup").click(function(event){
			if (this == event.target) {
				$("#popup").trigger("fadeOut");
			}
		});
		$("#overlay").bind("clicked",function(){
			$("#popup").trigger("fadeOut");
		});
		$("#overlay, #popup, .window").hide();
	});
})(jQuery);

(function($){
	var version		= "10.0.0";
	var flashvars	= {
		enterurl			: "/top/"
	};
	var params		= {
		scale				: 'noScale', 
		salign				: '', 
		menu				: 'false', 
		wmode				: 'opaque', 
		allowscriptaccess	: 'sameDomain', 
		allowfullscreen		: 'false'
	};
	var attributes	= {
		id		: 'kh', 
		name	: 'kh'
	};
	var hasFlash	= swfobject.hasFlashPlayerVersion(version);
	
	
	$.extend($.support, {
		orientation		: ("orientation" in window),
		touch			: ("ontouchend" in document && "ontouchstart" in document)
	});
	$(function(){
		if (!$.support.touch) { return; }
		setTimeout(function(){ if (window.pageYOffset === 0) { window.scrollTo(0,1); } }, 100);
		
		$(window).bind("orientationchange",function(event){
			//window.orientation 0 90 180 -90
			event.preventDefault();
			setTimeout(function(){ if (Math.round(window.pageYOffset / 10) <= 10) { window.scrollTo(0,1); } }, 100);
		});
	});
	if ($.support.touch) {
		var viewport	= $("<meta>").attr("name", "viewport");
		var width		= Math.min(screen.width, screen.height);
		if (width >= 768) {
			$("head").append(viewport.attr("content", "width=device-width,maximum-scale=1.0,minimum-scale=0.416666666666667"));
		} else {
			$("head").append(viewport.attr("content", "width=768px,maximum-scale=1.0,minimum-scale=0.416666666666667"));
			if ((/iPhone|iPod/).test(navigator.userAgent)) {
				$(function(){
					$("body").addClass("mobile");
				});
			}
		}
	}
	
	var query	= window.location.search.replace(/^\?/, "");
	var mode	= !!(query == "DEBUG=ipad" || query == "DEBUG");
	if (!$.support.touch && !mode) {
		swfobject.embedSWF("common/flash/index.swf?" + (new Date()).getTime(), "flashcontents", "100%", "100%", version, "", flashvars, params, attributes);
		return;
	}
	
	
	$.fn.frame	= function (options) {
		var settings	= $.extend({}, $.fn.frame.defaults, options || {});
		var $this		= $(this);
		
		return $.fn.frame.init($this, settings, function(){
			return $this.each(function(){
				$.fn.frame.start();
			});
		});
	};
	$.fn.frame = $.extend($.fn.frame, {
		defaults	: {
			frame		: 1,
			framerate	: (1000 / 24),
			loop		: function(){},
			delay		: 0,
			w			: 0,
			h			: 0,
			bgx			: 0,
			bgy			: 0,
			interval	: null
		},
		options		: {},
		init		: function (target, settings, callback) {
			
			if (settings.w == 0 || settings.w == 0) {
				settings.w	= target.width();
				settings.h	= target.height();
			}
			settings.target	= target;
			settings.stop	= this.stop;
			
			this.options	= settings;
			return callback();
		},
		start		: function () {
			//console.log(this.options);
			var options	= this.options;
			var	target	= options.target;
			var height	= options.h;
			var frame	= options.frame;
			if (frame - 1 == 0) return;
			setTimeout(function(){
				options.interval	= setInterval(function(){
					//console.log(parseFloat(target.css("backgroundPositionY")));
					var backgroundPositionY	= parseFloat(target.css("backgroundPositionY"));
					if ((Math.abs(backgroundPositionY) / height) >= frame - 1 && backgroundPositionY != 0) {
						target.css({ backgroundPositionY : "0" });
						options.loop();
					} else {
						target.css({ backgroundPositionY : "-=" + height });
					}
				}, options.framerate);
			}, options.delay * 1000);
		},
		stop		: function () {
			if (this.options.interval) {
				clearInterval(this.options.interval);
			}
		}
	});
	
	
	$(function(){
		var now			= new Date();
		var wrap		= $("#flashcontents").html("");
		var background	= $("<div>").addClass("background").append($("<div>").addClass("glow"));
		var stage		= $("<div>").addClass("stage");
		var logo		= $("<div>").addClass("logo").append($("<a>").attr("href", flashvars.enterurl).text("神戸北野ホテル"));
		var	list		= $("<li>").append($("<a>"));
		var menu		= $("<ul>").addClass("menu").append(
			list.clone().addClass("tnav1"),
			list.clone().addClass("tnav2"),
			list.clone().addClass("tnav3"),
			list.clone().addClass("tnav4"),
			list.clone().addClass("tnav5"),
			list.clone().addClass("tnav6"),
			list.clone().addClass("tnav7")
		);
		$("a", menu).click(function(){
			var id	= $(this).parent().attr("class");
			id		= id.match(/(\d+)$/)[1];
			$.kh.display("type"+id);
			return false;
		});
		wrap.append(background.append(stage)).append(logo).append(menu);
		//stage.css({border:"solid 1px"});
		
		// シーズン切替え
		/** /
		wrap.append($("<ul>").attr("id", "scene").append(
			$("<li>").append($("<a>").attr("href", "#s1t1").text("春 昼")),
			$("<li>").append($("<a>").attr("href", "#s1t2").text("春 夕")),
			$("<li>").append($("<a>").attr("href", "#s1t3").text("春 夜")),
			$("<li>").append($("<a>").attr("href", "#s2t1").text("夏 昼")),
			$("<li>").append($("<a>").attr("href", "#s2t2").text("夏 夕")),
			$("<li>").append($("<a>").attr("href", "#s2t3").text("夏 夜")),
			$("<li>").append($("<a>").attr("href", "#s3t1").text("秋 昼")),
			$("<li>").append($("<a>").attr("href", "#s3t2").text("秋 夕")),
			$("<li>").append($("<a>").attr("href", "#s3t3").text("秋 夜")),
			$("<li>").append($("<a>").attr("href", "#s4t1").text("冬 昼")),
			$("<li>").append($("<a>").attr("href", "#s4t2").text("冬 夕")),
			$("<li>").append($("<a>").attr("href", "#s4t3").text("冬 夜")),
			$("<li>").append($("<a>").attr("href", "#s5t1").text("クリスマス 昼")),
			$("<li>").append($("<a>").attr("href", "#s5t2").text("クリスマス 夕")),
			$("<li>").append($("<a>").attr("href", "#s5t3").text("クリスマス 夜"))
		));
		$("#scene li a").click(function(){
			var href	= $(this).attr("href").replace(/^\#/, "");
			var season	= href.match(/^s(\d)/);
			season		= season[1];
			var time	= href.match(/t(\d)$/);
			time		= time[1];
			season		= (season == 5) ? "xmas": "season" + season;
			time		= "time" + time;
			wrap.attr("class", "");
			wrap.addClass(season).addClass(time);
			return false;
		});
		$("#scene").click(function(){
			if (!$(this).hasClass("open")) {
				$("li", this).animate({ marginTop : "78px" }, function(){ $("#scene").removeClass("motion"); });
				$(this).addClass("open");
			} else {
				$("li", this).animate({ marginTop : "0px" }, function(){ $("#scene").removeClass("motion"); });
				$(this).removeClass("open");
			}
			
			return false;
		});
		
		var ax = 0, ay = 0, az = 0;
		var bx = 0, by = 0, bz = 0;
		$(window).bind("devicemotion", function(event){
			ax	= event.originalEvent.accelerationIncludingGravity.x;
			ay	= event.originalEvent.accelerationIncludingGravity.y;
			az	= event.originalEvent.accelerationIncludingGravity.z;
			if (!$("#scene").hasClass("motion") && Math.abs(bz - az) >= 8) {
				$("#scene").addClass("motion").click();
			}
			bx	= ax;
			by	= ay;
			bz	= az;
		});
		/**/
		
		/**/
		var m			= now.getMonth() + 1;
		var day			= now.getDate();
		var time		= now.getHours();
		if(m == 11 || (m == 12 && day <= 25)) { wrap.addClass("xmas"); }
		else if((m == 12 && day >= 26) || m == 1 || m == 2 || (m == 3 && day <= 9)) { wrap.addClass("season4"); }
		else if((m == 3 && day >= 10) || m == 4 || (m == 5 && day <= 15)) { wrap.addClass("season1"); }
		else if((m == 5 && day >= 16) ||( m >= 6 && m <= 8) || (m == 9 && day <= 15)) { wrap.addClass("season2"); }
		else if((m == 9 && day >= 16) || m == 10) { wrap.addClass("season3"); }
		
		if (time >= 6 && time < 16) { wrap.addClass("time1"); }
		else if (time >= 16 && time < 19) { wrap.addClass("time2"); }
		else { wrap.addClass("time3"); }
		/**/
		//wrap.addClass("xmas time1");
		var chara		= $("<div>").addClass("chara");
		var chara01		= chara.clone().addClass("chara01");
		var chara02		= chara.clone().addClass("chara02");
		var chara03		= chara.clone().addClass("chara03");
		var chara04		= chara.clone().addClass("chara04");
		var chara05		= chara.clone().addClass("chara05");
		var chara06		= chara.clone().addClass("chara06");
		var chara07		= chara.clone().addClass("chara07");
		var chara08		= chara.clone().addClass("chara08");
		var change_chara01		= chara.clone().addClass("change_chara01");
		var change_chara02		= chara.clone().addClass("change_chara02");
		var change_chara03		= chara.clone().addClass("change_chara03");
		var season_chara01		= chara.clone().addClass("season_chara01");
		var season_chara02		= chara.clone().addClass("season_chara02");
		var season_chara03		= chara.clone().addClass("season_chara03");
		var season_chara04		= chara.clone().addClass("season_chara04");
		var season_chara05		= chara.clone().addClass("season_chara05");
		var shoot		= chara.clone().addClass("shoot");
		var star01		= chara.clone().addClass("star01");
		var enter		= chara.clone().addClass("enter").append($("<a>").attr("href", flashvars.enterurl).text("神戸北野ホテル"));
		//stage.append(star01);
		stage.append(shoot);
		stage.append(season_chara05);
		stage.append(change_chara01);
		stage.append(season_chara01);
		stage.append(chara01);
		stage.append(chara02);
		stage.append(season_chara02);
		stage.append(season_chara03);
		stage.append(season_chara04);
		stage.append(change_chara03);
		stage.append(chara03);
		stage.append(chara08);
		stage.append(chara06);
		stage.append(chara07);
		stage.append(chara05);
		stage.append(chara04);
		stage.append(change_chara02);
		stage.append(enter);
		
		var shef			= setInterval(function() {
			chara05.frame({ frame : 132, loop : function () { clearInterval(this.interval); } });
		}, 20000);
		
		var bellboy_count	= 0;
		var bellboy			= setInterval(function(){
			bellboy_count++;
			switch (bellboy_count % 4) {
				case 0:
					chara07.css({ backgroundPositionX : "-" + chara07.width() + "px" }).frame({ frame : 74, loop : function(){ chara07.css({ backgroundPositionX : "0px" }); clearInterval(this.interval); } });
				break;
				case 1:
					chara07.css({ backgroundPositionX : "-" + (chara07.width() * 2) + "px" }).frame({ frame : 62, loop : function(){ chara07.css({ backgroundPositionX : "0px" }); clearInterval(this.interval); } });
				break;
				case 2:
					chara07.css({ backgroundPositionX : "-" + (chara07.width() * 3) + "px" }).frame({ frame : 23, loop : function(){ chara07.css({ backgroundPositionX : "0px" }); clearInterval(this.interval); } });
				break;
				case 3:
					chara07.frame({ frame : 17, loop : function(){ clearInterval(this.interval); } });
				break;
			}
		}, 10000);
		
		var carstop;
		var carstart	= setInterval(function(){
			if (chara08.hasClass("down")) {
				chara08.css({ backgroundPosition : "center 0px" }).removeClass("down");
			} else {
				chara08.css({ backgroundPosition : "center -400px" }).addClass("down");
			}
		}, 100);
		setTimeout(function(){
			clearInterval(carstart);
			chara08.removeClass("down").frame({ frame : 24, loop : function(){
				clearInterval(this.interval);
				chara08.frame({ frame : 7, delay : 15 });
			}});
		}, 4600);
		
		season_chara05.frame({ frame : 75 });
		
		// ブタ
		chara04.click(function(){
			$("ul.menu .tnav5 a").click();
			return false;
		});
		// シェフ
		chara05.click(function(){
			$("ul.menu .tnav1 a").click();
			return false;
		});
		// ウェディング
		chara06.click(function(){
			$("ul.menu .tnav6 a").click();
			return false;
		});
		// ベルボーイ
		chara07.click(function(){
			$("ul.menu .tnav7 a").click();
			return false;
		});
		

		if (wrap.hasClass("time1") || wrap.hasClass("time2")) {}
		
		// CLOUD
		var cloud		= $("<div>").addClass("cloud");
		var cloud1		= cloud.clone().addClass("type1");
		var cloud2		= cloud.clone().addClass("type2");
		var cloud3		= cloud.clone().addClass("type3");
		var cloud4		= cloud.clone().addClass("type1");
		var quarter		= (wrap.width() / 4);
		wrap.append(cloud1,cloud2,cloud3,cloud4);
		cloud1.css({
			top		: "50%",
			left	: (Math.random() * quarter)
		});
		cloud2.css({
			top		: "50%",
			left	: (Math.random() * quarter) + quarter
		});
		cloud3.css({
			top		: "50%",
			left	: (Math.random() * quarter) + (quarter * 2)
		});
		cloud4.css({
			top		: "50%",
			left	: (Math.random() * quarter) + (quarter * 3)
		});
		$([cloud1,cloud2,cloud3,cloud4]).each(function(){
			var mt	= -($(this).height() + (stage.height() / 2)) + (Math.random() * 150);
			$(this).css("marginTop", mt);
		});
		$([cloud1,cloud2,cloud3,cloud4]).bind("setOpacity", function(){
			if ($(this).offset().left < 200) {
				$(this).css({ opacity : Math.max(0, $(this).offset().left / 100) }).addClass("fadeIn");
			}
			if ($(this).offset().left + $(this).width() >= wrap.width() - 100) {
				$(this).css({ opacity : ((wrap.width() - 100) - ($(this).offset().left + $(this).width())) / 100 }).addClass("fadeOut");
			}
		});
		$([cloud1,cloud2,cloud3,cloud4]).bind("enterFrame", function(){
			$(this).css({ left : "+=1" });
			if ($(this).offset().left >= 0 && $(this).offset().left < 200) {
				$(this).addClass("fadeIn");
			} else if ($(this).offset().left >= 200) {
				$(this).removeClass("fadeIn").fadeIn();
			}
			if ($(this).offset().left + $(this).width() >= wrap.width() - 100) {
				$(this).addClass("fadeOut");
			}
			if ($(this).hasClass("fadeIn")) {
				var opacity	= Number($(this).css("opacity")) * 100;
				opacity		= Math.min(85, opacity + 1) / 100;
				$(this).css({ opacity : opacity });
				if (opacity == 1) { $(this).removeClass("fadeIn"); }
			}
			if ($(this).hasClass("fadeOut")) {
				var opacity	= Number($(this).css("opacity")) * 100;
				opacity		= Math.max(0, opacity - 1) / 100;
				$(this).css({ opacity : opacity });
				if (Math.abs(Math.round(opacity * 100)) <= 1) { $(this).removeClass("fadeOut").css({ opacity : 0 }); }
			}
			
			if (Number($(this).offset().left) >= Number(wrap.width()) && Number($(this).css("opacity")) == 0) {
				$(this).css({
					marginTop	: -($(this).height() + (stage.height() / 2)) + (Math.random() * 150),
					left 		: -200 - (Math.random() * $(this).width())
				});
			}
		});
		$([cloud1,cloud2,cloud3,cloud4]).trigger("setOpacity");
		setInterval(function(){
			$([cloud1,cloud2,cloud3,cloud4]).trigger("enterFrame");
		}, 75);
		
		if (wrap.hasClass("season2") && (wrap.hasClass("time2") || wrap.hasClass("time3"))) {
			
		}
		// BALLOON
		var balloon		= $("<div>").addClass("balloon");
		wrap.append(balloon);
		var x	= stage.offset().left;
		var y	= -(balloon.height() + (stage.height() / 2)) + (Math.random() * 100);
		//Math.round(stage.offset().top + 50 + (Math.random() * 100));
		balloon.css({
			left		: x,
			top			: "50%",
			marginTop	: y
		}).hide();
		balloon.delay(1000).fadeIn(2000);
		balloon.data("point",{ x : x, y : y });
		balloon.bind("enterFrame", function(){
			if ($(this).hasClass("turn")) { $(this).css({ left : "-=1" });}
			else { $(this).css({ left : "+=1" }); }
			var _x	= Number($(this).offset().left);
			var x	= $(this).data("point").x;
			var y	= $(this).data("point").y;
			$(this).css({ marginTop : y + Math.cos((_x - x) / 40) * 30 });
			if ((_x - x) >= stage.width()) {
				$(this).addClass("turn");
			} else if ((_x - x) <= 0) {
				$(this).removeClass("turn");
			}
		});
		setInterval(function(){
			balloon.trigger("enterFrame");
		}, 100);
		
	});
})(jQuery);