$(document).ready(function(){
	
    // 디바이스 체크
	/* s:사용자재구축 (passrim) 추가  */
	// pc & mobile에 따라 swiper 방식이 차이가 남에 따라 분기 호출함
		if (oldWChk == 'pc') {
			pc_Swiper();
		} else {
			mob_Swiper();
		};

	/* s:사용자재구축 추가 끝  */
	
	/*
    let thumb_swiper = new Swiper(".thumb_slider", {
		breakpoints: {        
          768: {
            spaceBetween: 16,  //브라우저가 768보다 클 때
            slidesPerView: 4,
	        freeMode: true,
		    watchSlidesProgress: true,	
			navigation: {
				nextEl: ".thumb_slider-next",
				prevEl: ".thumb_slider-prev",
	        },
          },        
          280: { //브라우저가 768보다 클 때
			loop: true,
			loopFillGroupWithBlank: true,
			pagination: {
				el: ".swiper-pagination",
				clickable: true
			},
          }
        },
        on: {
            slideChangeTransitionEnd : function() {
                videoControl();
            },

        }
    });
	
	
    let pd_swiper = new Swiper(".pd_slider", {  
		pagination: {
			el: ".swiper-pagination",
			clickable: true
		},
		breakpoints: {        
          768: {
			thumbs: {
				swiper: thumb_swiper,
			},
          },        
          280: { //브라우저가 768보다 클 때
			loop: true,
			loopFillGroupWithBlank: true,,
			pagination: {
				el: ".swiper-pagination",
				clickable: true
			},
          }
        }, 
        on: {

            slideChangeTransitionEnd : function() {
                videoControl();
            },

        }
    });
	*/
    $(".rel_list .tab_list li a").click(function(e){
        e.preventDefault();

        var tabId = $(this).attr("data-tab");
        var parent = $(this).parents("li");

        $(".rel_list .tab_list li").removeClass("active");
        $(".rel_list .tab_cont .cont_item").removeClass("active");

        parent.addClass("active");
        $("#"+tabId).addClass("active");

        // listImgResize();
    });
/*
    let rel_swiper1 = new Swiper(".rel_slider1", {
		breakpoints: {        
          768: {           
			slidesPerView: 5,
			slidesPerGroup: 5,
			// loopFillGroupWithBlank: true,
			navigation: {
				nextEl: ".rel_slider1-next",
				prevEl: ".rel_slider1-prev",
			},
			loop: true,
	        loopFillGroupWithBlank: true,
          },       
          280: {           
			slidesPerView: "auto",
			freeMode: true,
          },	
        },
        observer: true,
        observeParents: true			
    });

    let rel_swiper2 = new Swiper(".rel_slider2", {
        slidesPerView: "auto",
        freeMode: true,
		breakpoints: {        
          768: {           
			slidesPerView: 5,
			slidesPerGroup: 5,
			// loopFillGroupWithBlank: true,
			navigation: {
				nextEl: ".rel_slider2-next",
				prevEl: ".rel_slider2-prev",
			},
			loop: true,
	        loopFillGroupWithBlank: true,
          },
          280: {           
			slidesPerView: "auto",
			freeMode: true,
          },
        },
        observer: true,
        observeParents: true
    });
    let rel_swiper3 = new Swiper(".rel_slider3", {
        slidesPerView: "auto",
        freeMode: true,
		breakpoints: {        
          768: {           
			slidesPerView: 5,
			slidesPerGroup: 5,
			// loopFillGroupWithBlank: true,
			navigation: {
				nextEl: ".rel_slider3-next",
				prevEl: ".rel_slider3-prev",
			},
			loop: true,
	        loopFillGroupWithBlank: true,
          }
        },
        observer: true,
        observeParents: true
    });
    let rel_swiper4 = new Swiper(".rel_slider4", {
        slidesPerView: "auto",
        freeMode: true,
		breakpoints: {        
          768: {           
			slidesPerView: 5,
			slidesPerGroup: 5,
			// loopFillGroupWithBlank: true,
			navigation: {
				nextEl: ".rel_slider4-next",
				prevEl: ".rel_slider4-prev",
			},
			loop: true,
	        loopFillGroupWithBlank: true,
          }
        },
        observer: true,
        observeParents: true
    });
    let rel_swiper5 = new Swiper(".rel_slider5", {
        slidesPerView: "auto",
        freeMode: true,
		breakpoints: {        
          768: {           
			slidesPerView: 5,
			slidesPerGroup: 5,
			// loopFillGroupWithBlank: true,
			navigation: {
				nextEl: ".rel_slider5-next",
				prevEl: ".rel_slider5-prev",
			},
			loop: true,
	        loopFillGroupWithBlank: true,
          }
        },
        observer: true,
        observeParents: true
    });
    let rel_slider6 = new Swiper(".rel_slider6", {
        slidesPerView: "auto",
        freeMode: true,
		breakpoints: {        
          768: {           
			slidesPerView: 5,
			slidesPerGroup: 5,
			// loopFillGroupWithBlank: true,
			navigation: {
				nextEl: ".rel_slider3-next",
				prevEl: ".rel_slider3-prev",
			},
			loop: true,
	        loopFillGroupWithBlank: true,
          }
        },
        observer: true,
        observeParents: true
    });
			
    //  rel_slider7은 blade 에 있습니다.
    // let rel_slider7 = new Swiper(".rel_slider7", {
    //     slidesPerView: 1,
    //     slidesPerGroup: 1,
    //     loop: true,
    //     // loopFillGroupWithBlank: true,
    //     navigation: {
    //         nextEl: ".rel_slider7-next",
    //         prevEl: ".rel_slider7-prev",
    //     },
    //     pagination: {
    //         el: ".swiper-pagination",
    //         clickable: true
    //     },
    // });

*/
    let animation1 = bodymovin.loadAnimation({
        container: $('#sample_btn_ico')[0],
        path: '/v2/img/lottie/button_loader.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
    });

    let animation2 = bodymovin.loadAnimation({
        container: $('#pdp_inquiry_ico')[0],
        path: '/v2/img/lottie/button_loader_white.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
    });

    $(".no_sample_btn").on("click", function (e) {
        e.preventDefault();
        e.stopPropagation();

        let el = $(this).find(".snackbar");
        if(el.css("display") == "block") {
            el.css("display", "none");
        } else {
            el.css("display", "block");
            if (!$(this).hasClass('restock_alarm')) {
                setTimeout(function() {
                    el.css("display", "none");
                }, 6000);
            }
        }
    });

	// 사용자재구축(241211) : 연관검색어 슬라이드 추가
	let swiperOptions = {};
	swiperOptions = {
		slidesPerView: 2.5,
		slidesPerGroup: 2.5,
		navigation: {
			nextEl: ".rel_slider8-next",
			prevEl: ".rel_slider8-prev",
		},
		observer: true,
		observeParents: true,
		freeMode: true,
		breakpoints: {
			768: {//768보다 클 때
				slidesPerView: 5,  
				slidesPerGroup: 5,
				//slidesOffsetBefore: 16,
			}
		},
	};

	let rel_slider8 = new Swiper(".rel_slider8", swiperOptions);


    // 샘플 배송 안내 이미지
    let sampleGuideTl = gsap.timeline({repeat:-1});
    let sampleGuide_targets = document.querySelectorAll(".service_info_sample .info_img img");

    let sampleGuide_numberOfTargets = sampleGuide_targets.length

    let sampleGuide_duration = 0.75 //change this
    let sampleGuide_pause = 1 // change this

    let sampleGuide_stagger = sampleGuide_duration + sampleGuide_pause
    let sampleGuide_repeatDelay = (sampleGuide_stagger * (sampleGuide_numberOfTargets - 1)) + sampleGuide_pause

    sampleGuideTl
        .from(sampleGuide_targets, {x:-40, duration:sampleGuide_duration, opacity:0, stagger:{
                each:sampleGuide_stagger,
                repeat:-1,
                repeatDelay:sampleGuide_repeatDelay
            }})
        .to(sampleGuide_targets, {x:0, duration:sampleGuide_duration, opacity:0, stagger:{
                each:sampleGuide_stagger,
                repeat:-1,
                repeatDelay:sampleGuide_repeatDelay
            }}, sampleGuide_stagger);

    let stock_alarm_icon1 = bodymovin.loadAnimation({
        container: $('#stock_alarm_icon1')[0],
        path: '/v2/img/lottie/alert_tooltip.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
    });
    let stock_alarm_icon2 = bodymovin.loadAnimation({
        container: $('#stock_alarm_icon2')[0],
        path: '/v2/img/lottie/alert_tooltip.json',
        renderer: 'svg',
        loop: true,
        autoplay: true
    });


});

