var isiP = false;
var isAnd = false;

$(function(){
	$("#topimg").attr('src', '/wp-content/themes/amakusa/images/topimg.png');
	$("#anim_area").html('<span id="anim_wind" class="anim png anim_sea">風</span><span id="anim_sea" class="anim png anim_sea">波</span><span id="anim_sea2" class="anim png anim_sea">波</span><span id="anim_sea3" class="anim png anim_sea">波</span><span id="anim_sea4" class="anim png anim_sea">波</span><span id="anim_bus" class="anim png">バス</span><span id="anim_arixang" class="anim png">温泉</span><span id="anim_dino" class="anim png">恐竜</span><span id="anim_canoe" class="anim png">カヌー</span><span id="anim_dol" class="anim png">イルカ</span><span id="anim_atrain" class="anim png">A列車</span><span id="anim_cloud1" class="anim png anim_cloud_l">雲</span><span id="anim_cloud2" class="anim png anim_cloud_l">雲</span><span id="anim_cloud3" class="anim png anim_cloud_l">雲</span><span id="anim_cloud4" class="anim png anim_cloud_s">雲</span><span id="anim_cloud5" class="anim png anim_cloud_s">雲</span><span id="anim_cloud6" class="anim png anim_cloud_s">雲</span><span id="anim_plane" class="anim png anim_plane">飛行機</span><span id="anim_haiya" class="anim png anim_haiya">ハイヤ</span><span id="anim_ferry" class="anim png anim_ferry">フェリー</span><span id="anim_fish" class="anim png anim_fish">魚</span><span id="anim_family" class="anim png anim_family">家族</span>');

	if(navigator.userAgent.match('iP')) {	// iPhone or iPad
		isiP = true;
	}
	if(navigator.userAgent.match('And')) {	// Android
		isAnd = true;
	}

	if(isiP || isAnd) {	// スマホだったら
		$("#top_logo").html('<img src="/wp-content/themes/amakusa/images/logo.png" alt="天草島旅 会いたい海。行きたい島。" />');
	}
});

$(window).load(function() {
	startAnimation();
});

/**
 * 画像アニメーション用jquery plugin
 * (スタイルシートで、width,height,background-imageの指定をしておく必要がある)
 *
**/
;(function($){
	$.fn.animImage = function(options) {
		var options = $.extend({
			'left':0,	// 背景画像のposition(left)の値
			'top':0,	// 背景画像のposition(top)の値
			'speed':3,	// アニメーションのスピード
			'frame':0,	// スタートするフレーム位置
			'max_frame':6,	// 合計のフレーム数
			'onceFlg':false,	// false:loop, true:once
			'direction':0,	// 0:縦, 1:横
			'delay':0	// 最初のフレームに戻るまで何フレーム待つか
		}, options);

		return this.each(function(){
			var trgt = $(this);
			var frame = options.frame;
			var interval = 1000/options.speed;
			var item_height = parseInt(trgt.css('height').replace('px',''));
			var item_width = parseInt(trgt.css('width').replace('px',''));
			var delay_cnt = 0;

			var animation = setInterval(function(){
				if(options.direction == 0) {
					var newtop = item_height * frame * (-1) - options.top;
					var newleft = (-1) * options.left;
				} else {
					var newleft = item_width * frame * (-1) - options.left;
					var newtop = (-1) * options.top;
				}
				trgt.css({
					"background-position": newleft+"px "+ newtop +"px"
				});
				frame++;
				if(frame>=options.max_frame){
					if(options.onceFlg) clearInterval( animation );
					if(delay_cnt == options.delay) {
						frame = 0;
						delay_cnt = 0;
					} else {
						frame--;
						delay_cnt++;
					}
				};
			}, interval);
		});
	};
})(jQuery);


;(function($){
	$.fn.animStraightLoop = function(options) {
		var options = $.extend({
			's_top':0,	// アニメーション開始位置(top)
			's_left':0,	// アニメーション開始位置(left)
			'f_top':0,	// アニメーション終了位置(top)
			'f_left':0,	// アニメーション終了位置(left)
			'speed':2000,	// アニメーションのスピード
			'delay':0	// 逆方向に進むまでどれくらい待つか
		}, options);

		return this.each(function(){
			defaultAnim($(this), options);
		});
	};

	function defaultAnim(obj, opts) {
		obj.delay(opts.delay).animate({'top':opts.f_top,'left':opts.f_left}, opts.speed, function(){
			reverseAnim(obj, opts);
		});
	}
	function reverseAnim(obj, opts) {
		obj.delay(opts.delay).animate({'top':opts.s_top,'left':opts.s_left}, opts.speed, function(){
			defaultAnim(obj, opts);
		});
	}
})(jQuery);


