'use strict';

(function($) {

	/**
	 *	GetUserAgent: IE/Edge判別
	 */
	var GetUserAgent = function(element, options) {
		this.$window = $(window);
		this.$html = $('html');
		this.init(options);
	};

	GetUserAgent.prototype = {

		defaults: {
		},

		init: function(options) {
			this.options = $.extend({}, this.defaults, options);
			this.initializeEvent();
		},

		initializeEvent: function() {
			var _this = this;
			var userAgent = window.navigator.userAgent.toLowerCase();

			if(userAgent.indexOf('msie') !== -1 || userAgent.indexOf('trident') !== -1) {
				_this.$html.addClass('ie');
			} else if (userAgent.indexOf('edge') !== -1) {
				_this.$html.addClass('edge');
			}
		}

	};

	$.fn.GetUserAgent = function(options) {
		return this.each(function() {
			new GetUserAgent(this, options);
		});
	};

	/**
	 * Responsive
	 */
	var Responsive = function(options) {
		this.$window = $(window);
		this.$html = $('html');
		this.timer = false;
		this.init(options);
	}

	Responsive.prototype = {
		defaults: {
			flg :true,
			breakpoint: {
				// tablet: 1109,
				sp: 640
			},
			deviceClass: {
				pc: 'is-pc',
				// tablet: 'is-tablet',
				sp: 'is-sp'
			}
		},

		init: function(options) {
			this.options = $.extend({}, this.defaults, options);
			this.initializeEvent();
		},

		initializeEvent: function() {
			var _this = this;

			// if (!Modernizr.mediaqueries) {
			// 	_this.setClassIE();
			// } else {
			_this.$window.on('resize', $.proxy(_this.resizeHandler, _this)).trigger('resize');
			// }
		},

		resizeHandler: function() {
			var _this = this;

			if(_this.timer !== false) {
				clearTimeout(_this.timer);
			}

			_this.timer = setTimeout(function() {
				if (window.innerWidth <= _this.options.breakpoint.sp) {
					_this.$html.removeClass(_this.options.deviceClass.pc).addClass(_this.options.deviceClass.sp);
				} else {
					_this.$html.removeClass(_this.options.deviceClass.sp).addClass(_this.options.deviceClass.pc);
				}
			}, 100);
		// },

		// setClassIE: function() {
		// 	$('div.m_panel:nth-child(2n)').addClass('js-ie_2n');
		}
	};

	$.fn.Responsive = function(options) {
		return this.each(function() {
			new Responsive(options);
		});
	};

	/**
	 *	SmoothScroll: アンカーリンクのスムーススクロール
	 */
	var SmoothScroll = function(element, options) {
		this.$window = $(window);
		this.$trigger = $(element);
		this.init(options);
	};

	SmoothScroll.prototype = {

		defaults: {
			easing: 'swing',
			speed: 'normal',
		},

		init: function(options) {
			this.options = $.extend({}, this.defaults, options);
			this.initializeEvent();
		},

		initializeEvent: function() {
			var _this = this;
			_this.$trigger.on('click', $.proxy(_this.clickHandler, _this));
		},

		clickHandler: function() {
			var _this = this,
					href = _this.getHref(),
					scrollPos,
					headerHeight = 0;

			if ($('html').hasClass('is-sp')) {
				headerHeight = $('#header').outerHeight();
			}

			if (href === '#') {
				scrollPos = 0;
			} else {
				scrollPos = $(href).offset().top - headerHeight;
			}

			$('html, body').animate(
				{scrollTop: scrollPos},
				_this.options.speed,
				_this.options.easing
			);

			return false;
		},

		getHref: function () {
			var _this = this;
			return _this.$trigger.attr('href') || _this.$trigger.data('href');
		}

	};

	$.fn.SmoothScroll = function(options) {
		return this.each(function() {
			new SmoothScroll(this, options);
		});
	};

	/**
	 * ImageSwitcher: 画像切替
	 */
	var ImageSwitcher = function(element, options) {
		this.$window = $(window);
		this.$trigger = $(element);
		this.init(options);
	};

	ImageSwitcher.prototype = {

		defaults: {
			pc: '_pc',
			sp: '_sp',
			replacepoint: 640
		},

		init: function(options) {
			this.options = $.extend({}, this.defaults, options);
			this.initialiseEvent();
		},

		initialiseEvent: function() {
			var _this = this;
			_this.$window.on('load resize', $.proxy(_this.switchHandler, _this));
		},

		switchHandler: function() {
			var _this = this,
				replaceWidth = _this.options.replacepoint,
				pc = _this.options.pc,
				sp = _this.options.sp,
				windowWidth = _this.$window.outerWidth();

			_this.$trigger.each(function(){
				var $this = $(this);
				if(windowWidth > replaceWidth) {
					$this.attr('src', $this.attr('src').replace(sp, pc));
				} else {
					$this.attr('src', $this.attr('src').replace(pc, sp));
				}
			});
		}

	};

	$.fn.ImageSwitcher = function(options) {
		return this.each(function() {
			new ImageSwitcher(this, options);
		});
	};

		/**
	 *	Accordion: アコーディオン
	 */
	var Accordion = function(element, options) {
		this.$element = $(element);
		this.$trigger = this.$element.find('.js-accordion-trigger');
		this.$subTrigger = this.$element.find('.js-inner-accordion-trigger');
		this.$target = this.$element.find('.js-accordion-target');
		this.$subTarget = this.$element.find('.js-inner-accordion-target');
		this.$closeBtn = this.$element.find('.js-accordion-close');
		this.$currentTarget;
		this.init(options);
	};

	Accordion.prototype = {

		defaults: {
			openClass: 'is-opened',
			targetClass: '.js-accordion-target',
			subTargetClass: '.js-inner-accordion-target',
		},

		init: function(options) {
			this.options = $.extend({}, this.defaults, options);
			this.initializeEvent();
		},

		initializeEvent: function() {
			var _this = this;

			_this.$trigger.on('click', $.proxy(_this.clickHandler, _this));
			_this.$subTrigger.on('click', $.proxy(_this.subClickHandler, _this));
			_this.$closeBtn.on('click', $.proxy(_this.closeHandler, _this));
		},

		clickHandler: function(e) {
			var _this = this,
				$trigger = $(e.currentTarget),
				$parent = $trigger.closest('[data-group="parents"]'),
				$target = $parent.find(_this.options.targetClass);

			_this.$currentTarget = $parent;

			if ($trigger.hasClass(_this.options.openClass)) {
				$trigger.removeClass(_this.options.openClass);
				$target.slideUp().removeClass(_this.options.openClass);
			} else {
				_this.$trigger.removeClass(_this.options.openClass);
				_this.$target.slideUp();
				_this.$subTrigger.removeClass(_this.options.openClass);
				_this.$subTarget.slideUp();
				$trigger.addClass(_this.options.openClass);
				$target.slideDown(function() {
					$.proxy(_this.scrollHandler, _this)();
				});
			}
		},

		subClickHandler: function(e) {
			var _this = this,
				$trigger = $(e.currentTarget),
				$parent = $trigger.closest('[data-group="parents-sub"]'),
				$target = $parent.find(_this.options.subTargetClass);

			_this.$currentTarget = $parent;

			if ($trigger.hasClass(_this.options.openClass)) {
				$trigger.removeClass(_this.options.openClass);
				$target.slideUp().removeClass(_this.options.openClass);
			} else {
				_this.$subTrigger.removeClass(_this.options.openClass);
				_this.$subTarget.slideUp();
				$trigger.addClass(_this.options.openClass);
				$target.slideDown(function() {
					$.proxy(_this.scrollHandler, _this)();
				});
			}
		},

		scrollHandler: function() {
			var _this = this,
				startPos = $('.').offset().top,
				goalPos = _this.$currentTarget.offset().top,
				num = startPos - goalPos;

			$('body, html').animate({scrollTop:goalPos},400);
		},

		closeHandler: function() {
			var _this = this;
			_this.$trigger.removeClass(_this.options.openClass);
			_this.$target.slideUp();
			_this.$subTrigger.removeClass(_this.options.openClass);
			_this.$subTarget.slideUp();
		}

	};

	$.fn.Accordion = function(options) {
		return this.each(function() {
			new Accordion(this, options);
		});
	};

		/**
	 *	Nav: ナビゲーション（ドロワーメニュー)
	 */
	var Nav = function(element, options) {
		this.$window = $(window);
		this.$html = $('html');
		this.$body = $('body');
		this.$document = $(document);
		this.$element = $(element);
		this.$trigger = this.$element;
		this.$contents = $('#contents');
		this.$overlay = $('.l-modal-overlay');
		this.timer = false;
		this.flag = false;
		this.historyPos = 0;
		this.init(options);
	};

	Nav.prototype = {

		defaults: {
			currentClass: 'is-opened'
		},

		init: function(options) {
			this.options = $.extend({}, this.defaults, options);
			this.initializeEvent();
		},

		initializeEvent: function() {
			var _this = this;

			_this.$window.on('load resize', $.proxy(_this.resizeHandler, _this)).trigger('resize');
			_this.$trigger.find('button').on('keypress', $.proxy(_this.keyHandler, _this));
			_this.$trigger.find('button').on('click', $.proxy(_this.clickHandler, _this));
			// _this.$trigger.next().find('a').on('click', $.proxy(_this.jumpAnchor, _this));
			_this.$trigger.closest('.js-nav-parent').find('.js-nav-target a').on('click', $.proxy(_this.jumpAnchor, _this));
		},

		keyHandler: function(e) {
			var _this = this;

			if(e.keyCode === 13) {
				$.proxy(_this.clickHandler, _this)(e);
			}
		},

		clickHandler: function(e) {
			// if (this.$html.hasClass('is-sp')) {
				e.preventDefault();
				var _this = this,
					$target = $('.js-nav-target').find('.l-drawer-nav'),
					$close = _this.$overlay;

				$(e.currentTarget).toggleClass(_this.options.currentClass);
				if ($(e.currentTarget).hasClass(_this.options.currentClass)) {
					_this.historyPos = $(window).scrollTop();
					$target.addClass(_this.options.currentClass);
					$target.slideDown();
					_this.$overlay.addClass('is-active');
					_this.$body.addClass('is-no-scroll');
					_this.$html.addClass('is-no-scroll');
					_this.$contents.css('top', -_this.historyPos);
				} else {
					$target.removeClass(_this.options.currentClass);
					$target.slideUp();
					_this.$overlay.removeClass('is-active');
					_this.$body.removeClass('is-no-scroll');
					_this.$html.removeClass('is-no-scroll');
					_this.$contents.css('top', '');
					$('html, body').animate({ scrollTop: _this.historyPos }, 0);
				}

				$close.on('click', function() {
					$(e.currentTarget).removeClass(_this.options.currentClass);
					$target.removeClass(_this.options.currentClass);
					$target.slideUp();
					_this.$overlay.removeClass('is-active');
					_this.$body.removeClass('is-no-scroll');
					_this.$html.removeClass('is-no-scroll');
					_this.$contents.css('top', '');
					$('html, body').animate({ scrollTop: _this.historyPos }, 0);
				});
			// }
		},

		jumpAnchor: function(e) {
			var _this = this,
				href = $(e.currentTarget).attr('href'),
				scrollPos,
				headerHeight = 0;

			e.preventDefault();

			_this.flag = 0;
			_this.$trigger.find('button').removeClass(_this.options.currentClass);
			_this.$trigger.next().removeClass(_this.options.currentClass);
			// _this.$trigger.next().slideUp();
			_this.$trigger.closest('.js-nav-parent').find('.js-nav-target .l-drawer-nav').slideUp();
			_this.$overlay.removeClass('is-active');
			_this.$body.removeClass('is-no-scroll');
			_this.$html.removeClass('is-no-scroll');
			_this.$contents.css('top', '');

			headerHeight = $('#header').outerHeight();
			scrollPos = $(href).offset().top - headerHeight;

			$('html, body').animate({ scrollTop: scrollPos }, 'normal', 'swing');
		},

	};

	$.fn.Nav = function(options) {
		return this.each(function() {
			new Nav(this, options);
		});
	}

	/**
	 * VideoPlayer: 画像切替
	 */
	var VideoPlayer = function(element, options) {
		this.$container = $(element);
		this.$trigger = this.$container.find('a');
		this.$player = this.$container.find('iframe');
		this.init(options);
	};

	VideoPlayer.prototype = {

		defaults: {
			playClass: 'is-play'
		},

		init: function(options) {
			this.options = $.extend({}, this.defaults, options);
			this.initialiseEvent();
		},

		initialiseEvent: function() {
			var _this = this;
			_this.$trigger.on('click', $.proxy(_this.playVideo, _this));
		},

		playVideo: function(e) {
			var _this = this;

			e.preventDefault();
			$(e.currentTarget).fadeOut(100).addClass(_this.options.playClass);
			player.playVideo();
		}

	};

	$.fn.VideoPlayer = function(options) {
		return this.each(function() {
			new VideoPlayer(this, options);
		});
	};

	$(function() {
		$(window).GetUserAgent();
		$(window).Responsive();
		$('a[href^="#"]:not(.js-drawer-anchor, .js-noanchor)').SmoothScroll();
		$('.js-mh-item1').matchHeight();
		$('.js-mh-item2').matchHeight();

		$('.js-switch-image').ImageSwitcher();
		$('.js-accordion').Accordion();

		$('.js-nav').Nav();
	});

})(jQuery, window, document);