/* pc swiper */
function pc_Swiper() {
	let thumb_swiper = new Swiper(".thumb_slider", {
		spaceBetween: 16,
		slidesPerView: 4,
		freeMode: true,
		watchSlidesProgress: true,
		navigation: {
			nextEl: ".thumb_slider-next",
			prevEl: ".thumb_slider-prev",
		},
		on: {

			slideChangeTransitionEnd : function() {
				videoControl();
			},

		}
	});
	let pd_swiper = new Swiper(".pd_slider", {
		thumbs: {
			swiper: thumb_swiper,
		},
		on: {

			slideChangeTransitionEnd : function() {
				videoControl();
			},

		}
	});
	let rel_swiper1 = new Swiper(".rel_slider1", {
		slidesPerView: 5,
		slidesPerGroup: 5,
		// loopFillGroupWithBlank: true,
		navigation: {
			nextEl: ".rel_slider1-next",
			prevEl: ".rel_slider1-prev",
		},
		observer: true,
		observeParents: true
	});

	let rel_swiper2 = new Swiper(".rel_slider2", {
		slidesPerView: 5,
		slidesPerGroup: 5,
		// loopFillGroupWithBlank: true,
		navigation: {
			nextEl: ".rel_slider2-next",
			prevEl: ".rel_slider2-prev",
		},
		observer: true,
		observeParents: true
	});
	let rel_swiper3 = new Swiper(".rel_slider3", {
		slidesPerView: 5,
		slidesPerGroup: 5,
		// loopFillGroupWithBlank: true,
		navigation: {
			nextEl: ".rel_slider3-next",
			prevEl: ".rel_slider3-prev",
		},
		observer: true,
		observeParents: true
	});
	let rel_swiper4 = new Swiper(".rel_slider4", {
		slidesPerView: 5,
		slidesPerGroup: 5,
		// loopFillGroupWithBlank: true,
		navigation: {
			nextEl: ".rel_slider4-next",
			prevEl: ".rel_slider4-prev",
		},
		observer: true,
		observeParents: true
	});
	let rel_swiper5 = new Swiper(".rel_slider5", {
		slidesPerView: 5,
		slidesPerGroup: 5,
		// loopFillGroupWithBlank: true,
		navigation: {
			nextEl: ".rel_slider5-next",
			prevEl: ".rel_slider5-prev",
		},
		observer: true,
		observeParents: true
	});
	let rel_slider6 = new Swiper(".rel_slider6", {
		slidesPerView: 4,
		slidesPerGroup: 4,
		// loopFillGroupWithBlank: true,
		navigation: {
			nextEl: ".rel_slider3-next",
			prevEl: ".rel_slider3-prev",
		},
		observer: true,
		observeParents: true
	});
	//  rel_slider7은 blade 에 있습니다.
	// let rel_slider7 = new Swiper(".rel_slider7", {
	//     slidesPerView: 1,
	//     slidesPerGroup: 1,
	//     loop: true,
	//     // loopFillGroupWithBlank: true,
	//     navigation: {
	//         nextEl: ".rel_slider7-next",
	//         prevEl: ".rel_slider7-prev",
	//     },
	//     pagination: {
	//         el: ".swiper-pagination",
	//         clickable: true
	//     },
	// });
	
	if($('.rel_slider4').length) {
		$('.rel_slider4').addClass("swiper")
	}
	if($('.ac_active').length) {
		$('.ac_active').removeClass("active").removeClass("ac_active");
	}		
}
/* //pc swiper */

