$(function () {
    $('div.ProdTagSelect').each(function () {
        $tagSelect = $(this);
        var Path = $tagSelect.data('path');
        var Lang = $tagSelect.data('lang');
        var Tags = getQueryVariable('tags');
        var TagsArr = Tags.split("|");

        //载入标签
        $.getJSON("/Template/Comm/ProdTag.json", function (data) {
            //标签显示
            showTags();
            function showTags() {
                var html = '';
                html += '<ul class="Tags"></ul>';
                $tagSelect.html(html);

                //生成html
                var htmlStr = "";
                for (var i = 0; i < data.length; i++) {
                    if (data[i]["Lang"] == Lang) {
                        htmlStr += '<li><div>' + data[i]["GroupName"] + '</div><ul>';
                        var tags = data[i]["Tags"];
                        for (var j = 0; j < tags.length; j++) {
                            htmlStr += '<li class="tag">' + tags[j] + '</li>';
                        }
                        htmlStr += '</ul></li>';
                    }
                }
                $('ul.Tags').html(htmlStr);

                //初始化传入参数
                for (var i = 0; i < TagsArr.length; i++) {
                    var tag = TagsArr[i].split(":");
                    var groupName = tag[0];
                    var tagName = tag[1];
                    $tagSelect.find("ul.Tags>li").each(function () {
                        if ($(this).find("div").text() == groupName) {
                            $(this).find("ul>li").each(function () {
                                if ($(this).text() == tagName) {
                                    $(this).addClass("Act");
                                }
                            });
                        }
                    });
                }
            }

            //标签选择
            $tagSelect.on("click", "li.tag", function () {
                var groupName = $(this).parent("ul").prev("div").text();
                var tag = $(this).text();
                if ($(this).hasClass("Act")) {
                    $(this).removeClass("Act");
                    //移除tags元素
                    for (var i = 0; i < TagsArr.length; i++) {
                        if (TagsArr[i] == groupName + ":" + tag) {
                            TagsArr.splice(i, 1);
                        }
                    }

                }
                else {
                    $(this).addClass("Act");
                    //写入tags元素
                    TagsArr.push(groupName + ":" + tag);
                }

                console.log(TagsArr.join("|"));

                window.location.href = "/Comm/ProdTagSearch.aspx?path=" + Path+"&tags=" + TagsArr.join("|");
            });
        });

    });

    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) { return decodeURI(pair[1]); }
        }
        return "";
    }
});