// YouTube Player
var tag = document.createElement('script');

tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('video-player', {
		videoId: 'nYW-HynhDhw',
		playerVars: {
			rel: 0
		}
	});
	$('.js-video-player').VideoPlayer();
}


$(function(){
	/**
	 * menu
	 */
	$('#js-buttonHamburger').on("click keydown", function(e) {
		if(typeof e.keyCode === "undefined" || e.keyCode === 13) {
			if ($(this).attr('aria-expanded') == 'false') {
				$(this).attr('aria-expanded', true);
				$('.overlay').css('display', 'block');
				$('#contents a').focus(function() {
					$('.nav-item a').focus();
				});
			} else {
				$(this).attr('aria-expanded', false);
				$('.overlay').css('display', 'none');
			}
		}
	});
	$('.nav-item a').click(function () {
		if ($('#js-buttonHamburger').attr('aria-expanded') == 'true') {
			$('#js-buttonHamburger').attr('aria-expanded', false);
			$('.overlay').css('display', 'none');
		} else {
			$('#js-buttonHamburger').attr('aria-expanded', true);
			$('.overlay').css('display', 'block');
		}
	});

	$('.a-link a').keyup(function(e) {
		var id = $(this).attr('href');
		switch(e.which){
			case 13:
				switch( id ) {
					case '#chapter1':
						$('#chapter1').attr('tabindex', '0');
						$('#chapter1').focus();
						break;
					case '#chapter2':
						$('#chapter2').attr('tabindex', '0');
						$('#chapter2').focus();
						break;
					case '#chapter3':
						$('#chapter3').attr('tabindex', '0');
						$('#chapter3').focus();
						break;
					case '#chapter4':
						$('#chapter4').attr('tabindex', '0');
						$('#chapter4').focus();
						break;
				}
				break;
		}
	});

	/**
	 * page top
	 */
	var appear = false;
	var pagetop = $('.page_top');
	$(window).scroll(function () {
		if ($(this).scrollTop() > 100) {
			if (appear == false) {
				appear = true;
				pagetop.stop().animate({
					'bottom': '25px'
				}, 300);
			}
		} else {
			if (appear) {
				appear = false;
				pagetop.stop().animate({
					'bottom': '-80px'
				}, 300);
			}
		}
	});

});