/* mobile swiper */
function mob_Swiper() {

	let pd_swiper = new Swiper(".pd_slider", {
		loop: true,
		loopFillGroupWithBlank: true,
		pagination: {
			el: ".swiper-pagination",
			clickable: true
		},
		on: {

			slideChangeTransitionEnd : function() {
				videoControl();
			},

		}
	});

	var rel_swiper1 = new Swiper(".rel_slider1", {
		slidesPerView: "2.5",
		freeMode: true,
	});

	var rel_swiper2 = new Swiper(".rel_slider2", {
		slidesPerView: "2.5",
		freeMode: true,
	});

	var rel_swiper3 = new Swiper(".rel_slider3", {
		slidesPerView: "2.5",
		freeMode: true,
	});

    // 사용자재구축(241219) : 슬라이드 추가
    var rel_swiper5 = new Swiper(".rel_slider5", {
        slidesPerView: "2.5",
        freeMode: true,
    });

		
	btnPosition();
	
	
	if($('#tab3.cont_item').length) {
		//console.log('ok');
		var li_count = $('#tab3').find('.pd_list_comm').children('li').length;
		if(li_count > 0) {
			$('#tab3').addClass("ac_active").addClass("active");
		}
	}
	// 사용자재구축(241210) : Uncaught TypeError, 사용안함
	// if($('.rel_slider4').length) {
	// 	$('.rel_slider4').Swiper.destroy();
	// 	Swiper = undefined;
	// 	$('.swiper-wrapper').removeAttr('style');
	// 	$('.swiper-slide').removeAttr('style');
	// }
}
/* //mobile swiper */