;(function($){
	$.fn.animCloud = function(options) {
		var options = $.extend({
			's_top':0,	// アニメーション開始位置(top)
			's_left':0,	// アニメーション開始位置(left)
			'f_top':0,	// アニメーション終了位置(top)
			'f_left':0,	// アニメーション終了位置(left)
			'speed':2000,	// アニメーションのスピード
			'delay':0	// 次のループの開始までの待ち時間
		}, options);

		return this.each(function(){
			firstAnim($(this), options);
		});
	};

	function firstAnim(obj, opts) {
		obj.animate({'top':opts.f_top,'left':opts.f_left}, opts.first_speed, function(){
			defaultAnim(obj, opts);
		});
	}

	function defaultAnim(obj, opts) {
		obj.delay(opts.delay).css({'top':opts.s_top, 'left':opts.s_left}).animate({'top':opts.f_top,'left':opts.f_left}, opts.speed, function(){
			obj.css({'top':opts.s_top, 'left':opts.s_left});
			defaultAnim(obj, opts);
		});
	}
})(jQuery);


function startAnimation() {
	$("#anim_bus").animImage({
		'left':0,
		'top':0,
		'speed':4,
		'max_frame':4,
		'delay':0
	});

	$("#anim_arixang").animImage({
		'left':250,
		'top':0,
		'speed':2,
		'max_frame':4,
		'delay':1
	});

	$("#anim_dino").animImage({
		'left':0,
		'top':200,
		'speed':16,
		'max_frame':6,
		'delay':20
	});

	$("#anim_dol").animImage({
		'left':345,
		'top':0,
		'speed':7,
		'max_frame':12,
		'delay':40
	});

	$("#anim_canoe").animImage({
		'left':465,
		'top':0,
		'speed':7,
		'max_frame':14,
		'delay':0
	});

	$("#anim_plane").animImage({
		'left':585,
		'top':0,
		'speed':2.5,
		'max_frame':17,
		'delay':0
	});

	$("#anim_haiya").animImage({
		'left':125,
		'top':340,
		'speed':1.2,
		'max_frame':16,
		'delay':0
	});

	$("#anim_ferry").animImage({
		'left':185,
		'top':360,
		'speed':2,
		'max_frame':4,
		'delay':0
	});

	$("#anim_family").animImage({
		'left':0,
		'top':700,
		'speed':4,
		'max_frame':10,
		'delay':7
	});

	$("#anim_atrain").animStraightLoop({
		's_top':130,
		's_left':790,
		'f_top':100,
		'f_left':1000,
		'speed': 5000,
		'delay':2000
	});

	$("#anim_wind").animImage({
		'left':55,
		'top':340,
		'speed':2.5,
		'max_frame':4,
		'delay':0
	});


	if(!isAnd) {
		$("#anim_sea").animImage({
			'left':100,
			'top':0,
			'speed':2,
			'max_frame':8,
			'delay':1
		});

		$("#anim_sea2").animImage({
			'left':100,
			'top':0,
			'speed':1.6,
			'max_frame':8,
			'delay':3
		});

		$("#anim_sea3").animImage({
			'left':100,
			'top':0,
			'speed':1.7,
			'max_frame':8,
			'delay':4
		});

		$("#anim_sea4").animImage({
			'left':100,
			'top':0,
			'speed':4,
			'max_frame':8,
			'delay':4
		});

		$("#anim_fish").animImage({
			'left':185,
			'top':560,
			'speed':4,
			'max_frame':2,
			'delay':0
		});

		$("#anim_cloud1").animCloud({
			's_top':-15,
			's_left':-100,
			'f_top':-15,
			'f_left':960,
			'first_speed':100000,
			'speed':150000
		});

		$("#anim_cloud2").animCloud({
			's_top':0,
			's_left':-200,
			'f_top':0,
			'f_left':960,
			'first_speed':130000,
			'speed':200000
		});

		$("#anim_cloud3").animCloud({
			's_top':5,
			's_left':-100,
			'f_top':5,
			'f_left':960,
			'first_speed':150000,
			'speed':175000
		});

		$("#anim_cloud4").animCloud({
			's_top':10,
			's_left':-100,
			'f_top':10,
			'f_left':960,
			'first_speed':80000,
			'speed':150000
		});

		$("#anim_cloud5").animCloud({
			's_top':-5,
			's_left':-100,
			'f_top':-5,
			'f_left':960,
			'first_speed':60000,
			'speed':140000
		});

		$("#anim_cloud6").animCloud({
			's_top':-10,
			's_left':-100,
			'f_top':-10,
			'f_left':960,
			'first_speed':20000,
			'speed':160000
		});
	}

	return;
}