/**
 * showZoomImg
 * @param  domName image element
 * @param  model  'img'or 'text' 
 * @param  clickEle click element 
 */
function showZoomImg(domName, model, clickEle) {
    var len = 0;
    var domImg; //img dom
    var arrPic = new Array(); 
    var arrName = new Array(); //瀹氫箟涓€涓暟缁刵ame
    var num = 0; //褰撳墠棰勮鐨�
    var numNow = 1; //褰撳墠棰勮搴忓彿,鏈€灏忎负1
    var leftPoint; //鍚戝乏绉诲姩鑼冨洿
    var rightPoint; //鍙崇Щ鍔ㄨ寖鍥�
    var spin_n = 0; //鏃嬭浆瑙掑害
    var zoom_n = 1;//缂╂斁 鏀惧ぇ

    showModel(model); //鍒ゆ柇鏄剧ず鏂瑰紡

    function showModel(model) {
        if (model == "img") { //鍥剧墖鐩存帴鏌ョ湅
            $("body").on('click', clickEle, function () {
                domImg = $(domName);
                console.log(domImg);
                len = domImg.length;
                arrPic = [];
                arrName = [];
                for (var i = 0; i < len; i++) {
                    arrPic[i] = domImg.eq(i).attr("src"); //灏嗘墍鏈塱mg璺緞瀛樺偍鍒版暟缁勪腑
                    if (domImg.eq(i).attr("data-caption")) {
                        arrName[i] = domImg.eq(i).attr("data-caption");
                    } else {
                        arrName[i] = '图片' + (i + 1);
                    }
                }
                var img_index = Number($(this).attr('data-id')); //鑾峰彇鐐瑰嚮鐨勭储寮曞€�
                num = img_index;
                numNow = num + 1;
                addMaskLater(); //娣诲姞寮瑰嚭dom
            });
        } else if (model == "text") {
            $("body").on('click', domName, function () {
                domImg = $(this).children('.zoomImg-hide-box').find('img');
                len = domImg.length;
                if (len < 1) {
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.msg('鏆傛湭涓婁紶璧勬枡鍥剧墖');
                    });
                    return;
                }
                num = 0;
                numNow = 1;
                arrPic = [];
                arrName = [];
                for (var i = 0; i < len; i++) {
                    arrPic[i] = domImg.eq(i).attr("src"); //灏嗘墍鏈塱mg璺緞瀛樺偍鍒版暟缁勪腑
                    if (domImg.eq(i).attr("data-caption")) {
                        arrName[i] = domImg.eq(i).attr("data-caption");
                    } else {
                        arrName[i] = '鍥剧墖' + (i + 1);
                    }

                }

                addMaskLater();
            })
        }
    }

    //缁檅ody娣诲姞寮瑰嚭灞傜殑html
    function addMaskLater() {
        var maskBg =
            "<div class=\"mask-layer\">" +
            "<div class=\"mask-layer-black\"></div>" +
            "<div class=\"mask-layer-container\">" +
            "<div class=\"mask-layer-imgbox\"></div>" +
            "<div class=\"mask-layer-close\"></div>" +
            "<div class=\"img-pre\"></div>" +
            "<div class=\"img-next\"></div>" +
            "<ul class=\"contextmenu\" id='contextmenu'>" +
            "<li>" +
            "<a class=\"downimg\">涓嬭浇鍥剧墖</a>" +
            "</li>" +
            "<li>" +
            "<a class=\"clockwise\">椤烘椂閽堟棆杞�90掳</a>" +
            "</li>" +
            "<li>" +
            "<a class=\"counterClockwise\">閫嗘椂閽堟棆杞�90掳</a>" +
            "</li>" +
            "</ul>" +
            "</div>" +
            "</div>";
        $("body").append(maskBg);

        if (len > 1) {
            showSmall(); //鍔犺浇缂╃暐鍥�
        } else {
            $(".img-pre").css('display', 'none');
            $(".img-next").css('display', 'none');
        }
        showImg(); //鍥剧墖鍔犺浇
        showCtrl(); //鎻掍欢鎿嶄綔
    }

    /*鍔犺浇鍥剧墖 鍙婂浘鐗囨搷浣�*/
    function showImg() {
        $(".mask-layer-imgbox").empty();
        var imgCont = '<div class="mask-layer-imgName">' + arrName[num] + '</div>' +
            '<div class="layer-img-box"><img src="' + arrPic[num] + '" alt=""></div>';
        $(".mask-layer-imgbox").append(imgCont);
        imgInit(); //鍥剧墖鎿嶄綔
    }

    /*鎻掍欢鎿嶄綔*/
    function showCtrl() {
        //涓婁竴寮�
        $(".img-pre").on("click", function () {
            num--;
            if (num == -1) {
                num = len - 1;
            }
            showImg();
            showSmallThis(); //鏄剧ず褰撳墠閫変腑
        });
        //涓嬩竴寮�
        $(".img-next").on("click", function () {
            num++;
            if (num == len) {
                num = 0;
                boxReset();
            }
            showImg();
            showSmallThis(); //鏄剧ず褰撳墠閫変腑
        });
        /*鍏抽棴*/
        $(".mask-layer-close").click(function () {
            $(".mask-layer").remove();
        });

        /*缂╃暐鍥炬搷浣滄柟娉�*/
        if (arrPic.length > 1) {
            showSmallThis(); //鏄剧ず褰撳墠閫変腑
        }
        /*缂╃暐鍥惧綋鍓�*/
        function showSmallThis() { //鏄剧ず褰撳墠閫変腑鐨勫皬鍥�
            $('.mask-small-img').removeClass('onthis');
            $($('.mask-small-img')[num]).addClass('onthis');
            allowShow();
        }

        /*灏忓浘鐐瑰嚮鍒囨崲*/
        $('.mask-small-img').on("click", function () {
            num = $('.mask-small-img').index(this);
            showImg();
            showSmallThis(); //鏄剧ず褰撳墠閫変腑
        });

        /*box-go-left 鍐呭鍚戝彸绉诲姩*/
        $('.box-go-left').on('click', function () {
            boxGoRight();
        });

        $('.box-go-right').on('click', function () {
            boxGoLeft();
        });

        function boxGoLeft(intTime) { //鍚戝乏绉诲姩
            intTime ? intTime : intTime = 1;
            if (leftPoint > 0) {
                $('.small-img-box').animate({
                    left: '-=' + 630 * intTime
                }, 500);
                leftPoint = leftPoint - intTime;
                rightPoint = rightPoint + intTime;
            }
        }

        function boxGoRight() { //鍚戝彸绉诲姩
            if (rightPoint > 0) {
                $('.small-img-box').animate({
                    left: '+=630'
                }, 500);
                leftPoint++;
                rightPoint--;
            }
        }

        function allowShow() { //淇濇寔閫変腑鐨勫浘鐗囧湪瀹瑰櫒涓兘鐪嬪埌
            /*璺熼殢鍒囨崲*/
            var boxLeft = $('.small-content').offset().left; //鐩掑瓙璺濈椤堕儴
            var thisLeft = $('.mask-small-img.onthis').offset().left; //褰撳墠閫変腑鍥剧墖璺濈椤堕儴
            var intTime = Math.floor((thisLeft - boxLeft) / 630);
            if (thisLeft - boxLeft >= 630) {
                boxGoLeft(intTime);

            } else if (thisLeft < boxLeft) {
                boxGoRight();
            } else {
                //console.log('涓嶉渶绉诲姩')
            }
        }
        /*澶嶄綅*/
        function boxReset() {
            $('.small-img-box').animate({
                left: '0'
            }, 500);
            leftPoint = Math.ceil(arrPic.length / 5) - 1;
            rightPoint = 0;
        }
        $(".clockwise").click(function () {
            clockwise(); //椤烘椂閽堟棆杞�
        });
        $(".counterClockwise").click(function () {
            counterClockwise(); //閫嗘椂閽堟棆杞�
        })
        /*椤烘椂閽堟棆杞�*/
        function clockwise() {
            spin_n += 90;
            $(".mask-layer-imgbox img").css({
                "transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
                "-moz-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
                "-ms-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
                "-o-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
                "-webkit-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")"
            });
        };
        /*閫嗘椂閽堟棆杞�*/
        function counterClockwise() {
            spin_n -= 90;
            $(".mask-layer-imgbox img").css({
                "transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
                "-moz-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
                "-ms-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
                "-o-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
                "-webkit-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")"
            });
        }
        rightMenu('.mask-layer-container');

        function rightMenu(dom) {
            // 榧犳爣鍙抽敭浜嬩欢
            $(dom).contextmenu(function (e) {
                // 鑾峰彇绐楀彛灏哄
                var winWidth = $(document).width();
                var winHeight = $(document).height();
                // 榧犳爣鐐瑰嚮浣嶇疆鍧愭爣
                var mouseX = e.clientX;
                var mouseY = e.clientY;
                // ul鏍囩鐨勫楂�
                var menuWidth = $(".mask-layer .contextmenu").width();
                var menuHeight = $(".mask-layer.contextmenu").height();
                // 鏈€灏忚竟缂榤argin(鍏蜂綋绐楀彛杈圭紭鏈€灏忕殑璺濈)
                var minEdgeMargin = 10;
                // 浠ヤ笅鍒ゆ柇鐢ㄤ簬妫€娴媢l鏍囩鍑虹幇鐨勫湴鏂规槸鍚﹁秴鍑虹獥鍙ｈ寖鍥�
                // 绗竴绉嶆儏鍐碉細鍙充笅瑙掕秴鍑虹獥鍙�
                if (mouseX + menuWidth + minEdgeMargin >= winWidth &&
                    mouseY + menuHeight + minEdgeMargin >= winHeight) {
                    menuLeft = mouseX - menuWidth - minEdgeMargin + "px";
                    menuTop = mouseY - menuHeight - minEdgeMargin + "px";
                }
                // 绗簩绉嶆儏鍐碉細鍙宠竟瓒呭嚭绐楀彛
                else if (mouseX + menuWidth + minEdgeMargin >= winWidth) {
                    menuLeft = mouseX - menuWidth - minEdgeMargin + "px";
                    menuTop = mouseY + minEdgeMargin + "px";
                }
                // 绗笁绉嶆儏鍐碉細涓嬭竟瓒呭嚭绐楀彛
                else if (mouseY + menuHeight + minEdgeMargin >= winHeight) {
                    menuLeft = mouseX + minEdgeMargin + "px";
                    menuTop = mouseY - menuHeight - minEdgeMargin + "px";
                }
                // 鍏朵粬鎯呭喌锛氭湭瓒呭嚭绐楀彛
                else {
                    menuLeft = mouseX + minEdgeMargin + "px";
                    menuTop = mouseY + minEdgeMargin + "px";
                };
                // ul鑿滃崟鍑虹幇
                $(".mask-layer .contextmenu").css({
                    "left": menuLeft,
                    "top": menuTop
                }).show();
                // 闃绘娴忚鍣ㄩ粯璁ょ殑鍙抽敭鑿滃崟浜嬩欢
                return false;
            });
            // 鐐瑰嚮涔嬪悗锛屽彸閿彍鍗曢殣钘�
            $(document).click(function () {
                $(".contextmenu").hide();
            });
        }

    }

    /*鍥剧墖鎿嶄綔鏂规硶*/
    function imgInit() {
        zoom_n = 1;//閲嶇疆缂╂斁姣斾緥
        /*鍥剧墖鎷栨嫿*/
        var $div_img = $(".layer-img-box img");
        //缁戝畾榧犳爣宸﹂敭鎸変綇浜嬩欢
        $div_img.bind("mousedown", function (event) {
            event.preventDefault && event.preventDefault(); //鍘绘帀鍥剧墖鎷栧姩鍝嶅簲
            //鑾峰彇闇€瑕佹嫋鍔ㄨ妭鐐圭殑鍧愭爣
            var offset_x = $(this)[0].offsetLeft; //x鍧愭爣
            var offset_y = $(this)[0].offsetTop; //y鍧愭爣
            //鑾峰彇褰撳墠榧犳爣鐨勫潗鏍�
            var mouse_x = event.pageX;
            var mouse_y = event.pageY;
            //缁戝畾鎷栧姩浜嬩欢
            //鐢变簬鎷栧姩鏃讹紝鍙兘榧犳爣浼氱Щ鍑哄厓绱狅紝鎵€浠ュ簲璇ヤ娇鐢ㄥ叏灞€锛坉ocument锛夊厓绱�
            $(".layer-img-box").bind("mousemove", function (ev) {
                // 璁＄畻榧犳爣绉诲姩浜嗙殑浣嶇疆
                var _x = ev.pageX - mouse_x;
                var _y = ev.pageY - mouse_y;
                //璁剧疆绉诲姩鍚庣殑鍏冪礌鍧愭爣
                var now_x = (offset_x + _x) + "px";
                var now_y = (offset_y + _y) + "px";
                //鏀瑰彉鐩爣鍏冪礌鐨勪綅缃�
                $div_img.css({
                    top: now_y,
                    left: now_x
                });
            });
            $(".layer-img-box").bind("mouseup", function () {
                $(".layer-img-box").unbind("mousemove");
            });
        });
        $div_img.bind("mousewheel DOMMouseScroll", function (e) {
            e = e || window.event;
            var delta = e.originalEvent.wheelDelta || e.originalEvent.detail;
            var dir = delta > 0 ? 'down' : 'up';
            zoomImg(this, dir);
            return false;
        });

        function zoomImg(o, delta) {
            if (delta == 'up') {
                zoom_n -= 0.2;
                zoom_n = zoom_n <= 0.2 ? 0.2 : zoom_n;
            } else {
                zoom_n += 0.2;
            }
            $(".mask-layer-imgbox img").css({
                "transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
                "-moz-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
                "-ms-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
                "-o-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")",
                "-webkit-transform": "translate(-50%, -50%) rotate(" + spin_n + "deg) scale(" + zoom_n + ")"
            });
        }
    }

    function showSmall() {
        leftPoint = Math.ceil(arrPic.length / 6) - 1;
        rightPoint = 0;

        $(".mask-layer-imgbox").addClass('has-small');
        var sDom = "<div class='small-content'><div class='small-img-box'></div></div>"
        $(".mask-layer-container").append(sDom);
        for (var i = 0; i < arrPic.length; i++) {
            $('.small-img-box').append('<img class="mask-small-img" src=' + arrPic[i] + '>');
        }
        if (arrPic.length > 6) {
            $(".small-img-box").width(Math.ceil(arrPic.length / 6) * 630);
            $('.small-content').append('<span class="box-go-left"></span><span class="box-go-right"></span>');
        }
    }
}