/**
 * 名称:x_img_viewer
 * 功能:点击图片查看大图插件.兼容IE,Chrome,FF等浏览器
 * 描述:此插件自动适应页面缩放,自动生成样式和DOM节点,只需在父级DOM添加 id="x_img_viewer" 即可使用,并支持显示高清大图(用法详见下文),.
 * 用法: 1.只需在父级DOM添加 id="x_img_viewer" ,本插件便会自动搜索此父级DOM下的全部 img DOM节点.
		 2.如需显示高清图,只需在img DOM节点下添加属性 x_img_viewer_url="{path}" 即可.
 * @author luozx
 * @Email luozx@ucweb.com
 * @version 1.0.0
 * @dependencies none
 */
!function(i, t) {
    var e = {
        getBow: function() {
            var i, t = {}, e = navigator.userAgent.toLowerCase();
            return (i = e.match(/msie ([\d.]+)/)) ? t.ie = i[1] : (i = e.match(/firefox\/([\d.]+)/)) ? t.firefox = i[1] : (i = e.match(/chrome\/([\d.]+)/)) ? t.chrome = i[1] : (i = e.match(/opera.([\d.]+)/)) ? t.opera = i[1] : (i = e.match(/version\/([\d.]+).*safari/)) ? t.safari = i[1] : 0,
            t.ie && "6.0" == t.ie ? "IE6" : t.ie && "7.0" == t.ie ? "IE7" : t.ie && "8.0" == t.ie ? "IE8" : t.ie && "9.0" == t.ie ? "IE9" : t.ie && "10.0" == t.ie ? "IE10" : t.ie && "11.0" == t.ie ? "IE11" : t.firefox ? "-moz-" : t.chrome ? "-webkit-" : t.opera ? "-o-" : t.safari ? "-webkit-" : ""
        },
        setCss: function(i, t) {
            for (var e in t)
                i.style[e] = t[e]
        },
        startMove: function(i, t, e) {
            var s = this;
            clearInterval(i.timer),
            i.timer = setInterval(function() {
                var n = !0;
                for (var l in t) {
                    var o = 0;
                    o = "opacity" == l ? parseInt(100 * parseFloat(s.getStyle(i, l))) : parseInt(s.getStyle(i, l));
                    var h = (t[l] - o) / 8;
                    h = h > 0 ? Math.ceil(h) : Math.floor(h),
                    o != t[l] && (n = !1),
                    "opacity" == l ? (i.style.filter = "alpha(opacity:" + (o + h) + ")",
                    i.style.opacity = (o + h) / 100) : i.style[l] = o + h + "px"
                }
                n && (clearInterval(i.timer),
                e && e())
            }, 30)
        },
        getStyle: function(i, t) {
            return i.currentStyle ? i.currentStyle[t] : getComputedStyle(i, !1)[t]
        }
    }
      , s = {
        init: function() {
            this.headEle = t.getElementsByTagName("head")[0],
            this.bodyEle = t.getElementsByTagName("body")[0],
            this.bows = e.getBow(),
            this.creatBaseCss(),
            this.createBaseDom(),
            this.getBaseData(),
            this.addBaseEvent(),
            this.getImgUrl(),
            this.winPopupRisize()
        },
        creatBaseCss: function() {
            var i = t.createElement("style");
            i.type = "text/css";
            var e = "";
            i.id = "popup_css_x_viewer",
            e += "#popup_x_viewer{ position:fixed;left:0;top:0;width:100%;height:100%;z-index:999999;overflow:auto;display:none;}",
            e += "#popup_x_viewer #meng_x_viewer{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;_background:#999;opacity:0.5;filter:alpha(opacity=50);}",
            e += "#popup_x_viewer #main_x_viewer{position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);width:960px;height:600px;background:#000;border-radius:5px;box-shadow:0 0 5px 2px rgba(255,255,255,0.3);-webkt-box-shadow:0 0 5px 2px rgba(255,255,255,0.3);-moz-box-shadow:0 0 5px 2px rgba(255,255,255,0.5);user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select:none;  }",
            e += "#popup_x_viewer #main_x_viewer.leftcurror{cursor:url(https://www.9game.cn/public/images/pc/pc_9game_public/x_man_viewer/pic_prev.gif),pointer;}",
            e += "#popup_x_viewer #main_x_viewer.rightcurror{cursor:url(https://www.9game.cn/public/images/pc/pc_9game_public/x_man_viewer/pic_next.gif),pointer;}",
            e += "#main_x_viewer #imgTemp_x_viewer{display:none;position:absolute;left:50%;top:50%;border:0;transform: translate(-50%, -50%);}",
            e += "#main_x_viewer #imgLoading_x_viewer{display:block;position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border:0;}",
            e += "#main_x_viewer #close_x_viewer{display:block;position:absolute;top:-15px;right:-15px;width:30px;height:30px;background:url(https://www.9game.cn/public/images/pc/pc_9game_public/x_man_viewer/multipic_ico.png) no-repeat -2px -3px;cursor:pointer;}",
            e += "#main_x_viewer #close_x_viewer:hover{background-position:-2px -44px;}",
            e += "* html #popup_x_viewer{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}",
            e += ".popup_of_x_viewer {overflow: hidden;}",
            e += "#main_x_viewer #listcon_x_viewer{width:100%;height:70px;position:absolute;bottom:0;left:0;background:#2F2F2F;opacity:0;filter:alpha(opacity=0);overflow:hidden;}",
            e += "#main_x_viewer #list_x_viewer{height:100%;margin:0 15px;overflow:hidden;border:1px solid #666;border-width:0 1px;position:relative;}",
            e += "#main_x_viewer #listcon_x_viewer ul{width:100%;height:100%;position:relative;left:0px;}",
            e += "#main_x_viewer #listcon_x_viewer li{width:50px;height:50px;float:left;margin:8px 5px 0 5px;border:2px solid #2F2F2F;cursor:pointer;opacity:0.5;filter:alpha(opacity=50);transition: all 100ms;}",
            e += "#main_x_viewer #listcon_x_viewer li:hover{border:2px solid #f60;opacity:1;filter: alpha(opacity=100);transform: scale(1.2,1.2);-webkit-transform: scale(1.2,1.2);-moz-transform: scale(1.2,1.2);-o-transform: scale(1.2,1.2);-ms-transform: scale(1.2,1.2);}",
            e += "#main_x_viewer #listcon_x_viewer li.on{border:2px solid #f60;opacity:1;filter: alpha(opacity=100);}",
            e += "#main_x_viewer #listcon_x_viewer li img{width:100%;height:100%;}",
            e += "#main_x_viewer #listcon_x_viewer #left_x_viewer,#main_x_viewer #listcon_x_viewer #right_x_viewer{display: block; width: 14px; height: 70px; line-height: 70px; text-align: center; z-index: 2;position:absolute;top:0;cursor: default; color: #696969;}",
            e += "#main_x_viewer #listcon_x_viewer #left_x_viewer{left:0;border-right: 1px solid #222;}",
            e += "#main_x_viewer #listcon_x_viewer #right_x_viewer{right:0;border-left: 1px solid #222;}",
            e += "#main_x_viewer #listcon_x_viewer #left_x_viewer.on,#main_x_viewer #listcon_x_viewer #right_x_viewer.on{color:#fff;font-weight:700;cursor:pointer;}",
            this.headEle.appendChild(i),
            t.getElementById("popup_css_x_viewer"),
            "IE6" == this.bows || "IE7" == this.bows || "IE8" == this.bows ? i.styleSheet.cssText = e : i.innerHTML = e
        },
        createBaseDom: function() {
            var i = t.createElement("div")
              , e = t.createElement("div")
              , s = t.createElement("div")
              , n = t.createElement("img")
              , l = t.createElement("img")
              , o = t.createElement("span")
              , h = t.createElement("div")
              , a = t.createElement("div");
            i.id = "popup_x_viewer",
            e.id = "meng_x_viewer",
            s.id = "main_x_viewer",
            n.id = "imgLoading_x_viewer",
            n.src = "https://www.9game.cn/public/images/pc/pc_9game_public/x_man_viewer/x_img_viewer_loading.gif",
            l.id = "imgTemp_x_viewer",
            h.id = "listcon_x_viewer",
            a.id = "list_x_viewer",
            o.id = "close_x_viewer",
            o.title = "关闭",
            this.bodyEle.appendChild(i),
            i.appendChild(e),
            i.appendChild(s),
            s.appendChild(n),
            s.appendChild(l),
            s.appendChild(o),
            s.appendChild(h),
            h.appendChild(a)
        },
        getBaseData: function() {
            this.nowWidth = 960,
            this.nowHeight = 600,
            this.maxWidth = 960,
            this.maxHieght = 600,
            this.minWidth = 320,
            this.minHeight = 480,
            this.minMargin = 20,
            this.minPadding = 10,
            this.littleWidth = 64,
            this.body = t.getElementsByTagName("body")[0],
            this.popup = t.getElementById("popup_x_viewer"),
            this.main = t.getElementById("main_x_viewer"),
            this.meng = t.getElementById("meng_x_viewer"),
            this.contain = t.getElementById("x_img_viewer"),
            this.img = t.getElementById("imgTemp_x_viewer"),
            this.loading = t.getElementById("imgLoading_x_viewer"),
            this.close = t.getElementById("close_x_viewer"),
            this.imgList = this.contain.getElementsByTagName("img"),
            this.littlecon = t.getElementById("listcon_x_viewer"),
            this.ulcon = t.getElementById("list_x_viewer"),
            this.imgUrlSmall = [],
            this.imgUrl = [],
            this.index = -1,
            this.littleTimer = null
        },
        getImgUrl: function() {
            for (var i = 0; i < this.imgList.length; i++)
                this.imgList[i].getAttribute("x_img_viewer_url") && this.imgList[i].getAttribute("x_img_viewer_url").length > 0 ? this.imgUrl.push(this.imgList[i].getAttribute("x_img_viewer_url")) : this.imgUrl.push(this.imgList[i].src),
                this.imgList[i].title = "点击查看大图",
                this.imgUrlSmall.push(this.imgList[i].src)
        },
        addBaseEvent: function() {
            var i = this;
            if (window.addEventListener) {
                window.addEventListener("resize", function() {
                    i.winPopupRisize()
                }, !1),
                this.meng.addEventListener("click", function() {
                    i.popup.style.display = "none",
                    i.body.className = i.body.className.replace(/popup_of_x_viewer/gi, "")
                }, !1);
                for (var s = 0; s < this.imgList.length; s++)
                    +function(s) {
                        i.imgList[s].addEventListener("click", function() {
                            t.getElementById("listul_x_viewer") || i.littleImg(),
                            i.body.className = i.body.className + " popup_of_x_viewer",
                            i.popup.style.display = "block",
                            e.startMove(i.littlecon, {
                                opacity: 100
                            }),
                            i.imgShow(s)
                        }, !1)
                    }(s);
                this.main.addEventListener("mousemove", function(t) {
                    i.mouseChange(i.sideDef(t))
                }, !1),
                this.main.addEventListener("click", function(t) {
                    i.imgChange(i.sideDef(t))
                }, !1),
                this.close.addEventListener("click", function() {
                    i.body.className = i.body.className.replace(/popup_of_x_viewer/gi, ""),
                    i.popup.style.display = "none"
                }, !1)
            } else {
                window.attachEvent("onresize", function() {
                    i.winPopupRisize()
                }, !1),
                this.meng.attachEvent("onclick", function() {
                    i.body.className = i.body.className.replace(/popup_of_x_viewer/gi, ""),
                    i.popup.style.display = "none"
                }, !1);
                for (var s = 0; s < this.imgList.length; s++)
                    +function(s) {
                        i.imgList[s].attachEvent("onclick", function() {
                            t.getElementById("listul_x_viewer") || i.littleImg(),
                            i.body.className = i.body.className + " popup_of_x_viewer",
                            i.popup.style.display = "block",
                            e.startMove(i.littlecon, {
                                opacity: 100
                            }),
                            i.imgShow(s)
                        }, !1)
                    }(s);
                this.main.attachEvent("onmousemove", function(t) {
                    i.mouseChange(i.sideDef(t))
                }, !1),
                this.main.attachEvent("onclick", function(t) {
                    i.imgChange(i.sideDef(t))
                }, !1),
                this.close.attachEvent("onclick", function() {
                    i.body.className = i.body.className.replace(/popup_of_x_viewer/gi, ""),
                    i.popup.style.display = "none"
                }, !1)
            }
        },
        winPopupRisize: function() {
            var i = this.img.width
              , s = this.img.height
              , n = parseInt(t.documentElement.clientWidth)
              , l = parseInt(document.documentElement.clientHeight)
              , o = 0
              , h = 0
              , a = 0
              , r = 0
              , m = 0;
            n < this.maxWidth + 2 * this.minMargin ? (o = n - 2 * this.minMargin,
            h = this.minMargin,
            this.nowWidth = o) : (o = this.maxWidth,
            h = (n - this.nowWidth) / 2,
            this.nowWidth = this.maxWidth),
            l < this.maxHieght + 2 * this.minMargin ? (height = l - 2 * this.minMargin,
            a = this.minMargin,
            this.nowHeight = height) : (height = this.maxHieght,
            a = (l - this.nowHeight) / 2,
            this.nowHeight = this.maxHieght),
            i > this.nowWidth - 2 * this.minPadding ? (o = i + 2 * this.minPadding,
            n < i + 2 * this.minMargin + 2 * this.minPadding ? (h = this.minMargin,
            r = o + 2 * this.minMargin + "px") : (h = (n - o) / 2,
            r = "100%")) : (h = (n - this.nowWidth) / 2,
            r = "100%"),
            s > this.nowHeight - 2 * this.minPadding ? (height = s + 2 * this.minPadding,
            l < s + 2 * this.minMargin + 2 * this.minPadding ? (a = this.minMargin,
            m = height + 2 * this.minMargin + "px",
            h -= 15) : (a = (l - height) / 2,
            m = "100%")) : (a = (l - this.nowHeight) / 2,
            m = "100%"),
            this.nowWidth = o,
            this.nowHeight = height,
            e.setCss(this.main, {
                width: o + "px",
                // left: h + "px"
            }),
            e.setCss(this.main, {
                height: height + "px",
                // top: a + "px"
            }),
            e.setCss(this.meng, {
                width: r,
                height: m
            });
            var p = (this.nowWidth - this.img.width) / 2
              , c = (this.nowHeight - this.img.height) / 2;
            e.setCss(this.img, {
                // left: p + "px",
                // top: c + "px"
            }),
            this.left && this.hasCtrl()
        },
        imgShow: function(i) {
            var t = this;
            t.index = i,
            this.loading.style.display = "block",
            this.img.style.display = "none",
            this.img.onload = function() {
                this.style.display = "block",
                t.loading.style.display = "none",
                t.winPopupRisize()
            }
            ,
            this.img.src = this.imgUrl[i],
            t.littleImgAct(i)
        },
        sideDef: function(i) {
            var i = i || window.event
              , t = i.clientX + this.popup.scrollLeft
              , s = i.clientY + this.popup.scrollTop
              , n = this.main.offsetLeft
              , l = this.main.offsetTop;
            var wh = document.body.clientWidth;
            return s - l < this.nowHeight - 70
            // ? (this.littleTimer || this.littleHide(), t - n < this.nowWidth / 2 ? 1 : 2)
            ? (this.littleTimer || this.littleHide(), t < wh / 2 ? 1 : 2)
            : (this.main.className = "",
            e.startMove(this.littlecon, {
                opacity: 100
            }),
            clearInterval(this.littleTimer),
            this.littleTimer = null,
            void 0)
        },
        mouseChange: function(i) {
            1 == i ? (this.main.className = "leftcurror",
            this.main.title = "点击上一张") : 2 == i && (this.main.className = "rightcurror",
            this.main.title = "点击下一张")
        },
        imgChange: function(i) {
            var t = -1;
            1 == i ? t = (this.index + this.imgUrl.length - 1) % this.imgUrl.length : 2 == i && (t = (this.index + 1) % this.imgUrl.length),
            i && this.imgShow(t)
        },
        littleImg: function() {
            var i = t.createElement("ul");
            i.id = "listul_x_viewer",
            this.ulcon.appendChild(i),
            this.ulList = t.getElementById("listul_x_viewer");
            for (var e = 0; e < this.imgUrl.length; e++) {
                var s = t.createElement("li")
                  , n = t.createElement("img");
                n.src = this.imgUrlSmall[e],
                s.appendChild(n),
                this.ulList.appendChild(s)
            }
            this.ulList.style.width = (this.imgUrl.length + 1) * this.littleWidth + "px",
            this.littleImgEvent()
        },
        littleImgEvent: function() {
            var i = this;
            this.liList = this.ulList.getElementsByTagName("li");
            for (var t = 0; t < this.liList.length; t++)
                +function(t) {
                    window.addEventListener ? i.liList[t].addEventListener("click", function() {
                        i.imgShow(t),
                        i.littleImgAct(t)
                    }, !1) : i.liList[t].attachEvent("onclick", function() {
                        i.imgShow(t),
                        i.littleImgAct(t)
                    }, !1)
                }(t);
            this.leftRightCtrl()
        },
        littleImgAct: function(i) {
            for (var t = 0; t < this.liList.length; t++)
                this.liList[t].className = t == i ? "on" : ""
        },
        leftRightCtrl: function() {
            var i = this
              , e = t.createElement("a")
              , s = t.createElement("a");
            e.id = "left_x_viewer",
            e.href = "javascript:void(0);",
            e.target = "_self",
            s.id = "right_x_viewer",
            s.href = "javascript:void(0);",
            s.target = "_self",
            this.littlecon.appendChild(e),
            this.littlecon.appendChild(s),
            this.left = t.getElementById("left_x_viewer"),
            this.right = t.getElementById("right_x_viewer"),
            this.left.innerText = "<",
            this.right.innerText = ">",
            window.addEventListener ? (i.left.addEventListener("click", function() {
                i.leftCtrl()
            }, !1),
            i.right.addEventListener("click", function() {
                i.rightCtrl()
            }, !1)) : (i.left.attachEvent("onclick", function() {
                i.leftCtrl()
            }, !1),
            i.right.attachEvent("onclick", function() {
                i.rightCtrl()
            }, !1))
        },
        littleImgLength: function() {
            var i = parseInt(this.ulcon.offsetWidth);
            return parseInt(i / this.littleWidth)
        },
        leftCtrl: function() {
            if (this.ulcon.offsetWidth < this.imgUrl.length * this.littleWidth) {
                var i = parseInt(this.ulList.offsetLeft) + this.littleImgLength() * this.littleWidth;
                i >= 0 && (this.left.className = "",
                i = 0),
                this.right.className = "on",
                e.startMove(this.ulList, {
                    left: i
                })
            }
        },
        rightCtrl: function() {
            if (this.ulcon.offsetWidth < this.imgUrl.length * this.littleWidth) {
                var i = parseInt(this.ulList.offsetLeft) + -1 * this.littleImgLength() * this.littleWidth;
                i < -1 * (this.imgUrl.length - this.littleImgLength()) * this.littleWidth && (i = -1 * (this.imgUrl.length - this.littleImgLength()) * this.littleWidth,
                this.right.className = ""),
                this.left.className = "on",
                e.startMove(this.ulList, {
                    left: i
                })
            }
        },
        hasCtrl: function() {
            var i = this.ulcon.offsetWidth;
            i < this.imgUrl.length * this.littleWidth ? (this.right.className = "on",
            this.left.className = 0 > i ? "on" : "") : (this.left.className = "",
            this.right.className = "")
        },
        littleHide: function() {
            var i = this;
            this.littleTimer = setTimeout(function() {
                e.startMove(i.littlecon, {
                    opacity: 0
                })
            }, 3e3)
        }
    };
    t.getElementById("x_img_viewer") && s.init()
}(window, document);