function videoControl () {
    $(".pd_slider_w .slider_item").each(function() {
        let video = $(this).find("video").get(0);
        if (video) {
            video.pause();
        }
    });

    $(".thumb_slider_w .slider_item").each(function() {
        if ($(this).hasClass("swiper-slide-thumb-active")) {
            let i = $(this).index();
            let video = $(".pd_slider_w .slider_item").eq(i).find(".pd_video").get(0);
            if (video) {
                video.play();
            }
        }
    });
}

function expandFn(obj) {
    console.log(obj);
    if($(obj).next(".expand_cont").css("display") == "block") {
        $(obj).parents(".expand_item").removeClass("open");
        $(obj).next(".expand_cont").slideUp();
    } else {
        $(obj).parents(".expand_item").addClass("open");
        $(obj).next(".expand_cont").slideDown();

        window.dataLayer.push({
            event: 'detail_open_click',
            click_target: obj.innerText.trim()
        });
    }
}

/* s:사용자재구축 추가  */



/* s:사용자재구축 추가 끝  */

$(window).scroll(function(){
	btnPosition();
});

function btnPosition() {
	// var objectTop = $(".rel_list").offset().top;
	// var objectBottom = objectTop + $(".rel_list").outerHeight();
	// var windowTop = $(window).scrollTop();
	// var windowBottom = windowTop + $(window).height();
	// if( windowBottom > objectTop ){
	// 	$(".pd_txt_bot").addClass("no_fix");
	// }else {
	// 	$(".pd_txt_bot").removeClass("no_fix");
	// }
	// if( windowTop > objectBottom || windowBottom < objectTop ){
	// 	$(".pd_txt_bot").removeClass("no_fix");
	// };

	// 사용자재구축(241219) : 위치계산 수정
	let objectTop = $(".rel_list.recommend").offset().top;
	let windowTop = $(window).scrollTop();
	let windowBottom = windowTop + $(window).height();

	if( windowBottom > objectTop ) $(".pd_txt_bot").addClass("no_fix");
	else $(".pd_txt_bot").removeClass("no_fix");
}	

