$.getScript('/js/jquery-ui.min.js', function()
{
	// console.log('uiLoaded');

	$.getScript('/js/slick.min.js', function()
	{
		// console.log('slickLoaded');
		 // this js >>>
		 	var chkDevice = null;
			var default_delay = 100;
			var objBox1 = null, objBox1TimeOut = null, checkAutoPlay1 = true;
			var objBox2 = null, objBox2TimeOut = null, checkAutoPlay2 = true;
			var objBox3 = null, objBox3TimeOut = null, checkAutoPlay3 = true;
			var objBox4 = null, objBox4TimeOut = null, checkAutoPlay4 = true;
			var objBox5 = null, objBox5TimeOut = null, checkAutoPlay5 = true;
			var objBox6 = null, objBox6TimeOut = null, checkAutoPlay6 = true;

			$(document).ready(function(){
				


				var htmlArrowLeft = "";
				htmlArrowLeft += "<nav class=\"nav-growpop\">";
					htmlArrowLeft += "<a class=\"prev slick-prev\" href=\"javascript:void(0)\">";
						htmlArrowLeft += "<span class=\"icon-wrap\"><div height=\"30\" width=\"18\" class=\"icon\"></div></span>";
						htmlArrowLeft += "<div class=\"btn_slide_detail\"><div class=\"bg_shield\"></div><div class=\"prev_detail\"></div></div>";
					htmlArrowLeft += "</a>";
				htmlArrowLeft += "</nav>";

				var htmlArrowRight = "";
				htmlArrowRight += "<nav class=\"nav-growpop\">";
					htmlArrowRight += "<a class=\"next slick-next\" href=\"javascript:void(0)\" >";
						htmlArrowRight += "<span class=\"icon-wrap\"><div height=\"30\" width=\"18\" class=\"icon\"></div></span>";
						htmlArrowRight += "<div class=\"btn_slide_detail\"><div class=\"bg_shield\"></div><div class=\"next_detail\"></div></div>";
					htmlArrowRight += "</a>";
				htmlArrowRight += "</nav>";

				var optionSlide2 = {
					dots:true,
				  	infinite: true,
				  	slidesToShow: 1,
					slidesToScroll: 1,
					fade: true,
					arrows:true,
					prevArrow: htmlArrowLeft,
					nextArrow: htmlArrowRight
				};

			    if ($("#banner-slick4 .banner-list").size() > 0){
			    	var banner4 = $("#banner-slick4");
				 	banner4.on('init', function(event, slick){
				 		playAutoBanner($(this));
				 		// addBoxStyColor($(this));

				 		resizeImagesBanner();

					});
			    	objBox4 = banner4.slick(optionSlide2).on('beforeChange', function(event, slick, currentSlide, nextSlide){

					}).on('afterChange', function(event, slick, currentSlide){
						playAutoBanner($(this));
						// addBoxStyColor($(this));
					})
			    }else{

			    }

			    $('.btnBoxCardL').click(function(){
			    	if( !$(this).hasClass('focus') && !$('.box-card-1').hasClass('doing')){
						$('.btnBoxCard').removeClass('focus');
			    		$(this).addClass('focus');

			    		$('.teen-card').fadeOut(400, function(){
			    			$('.plat-card').fadeIn(400);
			    		});

						$('.box-card-1').addClass('doing');
						$('.box-card-1').animate(
				            {
								left: '0'
								,height: $('.box-card-1 .sub-l').height()
				            }
				            ,{
				                duration: 800
				                ,easing: 'easeOutExpo'
				                ,complete: function() {
						            $('.box-card-1').removeClass('doing');
						            $('.box-card-1').removeClass('active-r');
									$('.box-card-1').addClass('active-l');
						        }
				            }
				        );
					}else{
						// console.log('doingL');
					}
			    });

			    $('.btnBoxCardR').click(function(){
			    	if( !$(this).hasClass('focus') && !$('.box-card-1').hasClass('doing')){
						$('.btnBoxCard').removeClass('focus');
						$(this).addClass('focus');

						$('.plat-card').fadeOut(400, function(){
			    			$('.teen-card').fadeIn(400);
			    		});

						$('.box-card-1').addClass('doing');
						$('.box-card-1').animate(
				            {
				            	left: '-100%'
				            	,height: $('.box-card-1 .sub-r').height()
				        	}
				        	,{
				                duration: 800
				                ,easing: 'easeOutExpo'
				                ,complete: function() {
						            $('.box-card-1').removeClass('doing');
						            $('.box-card-1').removeClass('active-l');
			            			$('.box-card-1').addClass('active-r');
						        }
							}
						);
					}else{
						// console.log('doingR');
					}
			    });

				/*if($(window).width() < 768){
					chkDevice = 'mb';
					StartBannerTo(chkDevice);
				}else{
					chkDevice = 'pc';
					StartBannerTo(chkDevice);
				}*/

				$(window).resize(function(){
					resizeImagesBanner();
					// setTimeout(function(){ HeightBoxCard(); }, 1000);
					HeightBoxCard();

					// var winWidth = $(window).width();
					/*if(winWidth < 768){
						if(chkDevice == 'pc'){
							chkDevice = 'mb';
							StartBannerTo(chkDevice);
						}
					}else{
						if(chkDevice == 'mb'){
							chkDevice = 'pc';
							StartBannerTo(chkDevice);
						}
					}*/
				});


			});

		 	function StartBannerTo(chkIn){
		 		// console.log(chkIn);

		 		var baseImgSlide = BASE_URL + 'images/member/slide_';

		 		var imgPathMbBg = '_bg_mb.jpg';
		 		var imgPathPcBg = '_bg_pc.jpg';

		 		var imgPathMbFg = '_fg_mb.png';
		 		var imgPathPcFg = '_fg_pc.png';

		 		var finalScrBg = '';
		 		var finalScrFg = '';

		 		if(chkIn == 'mb'){
					finalScrBg = imgPathMbBg;
					finalScrFg = imgPathMbFg;
		 		}else{
		 			finalScrBg = imgPathPcBg;
					finalScrFg = imgPathPcFg;
		 		}

				$('.bg-img').each(function(key, val){
					$(this).attr('src', baseImgSlide+(key+1)+finalScrBg);
				});

				$('.fg-img').each(function(key, val){
					$(this).attr('src', baseImgSlide+(key+1)+finalScrFg);
				});
		 	}

		 	/*function ChangeBannerTo(chkIn){
		 		var changeTo = '';
		 		if(chkIn == 'mb'){
			    	console.log('to mb');
			    	chkIn = 'pc';
			    	changeTo = 'mb';
				}else{
					console.log('to mb');
			    	chkIn = 'mb';
			    	changeTo = 'pc';
				}

				$('.img-change').each(function(key, val){
		    		var srcImg = $(this).attr('src');
					$(this).attr('src', srcImg.replace('_'+chkIn, '_'+changeTo));
				});
		 	}*/

			function HeightBoxCard(){
				// console.log('hbc');
				if($('.box-card-1').hasClass('active-r')){
					var objHeight = $('.box-card-1 .sub-r').height();
				}else{
					var objHeight = $('.box-card-1 .sub-l').height();
				}

				$('.box-card-1').css('height', objHeight);
				// console.log('box-card-1:'+objHeight);

				/*$('.box-card-1').animate(
			        {
			        	height: objHeight
			    	}
			    	,{
						duration: 800
					}
				);*/
			}

			function addBoxStyColor(slideElement){
				var curEle = slideElement.find('.banner-list.slick-active');
				var ctsty = (curEle.data('ctsty') != undefined && curEle.data('ctsty') != "")?curEle.data('ctsty'):"white";
				slideElement.removeClass('sty_white');
				slideElement.removeClass('sty_black');
				slideElement.addClass('sty_'+ctsty);

			}

			function parseIntMs(number) {
			    return parseInt(number) * 1E3
			}

			function clearAutoPlayBanner(slideElement){
				var bannerId = slideElement.attr("id")
				if(bannerId == "banner-slick1"){
					clearTimeout(objBox1TimeOut);
				}else if(bannerId == "banner-slick2"){
					clearTimeout(objBox2TimeOut);
				}else if(bannerId == "banner-slick3"){
					clearTimeout(objBox3TimeOut);
				}else if(bannerId == "banner-slick4"){
					clearTimeout(objBox4TimeOut);
				}else if(bannerId == "banner-slick5"){
					clearTimeout(objBox5TimeOut);
				}else if(bannerId == "banner-slick6"){
					clearTimeout(objBox6TimeOut);
				}
			}

			function playAutoBanner(slideElement){
				var bannerId = slideElement.attr("id")
				var eleList = slideElement.find('.banner-list.slick-active');
				var delay = (eleList.data("delay") != undefined)?parseIntMs(eleList.data("delay")):0;
			    if (delay == 0){ delay = parseIntMs(default_delay); }

				clearAutoPlayBanner(slideElement);

				var eleCurType = eleList.find('.list_type').data('type');
				if(eleCurType == "video"){
					if(DetectMobile()){
						slideElement.find('.bgvid').hide();
						slideElement.find('.bg_banner').show();
						slideElement.find('.bx_video').addClass('mobile_fig');
					}else{
						var videoId = eleList.find('.bgvid').attr('id');
						var video = document.getElementById(videoId);
						if(slideElement.find('.banner-list').size() == 1){
							video.loop = true;
						}
						video.play();
						video.onplay = function(e) {
							clearAutoPlayBanner(slideElement);
					    };
						video.onended = function(e) {
							video.currentTime = 1;
							slideBoxNext(slideElement);
					    };
					}
				}else{
					if(bannerId == "banner-slick1"){
						if (checkAutoPlay1){
							objBox1TimeOut = setTimeout(function() { slideBoxNext(slideElement) }, delay);
						}
					}else if(bannerId == "banner-slick2"){
						if (checkAutoPlay2){
							objBox2TimeOut = setTimeout(function() { slideBoxNext(slideElement) }, delay);
						}
					}else if(bannerId == "banner-slick3"){
						if (checkAutoPlay3){
							objBox3TimeOut = setTimeout(function() { slideBoxNext(slideElement) }, delay);
						}
					}else if(bannerId == "banner-slick4"){
						if (checkAutoPlay4){
							objBox4TimeOut = setTimeout(function() { slideBoxNext(slideElement) }, delay);
						}
					}else if(bannerId == "banner-slick5"){
						if (checkAutoPlay5){
							objBox5TimeOut = setTimeout(function() { slideBoxNext(slideElement) }, delay);
						}
					}else if(bannerId == "banner-slick6"){
						if (checkAutoPlay6){
							objBox6TimeOut = setTimeout(function() { slideBoxNext(slideElement) }, delay);
						}
					}
				}
			}

			function videoResize(){
				var videoW = $("#banner-slick1 .bgvid").outerWidth();
				var videoH = $("#banner-slick1 .bgvid").outerHeight();
				var boxW = $("#banner-slick1 .banner-list").width();
				var boxH = $("#banner-slick1 .banner-list").height();
				$("#banner-slick1 .bgvid").css("left",((videoW - boxW)/2)*-1);
				$("#banner-slick1 .bgvid").css("top",((videoH - boxH)/2)*-1);
			}

			function slideBoxNext(slideElement){
				var bannerId = slideElement.attr("id")

				if(slideElement.find('.banner-list').size() > 1){
					if(bannerId == "banner-slick1"){
						 objBox1.slick('slickNext');
					}else if(bannerId == "banner-slick2"){
						 objBox2.slick('slickNext');
					}else if(bannerId == "banner-slick3"){
						 objBox3.slick('slickNext');
					}else if(bannerId == "banner-slick4"){
						 objBox4.slick('slickNext');
					}else if(bannerId == "banner-slick5"){
						 objBox5.slick('slickNext');
					}else if(bannerId == "banner-slick6"){
						 objBox6.slick('slickNext');
					}
				}
			}

			function resizeImagesBanner() {

				$.each($('.sty_banner'),function(i,e){
					var me = $(e);
					var elm = $(e).children();
				    var wh = me.height();
				    var ww = me.width();
				    if($(e).children().size() > 0){
					    var ratio = (islandscape(me)) ? (1280/400):(320/393);
					    var imgw = wh * ratio;
					    var fh;
					    var fw;

					    if (imgw <= ww) {
					        fh = ww / ratio;
					        fw = ww;
					    } else {
					        fh = wh;
					        fw = imgw;
					    }

					    if(ww <= 767){
					    	wh = wh;
					    	fh = fh;
					    }


						// if(islandscape(me) && ww < 767){
						// 	me.find(".images-list-lanscape").hide();
						// 	me.find(".images-list-portrait").show();
						// } else
					    /*
						    if(islandscape(me)){
						    	// me.find(".images-list-lanscape").show();
						    	// me.find(".images-list-portrait").hide();

						    	// me.find(".images-list-1").addClass('images-list-pic_1');
						    	// me.find(".images-list-1").removeClass('images-list-mb-pic_1');

						    	// me.find(".images-list-2").addClass('images-list-pic_2');
						    	// me.find(".images-list-2").removeClass('images-list-mb-pic_2');

						    	// me.find(".images-list-3").addClass('images-list-pic_3');
						    	// me.find(".images-list-3").removeClass('images-list-mb-pic_3');

						    	// me.find(".imgSile").removeClass('mb');
						    	// me.find(".banner-list").removeClass('mb');

						    	me.find(".images-title-lanscape").show();
						    	me.find(".images-title-portrait").hide();
						    	if(DetectMobile()){
						    		// me.find(".images-list-lanscape").addClass("show-slide-image").removeClass("hide-slide-image");
						    		// me.find(".images-list-portrait").addClass("hide-slide-image").removeClass("show-slide-image");
						    	}
						    } else{
						    	// me.find(".images-list-lanscape").hide();
						    	// me.find(".images-list-lanscape.sty-crop").show();
						    	// me.find(".images-list-portrait").show();

						    	// me.find(".images-list").removeClass('images-list-pic_1');
						    	// me.find(".images-list").addClass('images-list-mb-pic_1');

						    	// me.find(".images-list-2").removeClass('images-list-pic_2');
						    	// me.find(".images-list-2").addClass('images-list-mb-pic_2');

						    	// me.find(".images-list-3").removeClass('images-list-pic_3');
						    	// me.find(".images-list-3").addClass('images-list-mb-pic_3');

						    	// me.find(".imgSile").addClass('mb');
						    	// me.find(".banner-list").addClass('mb');

						    	me.find(".images-title-lanscape").hide();
						    	me.find(".images-title-portrait").show();
						    	if(DetectMobile()){
									// me.find(".images-list-lanscape").addClass("hide-slide-image").removeClass("show-slide-image");
									// me.find(".images-list-portrait").addClass("show-slide-image").removeClass("hide-slide-image");
						    	}
						    }
					    */
					   	// me.find(".images-list-lanscape").css({"height":fh,"width":fw});
					    // me.find(".images-list-portrait").css({"height":fh,"width":fw});

					    me.find(".images-list").css({"height":fh,"width":fw});

					    elm.css({"height":wh});
						me.css({"height":wh});

					    if (fw >= ww) {
					        me.find('.images-list').css('margin-left', - ((fw - ww)/2) );
					        me.find('.mobile-detect').css('margin-left', - ((fw - ww)/2) );

					     	me.find('.images-list').css('margin-top', - ((fh - wh)/2) );
					        me.find('.mobile-detect').css('margin-top', - ((fh - wh)/2) );
					    }
				    }
				})

			}

			function islandscape(elm){
				// console.log(elm.width(), elm.height());
				
				// return (elm.height() > elm.width()) ? false:true;
				// console.log(elm.width(), elm.height(), $(window).width() ,$(window).innerWidth(), window.innerWidth);

				if(elm.width() < elm.height()){
					// console.log('r1');
					return false;
				}else{
					if(window.innerWidth < 768){
						// console.log('r2');
						return false;
					}
					// console.log('r3');
					return true;
				}
			}
		/* this js <<< */

	});
});