$.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 += "";
var htmlArrowRight = "";
htmlArrowRight += "";
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 <<< */
});
});