(function(win, $){
  'use strict';
  win.ANIMATION = win.ANIMATION || {};

  win.ANIMATION.common = (function() {
	var defParams = {
	  isShowClass      : 'is-show',
	  isAbsoluteClass  : 'is-absolute',
	  isHoverClass     : 'is-hover',
	  isActiveClass    : 'is-active',
	  isOpenClass      : 'is-open',
	  isExtendClass    : 'is-extend',
	  btnGnbClass      : 'btn--gnb',
	  btnCloseClass    : 'btn--close',
	  btnSearchClass   : 'btn--search',
	  btnTopClass      : 'btn--top',
	  btnFamilyClass   : 'btn--family',
	  btnLangClass     : 'btn--lang',
	  btnShare         : 'btn--share',
	  btnCopy          : 'btn--copy',
	  btnCloseLayer    : 'btn--close-popup',
	  btnPrint         : 'btn--print',
	  btnAcceptPrint   : 'btn--accept-print',
	  btnViewImage     : 'btn--view-image',
	  btnConfirm       : 'btn--confirm',
	  btnReTry         : 'btn--retry',

	  header           : '.header',
	  btnCategory      : '.category__btn',
	  btnLanguage      : '.language__btn',
	  gnbList          : '.gnb__list',
	  gnbLink          : '.gnb__link',
	  gnbItem          : '.gnb__item',
	  searchContent    : '.search-header__content',
	  dimmed           : '.dimmed',
	  scrollGuide      : '.scroll-guide',
	  tableWrap        : '.table-wrap',

	  btnScroll        : '.btn-scroll',
	  btn              : '.btn',
	  alert            :  '.alert',
	  layer            : '.layer',
	  layerShare       : '#layer--share',
	  layerViewImage   : '#layer--view-image'
	};
	return {
	  init: function() {
		this.setElement();
		this.initOpts();
		this.initLayout();
		this.bindEvents();
		this.checkScrollGuide();
		jQuery('.scrollbar-inner').scrollbar();
	  },

	  setElement: function(){
		this.header = $(defParams.header);
		this.btnScroll = $(defParams.btnScroll);
		this.gnbList = $(defParams.gnbList);
		this.gnbItem = $(defParams.gnbItem);
		this.btn = $(defParams.btn);
		this.btnCategory = $(defParams.btnCategory);
		this.btnLanguage = $(defParams.btnLanguage);
		this.searchContent = $(defParams.searchContent);
		this.gnbLink = $(defParams.gnbLink);
		this.scrollGuide = $(defParams.scrollGuide);
		this.dimmed = $(defParams.dimmed);
		this.layer = $(defParams.layer);
		this.layerShare = $(defParams.layerShare);
		this.layerViewImage = $(defParams.layerViewImage);
		this.alert = $(defParams.alert);
		this.tableWrap = $(defParams.tableWrap);
		this.knowledgeTab = $('.knowledge .tab__btn');
		this.window = $(win);
		this.body = $('body');
	  },

	  initOpts: function() {
		this.windowScrollTop = $(window).scrollTop();
		this.timeLoad;
		this.scrollActive = true;
		this.searchOpenCondition = true;
		this.gnbOpenCondition = true;
		this.next = true;
		this.prev = true;
		this.currentProduct = 0;
		this.currentX;
		this.prevX = 0;
		this.url = $(location).attr('href');
		this.temp = $("<input>");
	  },
	  bindEvents: function() {
		this.gnbList.on('mouseenter mouseleave', $.proxy(this.mouseHeader, this));
		this.btn.on('click', $.proxy(this.clickBtnEvent, this));
		this.btnCategory.on('click', $.proxy(this.categoryEvent, this));
		this.btnCategory.on('mouseleave mouseenter', $.proxy(this.categoryMouseEvent, this));
		this.btnLanguage.on('click', $.proxy(this.languageEvent, this));
		this.window.on('scroll', $.proxy(this.onscrollEvent, this));
		this.window.on('resize', $.proxy(this.onResizeEvent, this));
		this.gnbLink.on('click', $.proxy(this.extendEvent, this));
		this.dimmed.on('click', $.proxy(this.dimmedClickFunc, this));
		this.scrollGuide.on('click', $.proxy(this.scrollGuideClickFunc, this));
		this.scrollGuide.bind('touchstart touchend', $.proxy(this.touchEvent, this));
	  },
	  initLayout: function() {
		this.scrollFunc();
		this.gsapRegister();
		this.scrollTriggerMotion();
		if(!$('.main-js').length){
		  this.header.addClass('is-show');
		}
		this.scrollTriggerTab()
	  },
	  onscrollEvent: function() {
		if($('.main-js').length){
		  this.scrollFunc();
		}
		this.scrollTriggerTab();
	  },
	  gsapRegister: function() {
		gsap.registerPlugin(ScrollTrigger);
	  },
	  scrollTriggerTab: function() {
		clearTimeout(this.timeOutDim);
		this.timeOutDim = setTimeout($.proxy(function() {
		  if($('.scroll-guide').length && window.innerWidth < 1025) {
			$('.scroll-guide').each(function(index,el) {
			  if($(el).is(':visible') && $(el).offset().top < ($(win).scrollTop() + $(win).outerHeight()) && $(el).parent().width() < $(el).parent().find('table').width()) {
				$(el).delay(1300).fadeOut(function() {
				  $(this).remove();
				});
			  }
			})
		  }
		}, this),1)
	  },
	  scrollTriggerMotion: function () {
		if($(".scrollMotion").length > 0){
		  $(".scrollMotion:visible").each(function(index){
			gsap.to($(this), {
			  scrollTrigger: {
				trigger: $(this),
				start: "top 100%",
				end:"bottom center",
				toggleClass: {targets: $(".scrollMotion:visible").eq(index), className: "is-active"},
				once: true,
			  },
			});
		  })
		}
	  },
	  dimmedClickFunc: function() {
		$.scrollLock(false);
		this.dimmed.stop().fadeOut();
		this.header.removeClass('is-change');
		this.header.removeClass(defParams.isHoverClass);
		this.header.removeClass('header--search-open');
		this.scrollFunc();
		this.layer.removeClass(defParams.isShowClass);
		this.dimmed.removeClass('dimmed--black');
		if($('.view-thumb').length) {
		  $('.view-thumb').remove();
		}

	  },
	  scrollGuideClickFunc: function(e) {
		var target = $(e.currentTarget);

		target.css({
		  opacity: 0,
		  transition: "opacity 0.4s ease-out"
		})
		target.delay(400).queue(function() { $(this).remove() })
		if(target.parents('.table-wrap').length){
		  target.parents('.table-wrap').css('overflow','auto')
		}
	  },
	  touchEvent: function(e) {
		var target = $(e.currentTarget);
		if(e.type == 'touchstart') {
		  this.touchstartX = e.changedTouches[0].screenX;
		} else if(e.type == 'touchend') {
		  this.touchendX = e.changedTouches[0].screenX
		  if(Math.abs(this.touchendX - this.touchstartX) > 30) {
			target.css({
			  opacity: 0,
			  transition: "opacity 0.4s ease-out"
			})
			target.delay(400).queue(function() { $(this).remove() })
			if(target.parents('.table-wrap').length){
			  target.parents('.table-wrap').css('overflow','auto')
			}
		  }
		}
	  },
	  mouseHeader: function(e) {
		if($('.main-js').length){
		  if(this.window.scrollTop() <= 0 && !this.header.hasClass('header--gnb-open') && !this.header.hasClass('header--search-open')) {
			if(e.type == 'mouseenter'){
			  this.header.addClass('is-change');
			  this.header.addClass(defParams.isHoverClass);
			} else {
			  this.header.removeClass('is-change');
			  this.header.removeClass(defParams.isHoverClass);
			}
		  }
		}
	  },
	  scrollFunc: function() {
		if($('.main-js').length) {
		  this.scrollTop = this.window.scrollTop();
		  if(this.scrollTop > 0) {
			this.header.addClass('is-change').addClass(defParams.isHoverClass);
		  } else {
			if(!this.header.hasClass('header--lang-open') && !this.header.hasClass('header--lang-open') && !this.header.hasClass('header--search-open')) {
			  this.header.removeClass('is-change').removeClass(defParams.isHoverClass);
			}
		  }
		} else {
		  this.header.addClass('is-change').addClass(defParams.isHoverClass);
		}
	  },
	  categoryEvent: function(e) {
		var target = $(e.currentTarget);
		this.btnCategory.parents('.category__item').removeClass(defParams.isActiveClass);
		target.parents('.category__item').addClass(defParams.isActiveClass);
	  },
	  languageEvent: function(e) {
		var target = $(e.currentTarget);
		this.btnLanguage.removeClass(defParams.isActiveClass);
		target.addClass(defParams.isActiveClass);
	  },
	  clickBtnEvent: function(e) {
		var target = $(e.currentTarget);
		if(target.hasClass(defParams.btnGnbClass)) {
		  this.gnbOpenFunc();
		} else if (target.hasClass(defParams.btnCloseClass)) {
		  $.scrollLock(false);
		  this.dimmed.stop().fadeOut();
		  this.header.removeClass('is-change');
		  this.header.removeClass(defParams.isHoverClass);
		  this.header.removeClass('header--search-open');
		  this.scrollFunc();
		} else if (target.hasClass(defParams.btnSearchClass)) {
		  this.searchOpen();
		} else if (target.hasClass(defParams.btnTopClass)) {
		  $('html, body').stop().animate({
			scrollTop : 0
		  },{
			duration: 700,
			'easing': 'easeInOutQuad',
		  })
		} else if (target.hasClass(defParams.btnFamilyClass)) {
		  target.parents('.family-site').toggleClass(defParams.isActiveClass);
		} else if (target.hasClass(defParams.btnLangClass)) {
		  if(this.header.hasClass('header--lang-open')) {
			if(this.header.hasClass('header--search-open')) {
			  this.header.removeClass('header--lang-open');
			  target.parents('.language').removeClass(defParams.isOpenClass);
			} else {
			  this.header.removeClass(defParams.isHoverClass).removeClass('header--lang-open').removeClass('is-change');
			  target.parents('.language').removeClass(defParams.isOpenClass);
			  this.scrollFunc();
			}
		  } else {
			this.header.addClass(defParams.isHoverClass).addClass('header--lang-open').addClass('is-change');
			target.parents('.language').addClass(defParams.isOpenClass);
		  }
		} else if(target.hasClass(defParams.btnShare)){
		  this.scrollLockLayer('open', this.layerShare)
		} else if(target.hasClass(defParams.btnCopy)){
		  this.body.append(this.temp);
		  this.temp.val(this.url).select();
		  document.execCommand("copy");
		  this.temp.remove();
		  this.scrollLockLayer('close', this.layerShare);
		  $('.alert').fadeIn();
		  setTimeout(function() {
			$('.alert').fadeOut();
		  }, 2000);
		} else if(target.hasClass(defParams.btnPrint)){
		  e.preventDefault();
		  this.centeredPopup(target.attr('href'),'productDetailPrint','810','620','yes');
		} else if(target.hasClass(defParams.btnAcceptPrint)){
		  window.print()
		} else if(target.hasClass(defParams.btnViewImage)){
		  $.scrollLock(true)
		  this.dimmed.addClass('dimmed--black').stop().fadeIn();
		  this.body.addClass(defParams.isShowClass);
		  this.layerViewImage.addClass(defParams.isShowClass);
		  $('.layer--view-image .layer__inner').append(`<img class="view-thumb" src="${target.find('img').attr('src')}" alt="">`);
		} else if(target.hasClass(defParams.btnCloseLayer)){
		  this.scrollLockLayer('close');
		  this.dimmed.removeClass('dimmed--black');
		  if($('.view-thumb').length) {
			$('.view-thumb').remove();
		  }
		} else if(target.hasClass(defParams.btnConfirm)) {
		  this.dimmed.stop().fadeOut();
		  this.layer.removeClass(defParams.isShowClass);
		  this.scrollLockLayer('close')
		} else if(target.hasClass(defParams.btnReTry)) {
		  location.reload();
		}
	  },
	  gnbOpenFunc: function() {
		if(this.gnbOpenCondition == true) {
		  this.gnbOpenCondition = false;
		  this.dimmed.stop().fadeOut();
		  if(this.header.hasClass('header--gnb-open')) {
			$('.btn--gnb .blind').text($('.btn--gnb').attr('data-text-open'));
			this.gnbLink.parents(defParams.gnbItem).find('.gnb__list--depth2').removeAttr('style');
			this.gnbLink.parents(defParams.gnbItem).removeClass(defParams.isExtendClass);
			if(window.innerWidth > 1024) {
			  this.header.stop().animate({
				opacity: 0
			  },{
				duration: 500,
				'easing': 'easeInOutExpo',
				complete: $.proxy(function() {
				  $.scrollLock(false);
				  this.gnbOpenCondition = true;
				  this.header.removeClass('header--gnb-open');
				  this.scrollFunc();
				  this.gnbItem.removeClass(defParams.isActiveClass);
				  this.header.css({
					opacity: 1
				  })
				}, this)
			  });
			} else if(window.innerWidth < 1025) {
			  this.header.stop().animate({
				left: 100 + '%'
			  },{
				duration: 500,
				'easing': 'easeInOutCubic',
				complete: $.proxy(function() {
				  $.scrollLock(false);
				  this.gnbOpenCondition = true;
				  this.header.removeClass('header--gnb-open');
				  this.scrollFunc();
				  this.gnbItem.removeClass(defParams.isActiveClass);
				  this.header.css({
					left: 0
				  })
				}, this)
			  });
			}
		  } else {
			$.scrollLock(true);
			$('.btn--gnb .blind').text($('.btn--gnb').attr('data-text-close'));
			this.gnbItem.each(function(index,element){
			  var timeDelay = 30 + 100*index;
			  setTimeout($.proxy(function() {
				$(element).addClass(defParams.isActiveClass);
			  }, this),timeDelay)
			});
			this.gnbOpenCondition = true;
			this.header.addClass('header--gnb-open').removeClass('header--search-open').removeClass('header--lang-open').removeClass('is-change').removeClass('is-hover');
			$('.language').removeClass(defParams.isOpenClass);
		  }
		}
	  },
	  searchOpen: function() {
		if(this.searchOpenCondition == true) {
		  this.searchOpenCondition = false;
		  if(this.header.hasClass('header--search-open')) {
			if(this.header.hasClass('header--lang-open')){
			  $.scrollLock(false);
			  this.dimmed.stop().fadeOut();
			  this.header.removeClass('header--search-open');
			  setTimeout($.proxy(function(){
				this.scrollFunc();
				this.searchOpenCondition = true;
			  }, this),500)
			} else {
			  $.scrollLock(false);
			  this.dimmed.stop().fadeOut();
			  this.header.removeClass('is-change').removeClass(defParams.isHoverClass).removeClass('header--search-open');
			  this.scrollFunc();
			  setTimeout($.proxy(function(){
				this.searchOpenCondition = true;
			  }, this),500)
			}
		  } else {
			if(this.header.hasClass('is-change')) {
			  $.scrollLock(true);
			  this.dimmed.stop().delay(200).fadeIn();
			  this.header.addClass('header--search-open');
			  setTimeout($.proxy(function(){
				this.searchOpenCondition = true;
			  }, this),500)
			} else {
			  this.header.addClass('is-change').addClass(defParams.isHoverClass).addClass('header--search-open');
			  $.scrollLock(true);
			  this.dimmed.stop().delay(200).fadeIn();
			  setTimeout($.proxy(function(){
				this.searchOpenCondition = true;
			  }, this),500)
			}
		  }
		}
	  },
	  extendEvent: function(e) {
		var target = $(e.currentTarget),
			screen = this.window.outerWidth();
		if(screen < 1025) {
		  if(target.parents(defParams.gnbItem).hasClass(defParams.isExtendClass)) {
			target.parents(defParams.gnbItem).removeClass(defParams.isExtendClass);
			target.parents(defParams.gnbItem).find('.gnb__list--depth2').stop().slideUp();
		  } else {
			this.gnbLink.parents(defParams.gnbItem).removeClass(defParams.isExtendClass);
			target.parents(defParams.gnbItem).addClass(defParams.isExtendClass);
			this.gnbLink.parents(defParams.gnbItem).find('.gnb__list--depth2').stop().slideUp()
			target.parents(defParams.gnbItem).find('.gnb__list--depth2').stop().slideDown();
		  }
		}
	  },
	  scrollLockLayer : function (state, typeLayer){
		if(state == 'open'){
		  $.scrollLock(true);
		  this.dimmed.stop().fadeIn();
		  this.body.addClass(defParams.isShowClass);
		  typeLayer.addClass(defParams.isShowClass);
		}else if(state == 'close'){
		  $.scrollLock(false);
		  this.body.removeClass(defParams.isShowClass);
		  this.layer.removeClass(defParams.isShowClass);
		  this.dimmed.stop().fadeOut();
		}
	  },
	  centeredPopup: function(url,winName,w,h,scroll){
		this.LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
		this.TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
		this.settings ='height='+h+',width='+w+',top='+this.TopPosition+',left='+this.LeftPosition+',scrollbars='+scroll+',resizable'
		this.popupWindow = window.open(url,winName,this.settings)
	  },
	  checkScrollGuide: function() {
		if($(win).width() < 1024){
		  if($('.tbl-product__main').length){
			$('.scroll-guide').show();
		  }else if($('.table-wrap').is(':visible')){
			$('.table-wrap:visible').each(function(index) {
			  if($('.table-wrap:visible').eq(index).find('table').width() > $(win).width() - 36) {
				$('.table-wrap:visible').eq(index).find('.scroll-guide').show();
				$('.table-wrap:visible').eq(index).css('overflow','hidden');
			  } else {
				$('.table-wrap:visible').eq(index).find('.scroll-guide').hide();
			  }
			})
		  }else{
			$('.scroll-guide').hide();
		  }
		}
	  },
	  categoryMouseEvent: function(e) {
		var target = $(e.currentTarget);

		if(e.type == 'mouseenter') {
		  if(!target.hasClass(defParams.isActiveClass)) {
			this.btnCategory.parents('.category__item').removeClass('is-hover');
			target.parents('.category__item').addClass('is-hover');
		  }
		} else if(e.type == 'mouseleave') {
		  this.btnCategory.parents('.category__item').removeClass('is-hover');
		}
	  },
	  onResizeEvent: function() {
		clearTimeout(this.setTimeOutOpt);
		this.setTimeOutOpt = setTimeout($.proxy(this.onResizeFunc, this), 100);
		if(window.innerWidth < 1025) {
		  clearTimeout(this.setTimeOutMobile);
		  this.setTimeOutMobile = setTimeout($.proxy(function() {
			if(this.header.hasClass('header--lang-open') && !this.header.hasClass('header--search-open')) {
			  this.header.removeClass('header--lang-open');
			  $('.language').removeClass(defParams.isOpenClass);
			  this.scrollFunc();
			}
		  }, this), 100)
		}
		this.scrollTriggerTab();
	  },
	  onResizeFunc: function() {
		this.scrollTop = this.window.scrollTop();
		this.gnbLink.parents(defParams.gnbItem).find('.gnb__list--depth2').removeAttr('style');
		this.checkScrollGuide();
	  },
	}
  })();

  ANIMATION.common.init();
})(window, window.jQuery);