function WebPageGuide(options) {
    var WPGnextvalType = getlocalStorage("WPGnextval ");
    if (WPGnextvalType===true) {
        console.log("说明框已被阅读")
    } else {
        this.settings = {
            showCloseButton: true,
            source: null
        }
        this.closeButton = '<a href="javascript:void(0);" class="WPGclose" title="关闭使用帮助">×</a>';
        this.stepTemplate = '<div class="WPGnextbox" step="" >'
            +'<div class="WPGstep" step="" >'
            + '<b class="WPGjt" style=""></b>'
            + '<span class="h1 demonstration">代码标注使用提示</span>'
            + '<p><span class="h2 WPGstepTitle"></span>'
            + '<br><span class="WPGstepContent"></span>' +
            '<div class="webinputcheckbox"><input type="checkbox" style="margin-top: 10px !important;" class="newwebinputcheckbox" value="true" />下次不再显示代码注释提示</div>' +
            '<a href="###" class="WPGnext">下一步</a>' +
             '<a href="###" class="topWPGnext">上一步</a>' +
            '</p>' +
            '</div>'+
          '</div>';

        this.settings = $.extend(this.settings, options);
        this.stepList = [];
        if (this.settings.showCloseButton)
            this.mask = '<div class="WPGhelp">' + this.closeButton + '</div>';
        else
            this.mask = '<div class="WPGhelp"></div>';
        $("body").append(this.mask);
        // $(".WPGhelp").css({height:document.body.offsetHeight});
        $(".WPGclose").click(function () {
            $('.WPGhelp').remove();
        });
        return this;
    }
    // WebPageGuide.prototype = {
    //
    // }
    $.extend({
        WebPageGuide: function (options) {
            return new WebPageGuide(options);
        }
    });
}
         var num;
         var step;
         var stepnuma;
       function   newGuidStep(source, title, content) {
            var item = {};
            num = this.stepList.length;
            item.source = source;
            item.title = title;
            item.content = content;
            item.container = $(this.stepTemplate);
            var img;
            if( typeof(content)==="string" ){
                img = "<img src=" + item.content + ">";
                item.container.find(".WPGstepContent").append(img);
            }else if(typeof(content)==="object"){
                var img1;
                var img2;
                var img3;
                for(var i=0;i<content.length;i++){
                    if(i===0){
                         img1="<div class='Codelabeimg'><a href="+content[0].codepath+" target=\"_blank\">"+1+"."+content[0].code+"</a></div>"
                    }
                    if(i===1){
                         img2="<div class='Codelabeimg'><a href="+content[1].codepath+" target=\"blank\">"+2+"."+content[1].code+"</a></div>"
                    }
                    if(i===2){
                         img3="<div class='Codelabeimg'><a href="+content[2].codepath+" target=\"blank\">"+3+"."+content[2].code+"</a></div>"
                    }
                 }
                 img="<div>"+img1+img2+img3+"</div>";
                  item.container.find(".WPGstepContent").append(img);
            }

            item.container.find(".WPGstepTitle").html(item.title);

            item.container.attr("step", num);
            item.container.attr("id", "step" + num);

            //绑定下一步事件
            item.container.find(".WPGnext").click(function () {
                var obj = $(this).parents('.WPGnextbox');
                 step = obj.attr('step');
                obj.hide();
                if (parseInt(step) == num)//最后一个按钮时候删除添加的标签
                {
                    $('.WPGhelp').remove();
                }
                else {
                    $('#step' + (parseInt(step) + 1)).show();
                    var scroll_offset = $('#step' + (parseInt(step) + 1)).offset();  //得到pos这个div层的offset，包含两个值，top和left
                    $("body,html").animate({
                        scrollTop: scroll_offset.top - window.screen.availHeight / 2  //让body的scrollTop等于pos的top，就实现了滚动
                    }, 400);
                }
                 stepnuma=parseInt(step)+1;
            });

            //绑定上一步事件
            item.container.find(".topWPGnext").click(function () {
                var obj = $(this).parents('.topWPGnext');
                // var step = obj.attr('step');
                obj.hide();
                 console.log(stepnuma)

                var stepnum=stepnuma- 1

                if (parseInt(step)===0){
                    stepnum=0;
                }
                $('#step' + stepnum ).show();
                var scroll_offset = $('#step' + stepnum - 1).offset();  //得到pos这个div层的offset，包含两个值，top和left
                // $("body,html").animate({
                //     scrollTop: scroll_offset.top - window.screen.availHeight / 2  //让body的scrollTop等于pos的top，就实现了滚动
                // }, 400);
                stepnuma=stepnuma-1;
            });

            this.stepList.push(item);
            //先添加到页面中，否则无法获取container的宽高
            $(".WPGhelp").append(item.container);
            var target = $(source);
            var corner = item.container.find(".WPGjt");
            var tleft = target.offset().left;
            var ttop = target.offset().top;
            var twidth = target.width();
            var theight = target.height();
            var cheight = item.container.height();
            var cwidth = item.container.width();
            var cpaddingHeight = parseInt(item.container.css("padding-bottom")) + parseInt(item.container.css("padding-top"));
            var cpaddingWidth = parseInt(item.container.css("padding-left")) + parseInt(item.container.css("padding-right"));
            var cnBorder = 20;
            //根据target的位置设置提示框的位置
            if (tleft < (document.body.offsetWidth / 2)) {
                if (ttop < (document.body.offsetHeight / 4)) {
                    item.container.css({
                        top: ttop + theight + cnBorder,
                        left: tleft + twidth / 2
                    });
                    corner.addClass("WPGjt_topleft");
                }
                else if (ttop > (document.body.offsetHeight * 3 / 4)) {
                    item.container.css({
                        top: ttop - cheight - cpaddingHeight - cnBorder,
                        left: tleft + twidth / 2
                    });
                    corner.addClass("WPGjt_bottomleft");
                }
                else {
                    item.container.css({
                        top: ttop + (theight - cheight - cpaddingHeight) / 2,
                        left: tleft + twidth + cnBorder
                    });
                    corner.addClass("WPGjt_left");
                }
            }
            else {
                if (ttop < (document.body.offsetHeight / 4)) {
                    item.container.css({
                        top: ttop + theight + cnBorder,
                        left: tleft - cwidth / 2
                    });
                    corner.addClass("WPGjt_topright");
                }
                else if (ttop > (document.body.offsetHeight * 3 / 4)) {
                    item.container.css({
                        top: ttop - cheight - cpaddingHeight - cnBorder,
                        left: tleft - cwidth / 2
                    });
                    corner.addClass("WPGjt_bottomright");
                }
                else {
                    item.container.css({
                        top: ttop + (theight - cheight - cpaddingHeight) / 2,
                        left: tleft - cwidth - cpaddingWidth - cnBorder
                    });
                    corner.addClass("WPGjt_right");
                }
            }
            return item;
        }
        function startGuide() {
            //建议不要使用display:none，否则在添加时候无法获取目标宽高，位置会有偏差

            $(".WPGhelp").css("visibility", "visible");
            //最后一个按钮内容为完成
            this.stepList[this.stepList.length - 1].container.find(".WPGnext").html("关闭");
            this.stepList[0].container.show();
            // $(".WPGnext").click(function(){
            // 	var WPGnextval=$(".WPGnext").text();
            // 	if(!WPGnextval){
            // 	    setlocalStorage("WPGnextval ",true)
            //     }
            // });
            $(".newwebinputcheckbox").click(function () {
                var type = $(".newwebinputcheckbox").attr('checked');
                if (type === "checked") {
                    setlocalStorage("WPGnextval ", true)
                } else {
                    setlocalStorage("WPGnextval ", false)
                }

            });
        }