/*function ResponsiveImages() {
    var a = window.innerWidth;
    if (a > 1240) {
        $("body").removeClass("mobile");
        $("body").removeClass("tablet");
        $("body").addClass("pc");
        $("meta[name='viewport']").remove();
        $("head").append('<meta name="viewport" content="width=1240, user-scalable=yes">')
    } else if (a > 767) {
        $("body").removeClass("mobile");
        $("body").removeClass("pc");
        $("body").addClass("tablet");
        $("meta[name='viewport']").remove();
        $("head").append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">');
    } else {
        $("body").addClass("mobile");
        $("body").removeClass("pc");
        $("body").removeClass("tablet");
        $("head").append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">');
    }
}
$(function() {
    $("body").addClass("pc");
    ResponsiveImages();
    $(window).resize(function() {
        ResponsiveImages();
    });
});*/
//var $slide = $('.sliderWrap').ixSlideMax();
//$( window ).on( 'resize', function(e) {
//    $slide.ixSlideMax( 'resize' );
//      
//});

var $slide;
function rederSpecInfo() {
    $slide = $('.sliderWrap').ixSlideMax();
    //ResponsiveImages();
    $(window).on('resize', function (e) {
        $slide.ixSlideMax('resize');
    });

    // $("div.sectionWrap > div.sectionInner > div.pspeWrap > div.togListWrap > ul.togList").children().not(":first");
    var all = $("div.sectionWrap > div.sectionInner > div.pspeWrap > div.togListWrap > ul.togList").children();
    all.removeClass("on");
    all.find(".aswer").slideUp(300);
    var first = $("div.sectionWrap > div.sectionInner > div.pspeWrap > div.togListWrap > ul.togList").children(":first");
    first.addClass("on");
    first.find(".aswer").slideDown(300);
}

$(document).on("click", ".togListWrap .tit", function (t) {

    t.preventDefault();
    var s = $(this).closest(".togList");
    var w = $(this).closest(".dep1");

    // Navigation Tab 있을경우.
    var u = $(".navigationTabWrap");

    var v = $(this);
    if (!s.hasClass("small")) {
        if (!w.hasClass("on")) {
            s.find(".dep1").removeClass("on");
            s.find(".aswer").slideUp(300);
            w.addClass("on");
            w.find(".aswer").slideDown(300, function () {
                var x = v.closest(".togList").offset().top - 150;
                $("body,html").delay(200).animate({
                    scrollTop: x
                }, 300)
            })
        } else {
            s.find(".dep1").removeClass("on");
            s.find(".aswer").slideUp(300);

            s.find(".togList").removeClass("on");
            s.find(".aswer").slideUp(300);
            s.find(".btnWrap").removeClass("on");
            s.find(".btnWrap").find(".btn").removeClass("gray").text("Expand all")
        }
    } else {
        if (!w.hasClass("on")) {
            w.addClass("on");
            w.find(".aswer").slideDown(300);
        } else {
            w.removeClass("on");
            w.find(".aswer").slideUp(300);
        }
    }
    $slide.ixSlideMax('resize');
});



var codetype;

$(document).ready(function () {
    codetype = $('.specification-pip').attr('data-attr-carProduct')
    // Trim... Selectbox...
    initPowertrainTrimList();

    // select box event...
    $("#Condition").change(getContents);
});

function initPowertrainTrimList() {



    $.ajax({
        type: "GET",
        url: "/wsvc/in/pip/common/powertraintrim/list.html",
        data: {
            codeType: codetype
        },
        cache: false,
        success: function (jdata) {
console.log(jdata);

const result = [];
const map = new Map();
$.each(jdata,function(idx,item){
//for (const item of jdata) {
    if(!map.has(item.text)){
        map.set(item.text, true);    // set any value to Map
        result.push(item);
    }
});

jdata = result;

            $("#Condition").find("option").remove();
            if (jdata.length < 1) {
                $("#Condition").append('<option value="" aria-selected="true">No Variant Available</option>');
            } else {
                $.each(jdata, function (key, val) {
                    $("#Condition").append('<option value="' + val.value + '" aria-selected="true">' + val.text + '</option>');
                });
                getContents();
            }
        },
        error: function (data) {
            console.log("Error in powerTrain");
        }
    });
}

function getContents() {

    // Overview
    getSpecOverview();
}

function getSpecOverview() {

    var v = $("#Condition option:selected").val();
    $.ajax({
        type: "GET",
        url: "/wsvc/in/pip/specification/overview/view.html",
        data: {
            seq: v
        },
        cache: false,
        success: function (jdata) {
            $("#categoryName").text(jdata.categoryName == undefined ? '' : jdata.categoryName);
            $("#productName").text(jdata.productName == undefined ? '' : jdata.productName);
            $("#modelName").text(jdata.modelName == undefined ? '' : jdata.modelName);
            $("#seatCount").text(jdata.seatCount == undefined ? '' : jdata.seatCount);

            // 
            getSpecInfo(jdata);
        },
        error: function (data) {
            console.log("msg_error_spec_overview");
        }
    });
}