//  커스텀 툴링
$(document).ready(function() {
    $('.tooling_inquiry').on('click', function() {
        $('.tooling_visible').show();
        $('.tooling_hidden').hide();
    });
    $('.tooling_cancel').on('click', function() {
        $('.tooling_visible').hide();
        $('.tooling_hidden').show();
    });

    $('.option_title.unchecked').next().hide();
    $('.option_required').hide();
    $('.reshape .option_desc .chk_desc, .resize .option_desc .chk_desc').hide(); /* s:사용자재구축  **/

    $('.option_title').on('click', function() {
        if ($(this).hasClass('unchecked')) {
            $(this).removeClass('unchecked');
            $(this).addClass('checked');
            $(this).next().slideDown();
        } else {
            $(this).removeClass('checked');
            $(this).addClass('unchecked');
            $(this).next().slideUp();
        }
    })

    //  커스텀 툴링 - 체크박스 또는 INPUT 입력
    $('.reshape input[type=checkbox], .resize input[type=checkbox]').on('click', function() {
        if ($(this).is(':checked')) {
            $(this).parent().parent().next().children().addClass('tooling_outline');
            $(this).parent().parent().next().children().focus();
        } else {
            $(this).parent().parent().next().children().removeClass('tooling_outline');
        }
    });
	
    /* s:사용자재구축 추가  */
    $('.reshape input[type=text], .resize input[type=number]').on('keyup', function() {
        if (($(this).val() !== '') && !($(this).parent().prev().children().children().is(':checked'))) {
            $(this).addClass('tooling_outline');
            $(this).parent().prev().children().children().prop('checked', true);
            $(this).parents('.option_desc').children('.option_required').hide();
        }else {
            $(this).removeClass('tooling_outline');
        }
    }) 
	//  Reshape, Resize 하위 체크박스 클릭 시 INPUT 태그 표시
    $('.reshape .option_desc .chk_w input[type=checkbox], .resize .option_desc .chk_w input[type=checkbox]').on('click', function() {
        if ($(this).is(':checked')) {
            $(this).closest('.chk_w').next().slideDown();
        } else {
            $(this).closest('.chk_w').next().slideUp();
        }
    })
    /* s:사용자재구축 추가 끝  */
		
    $('.material input[type=text]').on('keyup', function() {
        if (($(this).val() !== '')) {
            $(this).addClass('tooling_outline');
        } else {
            $(this).removeClass('tooling_outline');
        }
        if (($('input[name=material_which]').val() !== '') && ($('input[name=material_what]').val() !== '')) {
            $(this).parents('.option_desc').children('.option_required').hide();
        }
    })
    $('.sustainability input[type=checkbox]').on('click', function() {
        if ($('input[name=sustainability]:checked').length !== 0) {
            $(this).parents('.option_desc').children('.option_required').hide();
        }
    })
    $('.logo input[type=radio]').on('click', function() {
        if (($('input[name=effect]:checked').length !== 0) && ($('input[name=area]:checked').length !== 0)) {
            $(this).parents('.option_desc').children('.option_required').hide();
        }
    })
    $('.metallization input[type=checkbox]').on('click', function() {
        if ($('input[name=metallization]:checked').length !== 0) {
            $(this).parents('.option_desc').children('.option_required').hide();
        }
    })
		
})

/* s:사용자재구축 추가  */
// pc & mobile에 따라 swiper 방식이 차이가 남에 따라 resize 처리 함
 $(window).on('resize', function(){
	if (window.innerWidth > 768) {
		pc_Swiper();
	} else {
		mob_Swiper();
	};
	return false;
	
});
/* s:사용자재구축 추가 끝  */