(function($) {

  $.fn.menumaker = function(options) {
      
      var menu = $(this), settings = $.extend({
        title: "Menu",
        format: "dropdown",
        sticky: false
      }, options);

      return this.each(function() {
        menu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) { 
            mainmenu.hide().removeClass('open');
          }
          else {
            mainmenu.show().addClass('open');
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });

        menu.find('li ul').parent().addClass('has-sub');

        multiTg = function() {
          menu.find(".has-sub").prepend('<span class="submenu-button"></span>');
          menu.find('.submenu-button').on('click', function() {
            $(this).toggleClass('submenu-opened');
            if ($(this).siblings('ul').hasClass('open')) {
              $(this).siblings('ul').removeClass('open').hide();
            }
            else {
              $(this).siblings('ul').addClass('open').show();
            }
          });
        };

        if (settings.format === 'multitoggle') multiTg();
        else menu.addClass('dropdown');

        if (settings.sticky === true) menu.css('position', 'fixed');

        resizeFix = function() {
          if ($( window ).width() > 768) {
            menu.find('ul').show();
          }

          if ($(window).width() <= 768) {
            menu.find('ul').hide().removeClass('open');
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})(jQuery);

(function($){
$(document).ready(function(){
$(document).ready(function() {
  $("#menu").menumaker({
    title: "",
    format: "multitoggle"
  });

  $("#menu").prepend("<div id='menu-line'></div>");

var foundActive = false, activeElement, linePosition = 0, menuLine = $("#menu #menu-line"), lineWidth, defaultPosition, defaultWidth;
$("#menu > ul > li").each(function() {
  if ($(this).hasClass('active')) {
    activeElement = $(this);
    foundActive = true;
  }
});

if (foundActive === false) {
  activeElement = $("#menu > ul > li").first();
}

defaultWidth = lineWidth = activeElement.width();

defaultPosition = linePosition = activeElement.position().left;

menuLine.css("width", lineWidth);
menuLine.css("left", linePosition);
menuLine.css("background", "none");
$("#menu > ul > li").hover(function() {
  activeElement = $(this);
  lineWidth = activeElement.width();
  linePosition = activeElement.position().left;
  menuLine.css("width", lineWidth);
    menuLine.css("left", linePosition);
    menuLine.css("background", "none");
}, 
function() {
  menuLine.css("left", defaultPosition);
  menuLine.css("width", defaultWidth);
  menuLine.css("background", "none");
});

});


});
})(jQuery);



(function($) {
    $.fn.list_nav = function(b) {
        var c,
        item,
        httpAdress;
        b = jQuery.extend({
            Speed: 220,
            autostart: 0,
            autohide: 0
        },
        b);
        c = $(this);
        item = c.children("ul").parent("li").children("em");
        httpAdress = window.location;
        item.addClass("inactive");
        function _item() {
            var a = $(this);
            if (b.autohide) {
                a.parent().parent().find(".active").parent("li").children("ul").slideUp(b.Speed / 1.2, 
                function() {
                    $(this).parent("li").children("em").removeAttr("class");
                    $(this).parent("li").children("em").attr("class", "inactive")
                })
            }
            if (a.attr("class") == "inactive") {
                a.parent("li").children("ul").slideDown(b.Speed, 
                function() {
                    a.removeAttr("class");
                    a.addClass("active")
                })
            }
            if (a.attr("class") == "active") {
                a.removeAttr("class");
                a.addClass("inactive");
                a.parent("li").children("ul").slideUp(b.Speed)
            }
        }
        item.unbind('click').click(_item);
        if (b.autostart) {
            c.children("a").each(function() {
                if (this.href == httpAdress) {
                    $(this).parent("li").parent("ul").slideDown(b.Speed, 
                    function() {
                        $(this).parent("li").children(".inactive").removeAttr("class");
                        $(this).parent("li").children("em").addClass("active")
                    })
                }
            })
        }
    }
})(jQuery);

// 此段为给导航栏增加一个吸附在顶部的效果
(function ($) {
    $(document).ready(function () {
        var headline = $(".headline");
        var hOffsetTop = headline.offset().top;
        var hHeight = headline.outerHeight();
        var banner = $(".banner");
        var banners = $(".banners");
        var logoImg = $(".logo img:first-of-type");
        var logoFlat = $(".logo img#logoFlat");
        $(window).scroll(function () {
            if ($(window).scrollTop() >= hOffsetTop + 80) {
                // headline.addClass("sticked");               
                headline.css({
                    "position": "fixed",
                    "top": -80,
                    "width": "100%",
                    "z-index": 99999,
                    "background": "white",
                    "border-bottom": "1px solid #ddd",
                });
                logoImg.css({
                    "opacity": 0,
                    "visibility": "hidden",                   
                });
                logoFlat.css({
                    "opacity": "1",
                    "visibility": "visible",
                });
                if (banner.length == 0) {
                    banners.css("margin-top", hHeight + "px");
                }
                else {
                    banner.css("margin-top", hHeight + "px");
                }
            }
            else {
                // headline.removeClass("sticked");
                headline.css({
                    "position": "static",
                    "background": "transparent",
                    "border-bottom": "none",
                });
                logoImg.css({
                    "opacity": "1",
                    "visibility": "visible",
                });
                logoFlat.css({
                    "opacity": 0,
                    "visibility": "hidden",
                });
                if (banner.length == 0) {
                    banners.css("margin-top", "0px");
                }
                else {
                    banner.css("margin-top", "0px");
                }
            }
        })
    })
})(jQuery);

// 以下为对产品菜单进行的优化

(function ($) {
    $(document).ready(function () {
        // 获取没有subMenu的菜单项
        let noSubMenuItems = $("#menu > ul > li:nth-of-type(2) > ul > li:not(.has-sub)");
        // 请按照顺序放入产品中心菜单第2项起, 各项需要展示的图片链接
        let picList = [
            "https://static.deren.com//Upload/6fa1a5e699154dfbb4a5deed2ae8022e20210622154519.jpg",
            "https://static.deren.com//Upload/804ef3ce0b4544f49f53f98a88c58ebe20210622161106.jpg",
            "https://static.deren.com//Upload/9771cf6559524754aa9513d751a1666120210623170811.jpg",
            "https://static.deren.com//Upload/8a6a9523ad434d7aa89aeda2377eecef20210622153427.jpg",
            "https://static.deren.com//Upload/355f28349e0a4f0eac236eeaaeb283da20210622153604.jpg",
            "https://static.deren.com//Upload/168ba814b63c481b89928c408579160e20210622154927.jpg",
            "https://static.deren.com//Upload/3072413c4fc6402786f154e696ee3bf920210622154236.jpg",
            "https://static.deren.com//Upload/41fae219f9a94262ade30c8bf704be4420210622161324.jpg",
            "https://static.deren.com//Upload/a906cef244a848ad840c651fe861b64520210622160855.jpg",
        ];
        // 节点和模板字符串
        var $span = $("<span class='submenu-button'></span>");
        let temp2 = `<ul>
                    <li>
                        <a href=`;
        let temp3 = ` class='showpro'>
                            <img src=`;
        let temp4 = ` class='show_img'></img>
                            <div>更多</div>
                        </a>
                    </li>
                </ul>`
        for (let i = 0; i < noSubMenuItems.length; i++) {
            $span.appendTo(noSubMenuItems[i]);
            $(noSubMenuItems[i]).append(temp2 + noSubMenuItems[i].children[0].href + temp3 + picList[i] + temp4);
        }
    })
})(jQuery);

// 修改连接器产品菜单, 加上副菜单和图片展示
(function ($) {
    $(document).ready(function () {
        let menuOptimize = [
            {
                // 图片展示：跳转地址href和图片链接imgsrc
                showpro: {
                    href: 'productlist.aspx?catid=200302',
                    imgsrc: 'https://static.deren.com//Upload/d562dc92758f464b8b7f2a77bbeeb13520220909162850.jpg',
                },
                // 副菜单：要展示的产品对象, 产品名称proname和跳转链接href
                specmenu: [
                    {
                        proname: 'DDR5 DIMM',
                        href: 'productshow.aspx?id=564'
                    },
                    {
                        proname: 'PCI-E 4.0 DIP',
                        href: 'productshow.aspx?id=570'
                    }
                ]
            },
            {
                showpro: {
                    href: 'productlist.aspx?catid=200303',
                    imgsrc: 'https://static.deren.com//Upload/09cf51b0d868415ca7921aac10f1ceb220221104174800.png',
                },
                specmenu: [
                    {
                        proname: 'USB TYPE C PLUG',
                        href: 'productshow.aspx?id=599'
                    },
                    {
                        proname: 'HDMI',
                        href: 'productshow.aspx?id=589'
                    }
                ]
            },
            {
                showpro: {
                    href: 'productlist.aspx?catid=200304',
                    imgsrc: 'https://static.deren.com//Upload/cc5cc10851e745aab83a0b814bb1103820221011091726.png',
                },
                specmenu: [

                ]
            },
            {
                showpro: {
                    href: 'productlist.aspx?catid=200305',
                    imgsrc: 'https://static.deren.com//Upload/51ceaa71ef3348e2970f3c39dc951d3f20220921172354.png',
                },
                specmenu: [
                    {
                        proname: 'MCIO',
                        href: 'productshow.aspx?id=569'
                    },
                    {
                        proname: 'GEN Z',
                        href: 'productshow.aspx?id=619'
                    }
                ]
            },
            {
                showpro: {
                    href: 'productlist.aspx?catid=200306',
                    imgsrc: 'https://static.deren.com//Upload/50ea954dd5e64f24b2d8ceb249bb611b20220921180735.png',
                },
                specmenu: [
                    {
                        proname: 'WTB  Male 90°',
                        href: 'productshow.aspx?id=577'
                    },
                    {
                        proname: 'WTB  Female',
                        href: 'productshow.aspx?id=578'
                    }
                ]
            },
            {
                showpro: {
                    href: 'productlist.aspx?catid=200307',
                    imgsrc: 'https://static.deren.com//Upload/aabf8d3fcd93483cbde6f586f9ca707620230223100717.png',
                },
                specmenu: [

                ]
            },
            {
                showpro: {
                    href: 'productlist.aspx?catid=200308',
                    imgsrc: 'https://static.deren.com/Upload/5e5774dc342d44f4a4560041d4dde55320240423101944.png',
                },
                specmenu: [
                    {
                        proname: 'RF连接器',
                        href: 'productlist.aspx?catid=200308'
                    },
                ]
            },
        ];
        let ConnectorMenuUl = $("#menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > ul");       
        ConnectorMenuUl.addClass("test_ul");
        let ConnectorMenuLi = $("#menu > ul > li:nth-of-type(2) > ul > li:nth-of-type(1) > ul > li");
        //console.log(ConnectorMenuLi);
        var temp1 = `<ul class='pc_ul'>
                        <li>
                            <a href='`;
        var temp2 = `' class='showpro'>
                            <img src='`;
        var temp3 = `' class='show_img'></img>
                                <div>更多</div>
                            </a>
                        </li>
                    </ul>`;
        for (let i = 0; i < ConnectorMenuLi.length; i++) {
            $(ConnectorMenuLi[i]).append(temp1 + menuOptimize[i].showpro.href + temp2 + menuOptimize[i].showpro.imgsrc + temp3);
            if (menuOptimize[i].specmenu.length != 0) {
                let newUl = $("<ul>").addClass("spec_ul");
                for (let j = 0; j < menuOptimize[i].specmenu.length; j++) {
                    let newA = $("<a>").attr("href", menuOptimize[i].specmenu[j].href).html(menuOptimize[i].specmenu[j].proname);
                    // console.log(newA);
                    newUl.append(newA);
                };
                $(ConnectorMenuLi[i]).append(newUl);
            }
        }
    })
})(jQuery);


// 给首页产品中心增加些动态效果
(function ($) {
    $(document).ready(function () {
        let proTypeList = $('.proList .proType');
        let typeNameList = $('.proList .typeName');
        let briefList = $('.proList .brief');
        $(window).scroll(function () {
            for (let i = 0; i < proTypeList.length; i++) {
                if ($(window).scrollTop() >= $(proTypeList[i]).offset().top - 470) {
                    $(typeNameList[i]).css({
                        "opacity": "1",
                        "top": '25%',
                    });
                    $(briefList[i]).css({                 
                        "top": '150px',
                    });
                }
                else {
                    $(typeNameList[i]).css({
                        "opacity": "0",
                        "top": '5%',
                    });
                    $(briefList[i]).css({                                              
                        "top": '250px',
                    });
                }
            }        
        })
    });
})(jQuery);