function getSpecInfo(imgInfo) {
    var v = $("#Condition option:selected").val();
    $.ajax({
        type: "GET",
        url: "/wsvc/in/pip/specification/accordian/view.html",
        data: {
            seq: v
        },
        cache: false,
        success: function (jdata) {
            $.each([1, 2, 3], function (k, v) {

                var accordionEl = $("#accordion" + v);

                accordionEl.empty();

                var attrTrg = accordionEl.attr("target");

                $.each(jdata, function (key, value) {

                    if (attrTrg == value.specTypeCode) {
                        var divDep2El = $('<div class="dep2"></div>');
                        accordionEl.append(divDep2El);

                        $.each(value.specificationVOList, function (key2, value2) {

                            var dlspecListEl = $('<dl class="specList"></dl>');
                            divDep2El.append(dlspecListEl);

                            var specSubTypeNameI18n = value2.specSubTypeName;
                            var dtEl = $('<dt></dt>').text(specSubTypeNameI18n);
                            dlspecListEl.append(dtEl);

                            var ddEl = $('<dd></dd>');
                            dlspecListEl.append(ddEl);

                            function xssFilter(str) {
                                if (str != null) {
                                    str = str.replace(/&lt;/g, '<');
                                    str = str.replace(/&gt;/g, '>');
                                    str = str.replace(/&amp;lt;/g, '<');
                                    str = str.replace(/&amp;gt;/g, '>');
                                    str = str.replace(/&#39;/g, "'");
                                    str = str.replace(/&amp;/g, "&");
                                    str = str.replace(/%3A/g, ":");
                                    str = str.replace(/%22/g, "");
                                    str = str.replace(/&quot;/g, '"');
                                }
                                return str;
                            }

                            $.each(value2.specificationVOList, function (key3, value3) {

                                var dlLast = $('<dl></dl>');
                                ddEl.append(dlLast);

                                var dtLast = $('<dt></dt>').text(xssFilter(value3.specName));
                                dlLast.append(dtLast);
                                var ddLast = $('<dd></dd>').text(xssFilter(value3.specValue));
                                dlLast.append(ddLast);
                            });

                            // Image
                            if (value.specTypeCode == 'SUB0082' && key2 == 0) {

                                if (imgInfo.dmImgW != undefined) {

                                    if (imgInfo.dmImgT == undefined) imgInfo.dmImgT = imgInfo.dmImgW;

                                    var elA = $('<div class="fullImg pspeImg hiddenSm"></div>');
                                    var elAA = $('<div class="img"></div>');
                                    var elAAA = $('<picture></picture>');

                                    divDep2El.append(elA);
                                    elA.append(elAA);
                                    elAA.append(elAAA);

                                    elAAA.append($('<!-- [if IE 9]><video style="display: none;"><![endif] -->'));
                                    elAAA.append($('<source media="(min-width: 1024px)" srcset="' + imgInfo.dmImgW + '" alt="' + imgInfo.dmImgAlt + '" />'));
                                    if (imgInfo.dmImgT != null && imgInfo.dmImgT != '') {
                                        elAAA.append($('<source media="(min-width: 768px)" srcset="' + imgInfo.dmImgT + '" alt="' + imgInfo.dmImgAlt + '" />'));
                                    }
                                    elAAA.append($('<!-- [if IE 9]></video><![endif] -->'));
                                    elAAA.append($('<img src="' + imgInfo.dmImgW + '" alt="' + imgInfo.dmImgAlt + '" />'));
                                }

                                if (imgInfo.dmImgM1 != undefined && imgInfo.dmImgM2 != undefined && imgInfo.dmImgM3 != undefined) {

                                    var elmB = $('<div class="sliderWrap pspeSlider"></div>');
                                    var elmBB1 = $('<div class="ix-list-viewport sliderListWrap" data-label="car image"></div>');
                                    var elmBB1B = $('<ul class="ix-list-items sliderList"></ul>');

                                    divDep2El.append(elmB);
                                    elmB.append(elmBB1);
                                    elmBB1.append(elmBB1B);


                                    var elmBB1BB1 = $('<li class="ix-list-item sliders" style="height: 100%;" data-label="elantra-design-right-side-front-view-blue-original"></li>');
                                    var elmBB1BB1B = $('<div class="fullImg"></div>');
                                    var elmBB1BB1BB = $('<div class="img"></div>');
                                    var elmBB1BB1BBB = $('<picture></picture>');

                                    elmBB1B.append(elmBB1BB1);
                                    elmBB1BB1.append(elmBB1BB1B);
                                    elmBB1BB1B.append(elmBB1BB1BB);
                                    elmBB1BB1BB.append(elmBB1BB1BBB);

                                    elmBB1BB1BBB.append($('<!-- [if IE 9]><video style="display: none;"><![endif] -->'));
                                    elmBB1BB1BBB.append($('<source media="(min-width: 1024px)" srcset="' + imgInfo.dmImgM1 + '" alt="' + imgInfo.dmImgAlt + '" />'));
                                    elmBB1BB1BBB.append($('<source media="(min-width: 768px)" srcset="' + imgInfo.dmImgM1 + '" alt="' + imgInfo.dmImgAlt + '" />'));
                                    elmBB1BB1BBB.append($('<source media="(min-width: 320px)" srcset="' + imgInfo.dmImgM1 + '" alt="' + imgInfo.dmImgAlt + '" />'));
                                    elmBB1BB1BBB.append($('<!-- [if IE 9]></video><![endif] -->'));
                                    elmBB1BB1BBB.append($('<img src="' + imgInfo.dmImgM1 + '" alt="' + imgInfo.dmImgAlt + '" />'));


                                    var elmBB1BB2 = $('<li class="ix-list-item sliders" style="height: 100%;" data-label="elantra-design-projection-headlamps-led-positioning-lamps-original"></li>');
                                    var elmBB1BB2B = $('<div class="fullImg"></div>');
                                    var elmBB1BB2BB = $('<div class="img"></div>');
                                    var elmBB1BB2BBB = $('<picture></picture>');

                                    elmBB1B.append(elmBB1BB2);
                                    elmBB1BB2.append(elmBB1BB2B);
                                    elmBB1BB2B.append(elmBB1BB2BB);
                                    elmBB1BB2BB.append(elmBB1BB2BBB);

                                    elmBB1BB2BBB.append($('<!-- [if IE 9]><video style="display: none;"><![endif] -->'));
                                    elmBB1BB2BBB.append($('<source media="(min-width: 1024px)" srcset="' + imgInfo.dmImgM2 + '" alt="' + imgInfo.dmImgAlt + '" />'));
                                    elmBB1BB2BBB.append($('<source media="(min-width: 768px)" srcset="' + imgInfo.dmImgM2 + '" alt="' + imgInfo.dmImgAlt + '" />'));
                                    elmBB1BB2BBB.append($('<source media="(min-width: 320px)" srcset="' + imgInfo.dmImgM2 + '" alt="' + imgInfo.dmImgAlt + '" />'));
                                    elmBB1BB2BBB.append($('<!-- [if IE 9]></video><![endif] -->'));
                                    elmBB1BB2BBB.append($('<img src="' + imgInfo.dmImgM2 + '" alt="' + imgInfo.dmImgAlt + '" />'));


                                    var elmBB1BB3 = $('<li class="ix-list-item sliders" data-label="elantra-design-radiator-grille-original"></li>');
                                    var elmBB1BB3B = $('<div class="fullImg"></div>');
                                    var elmBB1BB3BB = $('<div class="img"></div>');
                                    var elmBB1BB3BBB = $('<picture></picture>');

                                    elmBB1B.append(elmBB1BB3);
                                    elmBB1BB3.append(elmBB1BB3B);
                                    elmBB1BB3B.append(elmBB1BB3BB);
                                    elmBB1BB3BB.append(elmBB1BB3BBB);

                                    elmBB1BB3BBB.append($('<!-- [if IE 9]><video style="display: none;"><![endif] -->'));
                                    elmBB1BB3BBB.append($('<source media="(min-width: 1024px)" srcset="' + imgInfo.dmImgM3 + '" alt="' + imgInfo.dmImgAlt + '" />'));
                                    elmBB1BB3BBB.append($('<source media="(min-width: 768px)" srcset="' + imgInfo.dmImgM3 + '" alt="' + imgInfo.dmImgAlt + '" />'));
                                    elmBB1BB3BBB.append($('<source media="(min-width: 320px)" srcset="' + imgInfo.dmImgM3 + '" alt="' + imgInfo.dmImgAlt + '" />'));
                                    elmBB1BB3BBB.append($('<!-- [if IE 9]></video><![endif] -->'));
                                    elmBB1BB3BBB.append($('<img src="' + imgInfo.dmImgM3 + '" alt="' + imgInfo.dmImgAlt + '" />'));


                                    var elmBB2 = $('<div class="ix-controller"></div>');
                                    var elmBB2B = $('<ul class="ix-thumbs sliderPagination" role="tablist"></ul>');
                                    var elmBB2BB = $('<li class="ix-thumb pager" role="presentation"></li>');
                                    var elmBB2BBB = $('<a class="ix-btn" href="#" title="<!--ix-index-->번째 배너"><!--ix-index-->번째 배너</a>');

                                    elmB.append(elmBB2);
                                    elmBB2.append(elmBB2B);
                                    elmBB2B.append(elmBB2BB);
                                    elmBB2BB.append(elmBB2BBB);
                                }
                            }
                        });
                    }
                });
            });
            rederSpecInfo();
        },
        error: function (data) {
            console.log("msg_error_occurred_spec_info");
        }
    });
}