$(function(){
    'use strict';
    //导航下拉
    var windowWidth = $(window).width();
	var mbWidth = 640;
    if(windowWidth > mbWidth){
        $(".nav > ul > li").hover(function(){
			$(">a",this).addClass("active").next("div").slideDown(0);
		},function(){
			$(">a",this).removeClass("active").next("div").slideUp(0);
		});
    }else {
    	$(".nav > ul > li").click(function(){
    		$(this).toggleClass('active');
    		$(this).children('.nav-dropdown').toggle();
    	})
    }
    // 移动端导航栏开关
    $('.menu-trigger').click(function(){
        $(this).toggleClass('menu-shut');
        $(".nav").slideToggle("slow");
    });
    // 移动端搜索开关
    $('.search-trigger').click(function(){
        $(".header-search").slideToggle("slow");
    });
    // 移动端导航百叶窗
    $('.nav-link-wrap').click(function(){
        $(this).parent().addClass("on").siblings().removeClass("on");
        // if($(this).parent().hasClass("on")){
        //     $(this).next().slideUp(300,function(){
        //         $(this).parent().removeClass("on")
        //     });
        // }else{
        //     $(this).next().slideDown(300,function(){
        //         $(this).parent().addClass("on")
        //     });
        // }
    });
    //third-menu
    $(".third-menu-trigger").click(function(){
        $(".sub-nav ul").slideToggle("slow");
    });
    // * 滚动条
    // -----------------------------------------------------------------------
    // 纵向通用
    function verticalScroll(scrollname){
        if($(scrollname).length > 0) {
            $(scrollname).mCustomScrollbar({
                scrollbarPosition: "outside",
                theme:"my-theme"
            });
        }
    }
    verticalScroll('[data-scroll="vertical-scrollable"]');
    // 横向通用
    function horizontalScroll(scrollname){
        if($(scrollname).length > 0) {
            $(scrollname).mCustomScrollbar({
                scrollbarPosition: "inside",
                axis:"x",
                theme:"my-theme-h"
            });
        }
    }
    horizontalScroll('[data-scroll="horizontal-scrollable"]');
    // 激活状态
    // -----------------------------------------------------------------------
    // 有且只有一个被激活
    function activeCurrent(target) {
        $(target).each(function(){
            var $this = $(this);
            var $targetLink = $this.find('[data-role="activeTarget"]');
            $targetLink.each(function(){
                var $this = $(this);
                $this.click(function(){
                    $targetLink.removeClass('active');
                    $this.addClass('active');
                });
            });
        });
    }
    activeCurrent('[data-action="activeCurrent"]');
    // 同时多个被激活
    function toggleClass(target){
        $(target).bind('click', function(){
            $(this).toggleClass('active');
        });
    }
    toggleClass('[data-action="toggleClass"]');
    $(".nav-link").each(function(){        if($(this)[0].href==String(window.location)){            $(this).addClass("active");
        }
    })
    // 滑过显示`tooltip`
    // -----------------------------------------------------------------------
    function tooltip(){
        var $target = $('[data-role="tooltip"]');
        var top = 'tooltip-up', right = 'tooltip-right', bottom = 'tooltip-down', left = 'tooltip-left'; // 方向样式
        $target.each(function(){            var $tooltip = $( // 一定要写在遍历里面
                    '<span class="tooltip">'+
                        '<div class="tooltip-con"></div>'+
                        '<span class="tooltip-arr"></span>'+
                    '</span>'
                );            var $this = $(this),
                oriation = $this.data('oriation'), // 方向
                specialClass = $this.data('special'), // 特殊样式
                multiClass = 'multiclass', // 复杂内容气泡样式
                multi = $this.data('multi'), // 是否复杂内容
                interact = $this.data('interact'); // 是否能交互
            // 定位
            function locate(targetTrigger, targetTooltip){
                var thisTop = targetTrigger.offset().top, thisLeft = $this.offset().left; // 按钮位置
                var thisW = targetTrigger.outerWidth(true), thisH = $this.outerHeight(true); // 按钮尺寸
                var tooltipW = targetTooltip.outerWidth(true), tooltipH = targetTooltip.outerHeight(true); // 气泡尺寸
                // 因为 FF 和 IE 中，border 四个边的值是分开写的
                // 所以为了兼容 FF 和 IE，必须获取某一具体边的边宽
                // 这里四个边的边宽是一样的，所以随意获取一个方向的即可
                var arrow = parseInt($tooltip.find('.tooltip-arr').css('border-right-width')); // 兼容FF和IE的写法
                if(oriation === 'top'){
                    targetTooltip.addClass(top).css({
                        'top': thisTop - tooltipH - arrow*2,
                        'left': thisLeft - (tooltipW - thisW)/2,
                    });
                }else if(oriation === 'right') {
                    targetTooltip.addClass(right).css({
                        'top': thisTop - (tooltipH - thisH)/2,
                        'left': thisLeft + thisW + arrow*2,
                    });
                }else if(oriation === 'bottom') {
                    targetTooltip.addClass(bottom).css({
                        'top': thisTop + thisH + arrow*2,
                        'left': thisLeft - (tooltipW - thisW)/2,
                    });
                }else if(oriation === 'left') {
                    targetTooltip.addClass(left).css({
                        'top': thisTop - (tooltipH - thisH)/2,
                        'left': thisLeft - tooltipW - arrow*2,
                    });
                }
            }
            // 移除
            function remove(){
                $tooltip.removeClass(top, right, bottom, left, specialClass, multiClass).css({'top': 'auto', 'left': 'auto'}).remove();
            }
            $this.on({
                'mouseover': function(){
                    $('body').append($tooltip);
                    if(multi !== '') { // 简单内容
                        var thisContent = $this.attr('name'); // 对应文字
                        if(specialClass !== 'undefined'){
                            $tooltip.addClass(specialClass); // 如有特殊样式，提前加入
                        }
                    }else{ // 复杂内容
                        var thisContent = $('#' + $this.data('content')).html(); // 对应的结构内容（非仅文字）
                        $tooltip.addClass(multiClass);
                    }
                    $tooltip.find('div').html(thisContent);
                    locate($this, $tooltip);
                },
                'mouseleave': function(){
                    if(interact !== '') { // 不能交互，即划出消失
                        remove();
                    }else{ // 能交互，即划出不消失，需点'关闭'按钮才能消失
                        $tooltip.find('[data-shut]').click(function(){remove();});
                    }
                }
            });
        });
    }
    tooltip();
    // * 选项卡
    // 1. 一个'id'：目标选项卡标签组容器给个id
    // 2. 两个'data-role'：目标选项卡标签组'tablist'，目标选项卡内容组'id + tabbody'
    // 3. 目标选项卡标签组选项样式名必须包含'tabs-link'
    // 4. 目标选项卡内容组选项样式名必须包含'tabs-con'
    // 2. 目标选项卡标签组必须有'data-event'属性，且必须赋值，一般默认给'click'
    // 4. 只有id名称是可以随意取的，其它的要保持不变。
    // 5. 标签组选项宽度均分，只需给标签组加上'data-equal="true"'即可
    // -----------------------------------------------------------------------
    function tabs(){
        $('[data-role="tablist"]').each(function(){
            var $this = $(this), thisID = $this.attr('id'), thisEvent = $this.data('event');
            var $thisTabLink = $this.find('.tabs-link'),
                $thisTabItem = $this.find('.tabs-item');
            var $thisTabCon = $('[data-role="' + thisID + '-tabbody"]').children('.tabs-con');
            $thisTabLink.each(function(index){
                $(this).on(thisEvent, function(){
                    var thisIndex = index;
                    $thisTabLink.removeClass('active');
                    $(this).addClass('active');
                    $thisTabCon.removeClass('active');
                    $thisTabCon.eq(thisIndex).addClass('active');
                });
            });
            // 判断有间距和无间距两种情况，分别计算等分值
            // 为兼容IE10这个方法需写在 'function equal()' 外面
            var liNum = $thisTabItem.length;
            function wcalc(gap, i){
                if(gap === 0) {
                    $thisTabItem.css('width', (100/liNum) + '%');
                }else{
                    var w1 = ($this.width() - gap*i*(liNum - 1))/liNum;
                    $thisTabItem.css('width', w1);
                }
            }
            // 选项卡横排等分
            function equal(){
                var thisEqual = $this.attr('data-equal');
                if(thisEqual === 'true') {
                    // 判断是否IE8，分别赋值
                    if($('body').hasClass('ie8')) {
                        // parseInt(value, radix)。radix要给值（=10），以解决IE8下获取不到值的问题
                        // margin 值需获取第二个li元素的左边距，因为IE8中为让了最后一个li右边距为0，故将边距值给到左侧了
                        var liMargin1 = parseInt(($thisTabItem.eq(1).css('margin-left')), 10);
                        wcalc(liMargin1, 1);
                    }else{
                        // margin 值需获取第一个li元素的右边距，因为第一个的左边距样式中强制为0了
                        var liMargin2 = parseInt($thisTabItem.eq(0).css('margin-right'));
                        wcalc(liMargin2, 2);
                    }
                    // 如果是组选项卡（group tabs），需让标签组有个宽度，这里默认为100%
                    if($this.hasClass('group-tabs')) {
                        $this.css('width', '100%');
                    }
                }
            }equal();
            $(window).resize(function(){equal()});
        });
    }
    tabs();
    // 弹窗
    // -----------------------------------------------------------------------
    // 应用方法：
    // 1. 一个'id'：目标弹出窗口父级蒙板容器给个id
    // 2. 一个'data-trigger'：触发目标窗口的按钮，必须与窗口id同名
    // 3. 两个'data-role'：目标弹窗父级蒙板'popup-container'，目标弹窗'popup'
    // 4. 1、2中的名字可以随意取，两个名字相同。3中的名字固定不可变。
    function popup() {
        var $popupContainer = $('[data-role="popup-container"]');
        $popupContainer.each(function(){ // 遍历弹窗父蒙板
            var $this = $(this);
            var thisID = $this.attr('id'); // 蒙板id
            var $thisTrigger = $('[data-trigger="' + thisID + '"]'); // 对应的触发按钮
            var $thisPopup = $this.find('[data-role="popup"]'); // 对应的目标弹窗
            var $thisShut = $thisPopup.find('[data-role="popup-shut"]'); // 关闭按钮
            function popupShut(target){ // 弹窗关闭命令
                var $targetPopup = $(target).find('[data-role="popup"]');
                $(target).fadeOut();
                $targetPopup.fadeOut();
                // 因为fadeIn/fadeOut是缓动效果，需要加一个计时器，让样式归零动作延后一点点
                setTimeout(function(){                    $targetPopup.css({ // 关闭时弹窗居中样式需归零，重要！！
                        'top': 'auto',
                        'left': 'auto',
                        'margin-top': 0,
                        'margin-left': 0
                    });
                }, 400);
                // 恢复页面滚动条
                var pageHeight = $(window).height(),
                    clientHeight = $(document).height();
                if(clientHeight > pageHeight) {
                    $('body').css('overflow-y', 'auto');
                }
            }
            $thisTrigger.click(function(){
                if($popupContainer.is(':visible')) { // 如果触发按钮在弹窗里，点击时先关闭该弹窗
                    popupShut('[data-role="popup-container"]:visible');
                }
                $this.fadeIn(); // 显示蒙板
                $thisPopup.fadeIn(); // 显示弹窗
                var thisWidth = $thisPopup.outerWidth(true);
                var thisHeight = $thisPopup.outerHeight(true);
                $thisPopup.css({ // 使弹窗垂直水平居中
                    'top': '50%',
                    'left': '50%',
                    'margin-top': -thisHeight/2,
                    'margin-left': -thisWidth/2
                });
                if($thisShut.length > 0){
                    $thisShut.click(function(){ // 点关闭按钮时
                        popupShut($this); // 调用弹窗关闭命令
                    });
                }
                // 隐藏页面滚动条
                var pageHeight = $(window).height(),
                    clientHeight = $(document).height();
                if(clientHeight > pageHeight) {
                    $('body').css('overflow-y', 'hidden');
                }
            });
            $this.click(function(){ // 点弹窗蒙板时
                popupShut($this); // 调用弹窗关闭命令
            });
            $thisPopup.click(function(e){ // 如果点击的是弹窗内部，防止冒泡，重要！！
                e.stopPropagation();
            });
        });
    }
    popup();
    // 统一防冒泡（必须放在JS底部）
    // -----------------------------------------------------------------------
    function stopPropagation(){
        $('body').on('click','[data-stopPropagation]',function(e) {
            e.stopPropagation();
        });
    }
    stopPropagation();
});