/* 使用外观模式(门面模式)，即利用函数嵌套，使子函数或节后被高层的函数或接口调用，这样调用者不必关心函数内部
实现的细节，而且降低这些函数模块间的耦合性，保证函数或者对象尽可能的处在一个合理粒度
这里将所有的功能利用函数实现，限制了所有变量在其自己的函数作用域内*/

/* 以观察者模式为各个拥有操作的元素绑定监听的事件，当元素发生相应事件时，对应的处理函数才会被触发
可以很好的实现2个模块之间的解耦*/

/*使用单例模式，将页面元素的部分集合或者函数拆成一个个单例，即一个“类”的唯一实例，这样调用其内部函数和参数时不会重复创建该对象，
同时这样构造可以使代码执行的流程流程更为清晰，管理更加方便*/
$(document).ready(function() {
    // 页面侧栏，搜索栏
    var index = {
        init: function(argument) {
            var _this = this;
            _this.render();
            _this.blind();
        },
        render: function() {
            var _this = this;
            _this.search_btn = $("#search_btn");
            _this.more = $(".more");
            _this.sidebar = $(".sidebar");
        },
        blind: function() {
            var _this = this;
            //点击搜索按钮
            _this.search_btn.click(indexFn.toSearch);
            // 鼠标移动至“更多产品”按钮则显示侧栏，移出范围则收起侧栏
            _this.more.mouseover(indexFn.sidebarShow);
            _this.more.mouseleave(function() {
                setbarHide = setTimeout(indexFn.sidebarHide, 200);
            });
            // 侧栏
            _this.sidebar.mouseenter(function() {
                clearTimeout(indexFn.setbarHide);
                indexFn.sidebarShow();
            });
            _this.sidebar.mouseleave(indexFn.sidebarHide);
        }
    };

    // 皮肤
    var skin = {
        init: function(argument) {
            var _this = this;
            _this.render();
            _this.blind();
        },
        render: function() {
            var _this = this;
            _this.packUp = $("#packUp");
            _this.skin_change = $("#skin_change");
            _this.bg_opacity = $("#bg_opacity");
            _this.bg_box = $(".bg-box");
            _this.no_skin = $("#no_skin");
        },
        blind: function() {
            var _this = this;
            // 控制皮肤菜单显示隐藏
            _this.packUp.click(function() {
                $(".skin-box").css("height", "0px");
            });
            _this.skin_change.click(function() {
                $(".skin-box").css("height", "309px");
            });

            // 滑动调整背景透明度
            _this.bg_opacity.mousemove(function() {
                var opval = $("#bg_opacity").val();
                $("#opacity_num").text(opval + "%");
                $(".s-opacity-white-background").css("background", "rgba(255,255,255," + opval / 100 + ")");
            });
            _this.bg_opacity.mouseleave(function() {
                var opval = $("#bg_opacity").val();
                window.localStorage.setItem("opVal", opval);
            });

            // 点击选择皮肤
            _this.bg_box.click(function() {
                skinFn.newSkinSet();
            });

            // 不使用皮肤
            _this.no_skin.click(function() {
                window.localStorage.setItem("skinIndex", -1);
                skinFn.defaultNav();
                $("#s_ctner_contents").addClass("no-skin-container");
            });
        }
    };

    // 导航栏
    var tab = {
        init: function(argument) {
            var _this = this;
            _this.render();
            _this.blind();
        },
        render: function() {
            var _this = this;
            _this.s_menu_mine = $("#s_menu_mine");
            _this.s_menus_wrapper = $("#s_menus_wrapper span");
        },
        blind: function() {
            var _this = this;
            // “我的关注”点击
            _this.s_menu_mine.click(function() {
                tabFn.navChoice($(this));
                // showBlock("#s_content_100");
            });
            // 推荐，导航，视频，购物 点击
            _this.s_menus_wrapper.click(function() {
                $("#s_menu_mine").removeClass("opacity-active");
                $("#s_menu_mine").removeClass("bold-weight");
                tabFn.navChoice($(this));
            });
        }
    }

    // 返回顶部
    var goTop = {
        init: function(argument) {
            var _this = this;
            _this.render();
            _this.blind();
        },
        render: function() {
            var _this = this;
            _this.s_top_feed = $("#s_top_feed");
            _this.windows = $(window);
        },
        blind: function() {
            var _this = this;
            // 监听页面滚动
            _this.windows.scroll(function() {
                var toTop = $(window).scrollTop();
                if (toTop < 100) {
                    $("#s_top_feed").css("display", "none");
                } else {
                    $("#s_top_feed").css("display", "block");
                }
            });
            // 点击返回顶部
            _this.s_top_feed.click(function() {
                var toTop = $(window).scrollTop();
                goTopFn.scrollBack(parseInt(toTop));
            });
        }
    }

   /*-------------------------------------------------------------------------------*/     

    // 页面搜索，侧栏函数对象
    var indexFn = {
        toInit: function() {
            $("#s_menu_mine").addClass("opacity-active");
            $("#s_menu_mine").addClass("bold-weight");
            $("#s_menus_wrapper>span").addClass("s-opacity-white-background");
            $("#s_menu_mine").addClass("opacity-active");
            indexFn.setBind(".setting", "#set_all");
            indexFn.setBind(".log", "#set_mine");
            skinFn.oldSkinSet();
        },
        //点击搜索按钮后获取到输入框内容，跳转至对应的百度搜索页面
        toSearch: function() {
                var txt = $("#input_text").val();
                var href = "";
                if (txt == "") {
                    href = "https://www.baidu.com";
                } else {
                    href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=" + txt + "&rsv_pq=d77f1b96000cf9c9&rsv_t=1bcccBs82hoVoywoboSJZjWftK%2FftyAGxDTQ8wUfb46DcbLbeNMyKHfXvPQ&rsv_enter=1&rsv_sug3=3&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&inputT=1412&rsv_sug4=2191";
                }
                window.open(href, "_parent");
            },
            // 侧栏出现
        sidebarShow: function() {
                $(".sidebar").fadeIn();
                $(".more").css("background-color", "rgb(249,249,249)");
                $(".more").css("color", "#000");
            },
            // 侧栏隐藏
        sidebarHide: function() {
                $(".sidebar").hide();
                $(".more").css("background-color", "#3385ff");
                $(".more").css("color", "#fff");
            },
            // 鼠标移动至“设置”按钮则显示设置菜单，移出范围则收起菜单
        setBind: function(who, menu) {
            var setHide;
            $(who).mouseover(function() {
                $(menu).show();
            });
            $(who).mouseleave(function() {
                setHide = setTimeout(function() {
                    $(menu).hide();
                }, 200);
            });
            $(menu).mouseenter(function() {
                clearTimeout(setHide);
                $(menu).show();
            });
            $(menu).mouseleave(function() {
                $(menu).hide();
            });
        }
    };

    // 导航切换函数对象
    var tabFn = {
        // 导航选项点击
        navChoice: function(that) {
            $("#s_menus_wrapper>span").removeClass("opacity-active");
            $("#s_menus_wrapper>span").removeClass("bold-weight");
            that.addClass("opacity-active");
            that.addClass("bold-weight");
            switch (that.attr("id")) {
                case "s_menu_mine":
                    tabFn.showBlock("#s_content_100");
                    break;
                case "s_recommend":
                    tabFn.showBlock("#s_content_2");
                    break;
                case "s_menu":
                    tabFn.showBlock("#s_content_1");
                    break;
                case "s_video":
                    tabFn.showBlock("#s_content_15");
                    break;
                case "s_shopping":
                    tabFn.showBlock("#s_content_5");
                    break;
            }
        },
        // 根据点击的导航显示相应面板
        showBlock: function(name) {
            var names = ["#s_content_100", "#s_content_2", "#s_content_1", "#s_content_15", "#s_content_5"];
            for (var i = 0; i < names.length; i++) {
                if (name == names[i]) {
                    $(names[i]).css("display", "block");
                } else {
                    $(names[i]).css("display", "none");
                }
            }
        }
    };

    // 皮肤设置函数对象
    var skinFn = {
        // 更换皮肤
        newSkinSet: function() {
            var radios = $(".bg-box .img-box input");
            for (var i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    var skinClass = "skin" + (i + 1);
                    window.localStorage.setItem("skinIndex", i);
                    $("#pc_logo1").hide();
                    $("#pc_logo2").show();
                    for (var j = 0; j <= 8; j++) {
                        $(".skin-container").removeClass("skin" + j);
                    }
                    $(".skin-container").addClass(skinClass);
                    $(radios[i]).parent().css("border-radius", "20px");
                    skinFn.skinNav();
                } else {
                    $(radios[i]).parent().css("border-radius", "0px");
                }
            }
        },

        // 设置历史皮肤
        oldSkinSet: function() {
            var radios = $(".bg-box .img-box input");
            var skinIndex;
            // 取得皮肤历史值
            if (window.localStorage.getItem("skinIndex")) {
                skinIndex = window.localStorage.getItem("skinIndex");
            } else {
                skinIndex = -1;
            }
            // 取得背景透明度历史值
            if (window.localStorage.getItem("opVal")) {
                opVal = parseInt(window.localStorage.getItem("opVal"));
            } else {
                opVal = 100;
            }
            $("#pc_logo1").show();
            for (var i = 0; i < radios.length; i++) {
                // 根据按钮的历史值改变相应皮肤
                if (i == skinIndex) {
                    var skinClass = "skin" + (i + 1);
                    $("#pc_logo1").hide();
                    $("#pc_logo2").show();
                    $(".skin-container").addClass(skinClass);
                    skinFn.skinNav();
                }
            }
            if (skinIndex == -1) {
                skinFn.defaultNav();
            }
            // 给滑动条赋历史值
            $("#bg_opacity").val(opVal);
            $("#opacity_num").text(opVal + "%");
        },
        // // 去掉皮肤函数
        defaultNav: function() {
            $(".wrapper header nav").css("background", "0");
            $(".wrapper header nav").css("border-bottom", "1px solid #ddd");
            $("nav a").css("color", "rgb(51,51,51)");
            $("nav a.more").css("color", "#fff");
            $(".wrapper header nav .nav-weather a").css("color", "rgb(85,85,85)");
            $("#pc_logo1").show();
            $("#pc_logo2").hide();
            for (i = 1; i <= 8; i++) {
                $(".skin-container").removeClass("skin" + i);
            }
            $(".skin-container").addClass("skin0");
            $("#s_ctner_contents").addClass("no-skin-container");
        },
        // // 更换皮肤函数设置样式
        skinNav: function() {
            $(".wrapper header nav").css("background", "rgba(150,158,172,.5)");
            $(".wrapper header nav").css("border-bottom", "0px solid #ddd");
            $("nav span").css("color", "#fff");
            $("nav a").css("color", "#fff");
            $("#s_ctner_contents").removeClass("no-skin-container");
        }
    };

    // 返回顶部函数对象
    var goTopFn = {
        // 滚动条返回顶部
        scrollBack: function(tp) {
            if (tp > 0) {
                tp = (tp - 5) < 0 ? 0 : (tp - 5);
                window.scrollTo(0, tp);
                setTimeout(function() { goTopFn.scrollBack(tp) }, 0.1);
            }
        }
    };

    // 初始化页面样式
    indexFn.toInit();
    // 初始化
    index.init();
    tab.init();
    skin.init();
    goTop.init();

});
