/**
 * 使用方法
 * 加入放大镜的css样式 style 标签
 <!-- 放大镜效果的style样式 -->
 <style type="text/css">
 .class-zoom{
 border:1px solid #dedede;
 background-color:#ffffff;
 display:none;
 opacity: .75;
 filter: alpha(opacity=75);
 -ms-filter: "alpha(opacity=75)";
 -khtml-opacity: .75;
 -moz-opacity: .75; 
 }
 .class-zoom-img{
 border:1px solid #dedede;
 }
 </style>
 // 放大镜功能插件
 var _img = $(".product-detail-image-big>img").magnifier({
 ratio: 3,
 });
 // 传入的参数在 var defaults = {} 有定义默认参数
 */
// 放大镜插件
(function ($) {
    $.fn.extend({
        "magnifier": function (options) {
            var defaults = {
                beginstyle: function (_this) {
                },
                ratio: 2,
                display: "left",
                margin: 8,
                endstyle: function (_this) {
                },
                mover: function (magnifier, zoom) {
                },
                mout: function (magnifier, zoom) {
                }
            };
            var options = $.extend(defaults, options);
            var _this = this;
            if (typeof options.beginstyle === "function") {
                options.beginstyle(_this);
            }
            // 获取left以及top ，还有 zoom 的宽度根高度 定义zoom的div层
            _this.mouseover(function (e) {
                // 首先删除已有的显示层结构
                $(".class-zoom-img").each(function (key) {
                    $(this).remove()
                });
                $(".class-zoom").each(function (key) {
                    $(this).remove()
                });
                var x = _this.offset().left;
                var y = _this.offset().top;
                var _zoom_width = parseint(_this.width() / options.ratio);
                var _zoom_height = parseint(_this.height() / options.ratio);
                var _img_tag = "<div class=\"class-zoom\"></div>";
                $("body").append(_img_tag);
                var _class_coom = $(".class-zoom");
                _class_coom.css({"position": "absolute", "z-index": "100", "top": (e.pagey - _zoom_height / 2) + "px", "left": (e.pagex - _zoom_width / 2) + "px", "width": parseint(_zoom_width - 1) + "px", "height": parseint(_zoom_height - 1) + "px", "border": "1px solid #bbbbbb", "cursor": "pointer"});  //  
                _class_coom.show();
                // 显示放大镜效果时执行的配置方法
                if (typeof options.mover === "function") {
                    options.mover(_this, _class_coom);
                }
                // 图片显示
                if (_class_coom.next(".class-zoom-img").length > 0) {
                    var _coom_img_f = _class_coom.next(".class-zoom-img");
                } else {
                    var _img_f = "<span class=\"class-zoom-img\"><img width=\"" + parseint(_this.width() * options.ratio) + "\" height=\"" + parseint(_this.height() * options.ratio) + "\" src=\"" + _this.attr("src") + "\" /></span>";
                    _class_coom.after(_img_f);
                    var _coom_img_f = _class_coom.next(".class-zoom-img");
                }
                var _zoomx = parseint(_zoom_width / options.ratio);
                var _zoomy = parseint(_zoom_height / options.ratio);
                if (options.display === "left") {
                    var imgx = x + _this.width() + options.margin;
                    var imgy = y;
                } else if (options.display === "right") {
                    var imgx = x - _this.width() - options.margin;
                    var imgy = y;
                } else {
                    console.log("显示方式只有 左右 两种 (display:\"left\" or \"right\")");
                }
                _coom_img_f.css({"overflow": "hidden", "width": _this.width() + "px", "height": _this.height() + "px", "position": "absolute", "z-index": "100", "left": imgx + "px", "top": imgy + "px", "background-image": "none"/*url(" + _this.attr("src") + ")*/, "background-repeat": "no-repeat"});
                classzoommove(x, y, _zoom_width, _zoom_height, e, _class_coom, _coom_img_f);
                _class_coom.mousemove(function (es) {
                    classzoommove(x, y, _zoom_width, _zoom_height, es, _class_coom, _coom_img_f);
                });
                _class_coom.mouseout(function () {
                    // 显示放大镜效果时执行的配置方法
                    if (typeof options.mout === "function") {
                        options.mout(_this, _class_coom);
                    }
                    $(".class-zoom").each(function (key) {
                        $(this).remove()
                    });
                    $(".class-zoom-img").each(function (key) {
                        $(this).remove()
                    });
                    if (typeof options.endstyle === "function") {
                        options.endstyle(_this);
                    }
                });
                $(document).mousemove(function (dme) {
                    var dmex = dme.pagex;
                    var dmey = dme.pagey;
                    if ((_class_coom.offset().top - 10) > dmey || (_class_coom.height() + _class_coom.offset().top + 10) < dmey) {
                        _class_coom.mouseout();
                        $(document).unbind('mousemove');
                    }
                    if ((_class_coom.offset().left - 10) > dmex || (_class_coom.width() + _class_coom.offset().left + 10) < dmex) {
                        _class_coom.mouseout();
                        $(document).unbind('mousemove');
                    }
                });
            });

            function classzoommove(x, y, _zoom_width, _zoom_height, e, _class_coom, _coom_img_f) {
                if ((y + _this.height() - (_zoom_height / 2)) < e.pagey) {
                    var pointy = y + _this.height() - _zoom_height;
                } else if ((y + (_zoom_height / 2)) > e.pagey) {
                    var pointy = y;
                } else {
                    var pointy = (e.pagey - _zoom_height / 2);
                }
                if ((x + _this.width() - (_zoom_width / 2)) < e.pagex) {
                    var pointx = x + _this.width() - _zoom_width;
                } else if (x + (_zoom_width / 2) > e.pagex) {
                    var pointx = x;
                } else {
                    var pointx = (e.pagex - _zoom_width / 2);
                }
                _class_coom.css({"position": "absolute", "top": pointy + "px", "left": pointx + "px"});
                var positionx = parseint((x - _class_coom.offset().left) * options.ratio);
                var positiony = parseint((y - _class_coom.offset().top) * options.ratio);
                _coom_img_f.children("img").css({"position": "relative", "top": positiony + "px", "left": positionx + "px"});
            }
        }
    });
})(jquery);