;(function (factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        factory(require('jquery'));
    } else {
        factory(jQuery);
    }
})(function ($) {
    'use strict';
    var $W = $(window), $D = $(document), jqEle = null, isMoving = false, isResizing = false;
    var EVENTS = {
        CLICK: 'click',
        KEYDOWN: 'keydown',
        RESIZE: 'resize',
        WHEEL: 'wheel mousewheel DOMMouseScroll',
        MOUSESTART: 'mousedown',
        MOUSEMOVE: 'mousemove',
        MOUSEEND: 'mouseup',
        EVENT_NS: '.magnify'
    };
    var cssSelector = {
        'modal': '.magnify-modal',
        'header': '.magnify-header',
        'footer': '.magnify-footer',
        'toolbar': '.magnify-toolbar',
        'stage': '.magnify-stage',
        'title': '.magnify-title',
        'image': '.magnify-image',
        'close': '.magnify-btn-close',
        'zoomIn': '.magnify-btn-zoomIn',
        'zoomOut': '.magnify-btn-zoomOut',
        'prev': '.magnify-btn-prev',
        'next': '.magnify-btn-next',
        'actualSize': '.magnify-btn-actualSize',
        'rotateLeft': '.magnify-btn-rotateLeft',
        'rotateRight': '.magnify-btn-rotateRight',
        'loader': '.magnify-loader',
        'btn': '.magnify-btn'
    };

    /*
    * draggable 是否支持模态框拖动
    * resizable 是否支持模态框改变弹窗大小
    * movable 是否支持图片拖动
    * keyboard 是否支持键盘操作
    * title 是否显示图片标题
    * Toolbar 底部工具选项
    * i18n 中文说明
    * callbacks 回调函数
    * modalSize 默认弹层大小(width,height)
    * modalOffset 弹层偏移量(x轴,y轴)
    * ratioThreshold 缩放阈值
    * dragHandle 拖拽选择器
    * */

    var defaults = {
        draggable: false,
        resizable: false,
        movable: false,
        keyboard: false,
        title: true,
        Toolbar: [
            'prev',
            'next',
            'rotateLeft',
            'rotateRight',
            'zoomIn',
            'actualSize',
            'zoomOut'
        ],
        i18n: {
            close: '关闭',
            zoomIn: '放大(+)',
            zoomOut: '缩小(-)',
            prev: '上一张(←)',
            next: '下一张(→)',
            actualSize: '实际尺寸(Ctrl+Alt+0)',
            rotateLeft: '左旋转(Ctrl+,)',
            rotateRight: '右旋转(Ctrl+.)'
        },
        modalSize: [800, 600],
        modalOffset: [0, 0],
        ratioThreshold: 0.1,
        minRatio: 0.1,
        maxRatio: 16,
        dragHandle: false,
        beforeOpen: null,
        opened: null,
        beforeClose: null,
        closed: null,
        beforeChange: null,
        changed: null,
        ieTransforms: {
            /*'0': 'progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod="auto expand")',
            '90': 'progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=-1, M21=1, M22=0, SizingMethod="auto expand")',
            '180': 'progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, SizingMethod="auto expand")',
            '270': 'progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod="auto expand")'*/
            '0': 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)',
            '90': 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)',
            '180': 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)',
            '270': 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'
        }
    };

    var magnify = function (ele, opts) {
        this.settings = $.extend(true, {}, defaults, opts);
        if (opts && $.isArray(opts.Toolbar)) {
            if (opts.Toolbar.length !== defaults.Toolbar.length) {
                this.settings.Toolbar = opts.Toolbar;
            } else {
                this.settings.Toolbar = defaults.Toolbar;
            }
        }
        this.$ele = $(ele);
        this.isOpened = false;
        this.isRotated = false;
        this.rotateAngle = 0;
        this.imageData = {};
        this.modalData = {
            width: null,
            height: null,
            left: null,
            top: null
        };
        this.init(ele);
    };

    magnify.prototype = {
        init: function (ele) {
            var imgSrc = getImgSrc(ele);
            this.groupName = null;
            var currentGroupName = $(ele).data('group');
            var groupList = $D.find('[data-group="' + currentGroupName + '"]');
            if (currentGroupName !== undefined) {
                this.groupName = currentGroupName;
                this.getImgGroup(groupList, imgSrc);
            } else {
                this.getImgGroup(jqEle.not('[data-group]'), imgSrc);
            }
            this.open();
            this.loadImg(imgSrc);
            if (this.settings.draggable) {
                this.draggable(this.$magnify, this.dragHandle, cssSelector.btn)
            }
            if (this.settings.movable) {
                this.movable(this.$stage, this.$image);
            }
            if (this.settings.resizable) {
                this.resizable(this.$magnify, this.$stage, this.$image, this.settings.modalSize);
            }
        },
        open: function () {
            if ($(cssSelector.modal)) {
                $(cssSelector.modal).remove();
            }
            this.build();
            this.triggerHook('beforeOpen', this.$ele);
            $('body').append(this.$magnify);
            this.addEvents();
            this.setModalPos(this.$magnify);
            this.triggerHook('opened', this.$ele);
        },
        build: function () {
            var _html = this.createDOM();
            var $magnify = $(_html);
            //获取所有magnify DOM元素
            this.$magnify = $magnify;
            this.$header = $magnify.find(cssSelector.header);
            this.$footer = $magnify.find(cssSelector.footer);
            this.$toolbar = $magnify.find(cssSelector.toolbar);
            this.$stage = $magnify.find(cssSelector.stage);
            this.$title = $magnify.find(cssSelector.title);
            this.$image = $magnify.find(cssSelector.image);
            this.$close = $magnify.find(cssSelector.close);
            this.$zoomIn = $magnify.find(cssSelector.zoomIn);
            this.$zoomOut = $magnify.find(cssSelector.zoomOut);
            this.$prev = $magnify.find(cssSelector.prev);
            this.$next = $magnify.find(cssSelector.next);
            this.$fullScreen = $magnify.find(cssSelector.fullScreen);
            this.$actualSize = $magnify.find(cssSelector.actualSize);
            this.$rotateLeft = $magnify.find(cssSelector.rotateLeft);
            this.$rotateRight = $magnify.find(cssSelector.rotateRight);

            if (!this.settings.dragHandle || this.settings.dragHandle === cssSelector.modal) {
                this.dragHandle = this.$magnify;
            } else {
                this.dragHandle = this.$magnify.find(this.settings.dragHandle);
            }
        },
        createDOM: function () {
            var btnTpl = {
                zoomIn: '<a href="javascript:void(0)" class="magnify-btn magnify-btn-zoomIn" title="' + this.settings.i18n.zoomIn + '"></a>',
                zoomOut: '<a href="javascript:void(0)" class="magnify-btn magnify-btn-zoomOut" title="' + this.settings.i18n.zoomOut + '"></a>',
                prev: '<a href="javascript:void(0)" class="magnify-btn magnify-btn-prev" title="' + this.settings.i18n.prev + '"></a>',
                next: '<a href="javascript:void(0)" class="magnify-btn magnify-btn-next" title="' + this.settings.i18n.next + '"></a>',
                actualSize: '<a href="javascript:void(0)" class="magnify-btn magnify-btn-actualSize" title="' + this.settings.i18n.actualSize + '"></a>',
                rotateLeft: '<a href="javascript:void(0)" class="magnify-btn magnify-btn-rotateLeft" title="' + this.settings.i18n.rotateLeft + '"></a>',
                rotateRight: '<a href="javascript:void(0)" class="magnify-btn magnify-btn-rotateRight" title="' + this.settings.i18n.rotateRight + '"></a>'
            };
            return '<div class="magnify-modal">' +
                '<div class="magnify-header">' + this.createTitle() +
                '<a href="javascript:void(0)" class="magnify-btn-close" title="' + this.settings.i18n.close + '"></a>' +
                '</div>' +
                '<div class="magnify-stage"><img src="" alt="" class="magnify-image" style="transform: rotate(0deg); transform-origin: 50% 50% 0px;"></div>' +
                '<div class="magnify-footer"><div class="magnify-toolbar">' + this.createBtn(this.settings.Toolbar, btnTpl) + '</div></div>' +
                '</div>';
        },
        createTitle: function () {
            return this.settings.title ? '<div class="magnify-title"></div>' : '';
        },
        createBtn: function (toolbar, btns) {
            var btnStr = '';
            $.each(toolbar, function (index, item) {
                btnStr += btns[item];
            });
            return btnStr;
        },
        setModalSize: function () {
            var self = this;
            var $modal = this.$magnify;
            var winWidth = $W.width();
            var winHeight = $W.height();

            var newLeft = (winWidth - self.modalData.width) / 2;
            var newTop = (winHeight - self.modalData.height) / 2;
            $modal.css({
                left: newLeft,
                top: newTop
            });
            $.extend(self.modalData, {
                left: newLeft,
                top: newTop
            })
        },
        setModalPos: function (modal) {
            var winWidth = $W.width(),
                winHeight = $W.height(),
                modalSize = this.settings.modalSize,
                modalWidth = modalSize[0],
                modalHeight = modalSize[1];
            modal.css({
                width: modalWidth,
                height: modalHeight,
                left: (winWidth - modalWidth) / 2,
                top: (winHeight - modalHeight) / 2
            });
            $.extend(this.modalData, {
                width: modalWidth,
                height: modalHeight,
                left: (winWidth - modalWidth) / 2,
                top: (winHeight - modalHeight) / 2
            });
            this.isOpened = true;
        },
        setImageSize: function (img, tag) {
            var stageData = {
                w: this.$stage.width(),
                h: this.$stage.height()
            };
            var scale = 1;
            if (!this.isRotated) {
                scale = Math.min(stageData.w / img.width, stageData.h / img.height, 1);
            } else {
                scale = Math.min(stageData.w / img.height, stageData.h / img.width, 1);
            }

          /*  this.$image.css({
                width: Math.ceil(img.width * scale),
                height: Math.ceil(img.height * scale),
                left: (stageData.w - Math.ceil(img.width * scale)) / 2,
                top: (stageData.h - Math.ceil(img.height * scale)) / 2
            });*/

            //console.log(stageData.w, this.$image.width(), img.width);


            //如果进行了旋转
            if (this.isRotated && tag === 'jump') {
                this.$image.css({
                    left: (stageData.w - this.$image.width()) / 2,
                    top: (stageData.h - this.$image.height()) / 2
                })
            } else {
                this.$image.css({
                    width: Math.ceil(img.width * scale),
                    height: Math.ceil(img.height * scale),
                    left: (stageData.w - Math.ceil(img.width * scale)) / 2,
                    top: (stageData.h - Math.ceil(img.height * scale)) / 2
                });
            }

            $.extend(this.imageData, {
                width: img.width * scale,
                height: img.height * scale,
                left: (stageData.w - img.width * scale) / 2,
                top: (stageData.h - img.height * scale) / 2
            });
            setGrabCursor(
                {w: this.$image.width(), h: this.$image.height()},
                {w: this.$stage.width(), h: this.$stage.height()},
                this.$stage,
                this.isRotated
            );

            this.$magnify.find(cssSelector.loader).remove();
            this.$image.fadeIn();

            //console.log(this.$image);
        },
        loadImg: function (imgSrc, tag) {
            var self = this;
            var loadHTML = '<div class="magnify-loader"></div>';
            this.$magnify.append(loadHTML);
            self.$image.attr('src', imgSrc);
            //imgSrc = './images/b1.png';
            imgSrc = './images/b1.jpg';
            preLoadImg(imgSrc, function (img) {
                self.imageData = {
                    originalWidth: img.width,
                    originalHeight: img.height
                };
                self.setImageSize(img, tag);

            }, function () {
                self.$magnify.find(cssSelector.loader).remove();
            });

            if (this.settings.title) {
                this.setImgTitle();
            }
        },
        getImgGroup: function (list, imgSrc) {
            var self = this;
            self.groupData = [];
            $(list).each(function (index, item) {
                var src = getImgSrc(item);
                self.groupData.push({
                    src: src,
                    caption: $(item).data('caption')
                });
                if (imgSrc === src) {
                    self.groupIndex = index;
                }
            })
        },
        setImgTitle: function () {
            var index = this.groupIndex;
            var caption = this.groupData[index].caption;
            caption = caption ? caption : '';
            this.$title.text(caption);
        },
        triggerHook: function (e, data) {
            if (typeof this.settings[e] === 'function') {
                typeof this.settings[e].call(this, $.isArray(data) ? data : [data], this.$magnify);
            }
        },
        addEvents: function () {
            var self = this;
            this.$close.off(EVENTS.CLICK + EVENTS.EVENT_NS).on(EVENTS.CLICK + EVENTS.EVENT_NS, function () {
                self.close();
            });
            this.$prev.off(EVENTS.CLICK + EVENTS.EVENT_NS).on(EVENTS.CLICK + EVENTS.EVENT_NS, function () {
                self.jump(-1);
            });
            this.$next.off(EVENTS.CLICK + EVENTS.EVENT_NS).on(EVENTS.CLICK + EVENTS.EVENT_NS, function () {
                self.jump(1);
            });
            this.$zoomIn.off(EVENTS.CLICK + EVENTS.EVENT_NS).on(EVENTS.CLICK + EVENTS.EVENT_NS, function () {
                self.zoom(self.settings.ratioThreshold * 3, {x: self.$stage.width() / 2, y: self.$stage.height() / 2});
            });
            this.$zoomOut.off(EVENTS.CLICK + EVENTS.EVENT_NS).on(EVENTS.CLICK + EVENTS.EVENT_NS, function () {
                self.zoom(-self.settings.ratioThreshold * 3, {x: self.$stage.width() / 2, y: self.$stage.height() / 2});
            });
            this.$actualSize.off(EVENTS.CLICK + EVENTS.EVENT_NS).on(EVENTS.CLICK + EVENTS.EVENT_NS, function () {
                self.actualSize();
            });
            this.$rotateLeft.off(EVENTS.CLICK + EVENTS.EVENT_NS).on(EVENTS.CLICK + EVENTS.EVENT_NS, function () {
                self.rotate(-90);
            });
            this.$rotateRight.off(EVENTS.CLICK + EVENTS.EVENT_NS).on(EVENTS.CLICK + EVENTS.EVENT_NS, function () {
                self.rotate(90);
            });
            this.$stage.off(EVENTS.WHEEL + EVENTS.EVENT_NS).on(EVENTS.WHEEL + EVENTS.EVENT_NS, function (e) {
                self.wheel(e);
            });
            $D.off(EVENTS.KEYDOWN + EVENTS.EVENT_NS).on(EVENTS.KEYDOWN + EVENTS.EVENT_NS, function (e) {
                self.keyDown(e);
            });
            $W.on(EVENTS.RESIZE + EVENTS.EVENT_NS, function () {
                self.resize();
            });
        },
        close: function () {
            this.triggerHook('beforeClose', this.$ele);
            this.$magnify.remove();
            this.isRotated = false;
            this.isOpened = false;
            this.rotateAngle = 0;
            $D.off(EVENTS.KEYDOWN + EVENTS.EVENT_NS);
            $W.off(EVENTS.RESIZE + EVENTS.EVENT_NS);
            this.triggerHook('closed', this.$ele);
        },
        wheel: function (e) {
            stopPre(e);
            var delta = 1;
            if (e.originalEvent.deltaY) {
                delta = e.originalEvent.deltaY > 0 ? 1 : -1;
            } else if (e.originalEvent.wheelDelta) {
                delta = -e.originalEvent.wheelDelta / 120;
            } else if (e.originalEvent.detail) {
                delta = e.originalEvent.detail > 0 ? 1 : -1;
            }
            var ratio = -delta * this.settings.ratioThreshold;
            var pointer = {
                x: e.originalEvent.clientX - this.$stage.offset().left + $D.scrollLeft(),
                y: e.originalEvent.clientY - this.$stage.offset().top + $D.scrollTop()
            };
            this.zoom(ratio, pointer, e);
        },
        zoom: function (ratio, origin) {
            ratio = ratio < 0 ? (1 / (1 - ratio)) : (1 + ratio);
            if (ratio > 0.95 && ratio < 1.05) {
                ratio = 1;
            }
            //ratio = this.$image.width() / this.imageData.originalWidth * ratio;
            //ratio = this.$image.width() / this.imageData.originalWidth * ratio;
            ratio = parseInt(this.$image[0].style.width) / this.imageData.originalWidth * ratio;
            ratio = Math.max(ratio, this.settings.minRatio);
            ratio = Math.min(ratio, this.settings.maxRatio);

        
            var $image = this.$image;
            var $stage = this.$stage;
            var imgData = {
                w: this.imageData.width,
                h: this.imageData.height,
                x: this.imageData.left,
                y: this.imageData.top
            };
            var stageData = {
                w: $stage.width(),
                h: $stage.height(),
                x: $stage.offset().left,
                y: $stage.offset().top
            };

            var newWidth = this.imageData.originalWidth * ratio;
            var newHeight = this.imageData.originalHeight * ratio;
            var newLeft = origin.x - (origin.x - imgData.x) / imgData.w * newWidth;
            var newTop = origin.y - (origin.y - imgData.y) / imgData.h * newHeight;


            var gt = !this.isRotated ? 0 : (newWidth - newHeight) / 2;
            var imgNewWidth = !this.isRotated ? newWidth : newHeight;
            var imgNewHeight = !this.isRotated ? newHeight : newWidth;
            var offsetX = stageData.w - newWidth;
            var offsetY = stageData.h - newHeight;

            //先调整图片大小
            $image.css({
                width: Math.round(newWidth),
                height: Math.round(newHeight)
            });

            //再调整图片位置
            //获取当前的大小，如果有旋转，会有变化
            var imgCurrWidth = $image.width(); 
            var imgCurrHeight = $image.height();
            if (imgNewWidth <= stageData.w) {
                //缩小了 或者 没变
                newLeft = (stageData.w - imgCurrWidth) / 2;
            } else {
                //放大了
                newLeft = -(imgCurrWidth - stageData.w) / 2;

            }
            if (imgNewHeight <= stageData.h) {
                newTop = (stageData.h - imgCurrHeight) / 2;
            } else {
                newTop = -(imgCurrHeight - stageData.h) / 2;
            }


            $image.css({
                left: Math.round(newLeft),
                top: Math.round(newTop)
            })

           /* if (imgNewHeight <= stageData.h) {
                // 缩小了
                newTop = (stageData.h - newHeight) / 2;
            } else {
                newTop = newTop > gt ? gt : (newTop > (offsetY - gt) ? newTop : (offsetY - gt));
            }
            if (imgNewWidth <= stageData.w) {
                newLeft = (stageData.w - newWidth) / 2;
            } else {
                newLeft = newLeft > -gt ? -gt : (newLeft > (offsetX + gt) ? newLeft : (offsetX + gt));
            }

            $image.css({
                width: Math.round(newWidth),
                height: Math.round(newHeight),
                left: Math.round(newLeft),
                top: Math.round(newTop)
            });*/
            $.extend(this.imageData, {
                width: newWidth,
                height: newHeight,
                left: newLeft,
                top: newTop
            });

            setGrabCursor(
                {w: Math.round(imgNewWidth), h: Math.round(imgNewHeight)},
                {w: stageData.w, h: stageData.h},
                this.$stage
            );
        },
        jump: function (n) {
            var groupLen = this.groupData.length;
            if (n > 0) {
                if (this.groupIndex + n >= groupLen) {
                    n = 0
                } else {
                    n = this.groupIndex + 1
                }
            }
            if (n < 0) {
                if (this.groupIndex + n < 0) {
                    n = groupLen + n;
                } else {
                    n = this.groupIndex + n
                }
            }
            this.groupIndex = n;
            this.triggerHook('beforeChange', n);
            this.loadImg(this.groupData[n].src, 'jump');
            this.triggerHook('changed', n);
        },
        actualSize: function () {
            this.isRotated = false;
            this.rotateAngle = 0;
            this.$image.css({
                transform: 'rotate(0deg)'
            });
            //兼容IE8
            var useIeTransforms = function () {
                var isIE = false;
                if (navigator.appName === 'Microsoft Internet Explorer') {
                    if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) {
                        isIE = true
                    }
                }
                return isIE;
            }();
            if (useIeTransforms) {
                this.$image.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)');
            }

            this.loadImg(this.groupData[this.groupIndex].src);
        },
        rotate: function (angle) {
            var self = this;
            this.rotateAngle = this.rotateAngle + angle;
            this.isRotated = (this.rotateAngle / 90) % 2 !== 0;
            self.transformDeg(this.$image,self.rotateAngle);
        },
        transformDeg: function (currentImg, currentDeg) {
            var unit = this;
            var useIeTransforms = function () {
                var isIE = false;
                if (navigator.appName === 'Microsoft Internet Explorer') {
                    if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) {
                        isIE = true
                    }
                }
                return isIE;
            }();
            var cssVal = 'rotate(' + currentDeg + 'deg)';

            var _style = ['', '-webkit-', '-moz-', '-o-', '-ms-'];
            for (var i = 0; i < _style.length; i++) {
                var prefix = _style[i];
                currentImg.css(prefix + 'transform', cssVal);

            }


            if (useIeTransforms) {
                var _IeStyle = ['-ms-', ''];
                for (var j = 0; j < _IeStyle.length; j++) {
                    var IEprefix = _IeStyle[j];
                    // ie8下旋转角度大于270度时就失效了
                    if(Math.abs(currentDeg)>=360){
                        currentDeg = currentDeg%360
                    }
                   
                    currentImg.css(IEprefix + 'filter', unit.settings.ieTransforms[Math.abs(currentDeg)]);

                   /* var imgHeightStr = currentImg[0].style.height;
                    var imgWidthStr = currentImg[0].style.width;
                    var imgHeightNum = parseInt(imgHeightStr.substr(0, imgHeightStr.indexOf('px')));
                    var imgWidthNum = parseInt(imgWidthStr.substr(0, imgWidthStr.indexOf('px')));*/
                    
                    //这样获取的实际的大小， 旋转后相应的宽高会变
                    var imgHeightNum = currentImg.height();
                    var imgWidthNum = currentImg.width();

                    if (defaults.modalSize[0] >= imgHeightNum) {
                        //缩小了 或者没变
                        currentImg.css(IEprefix+'left', defaults.modalSize[0]/2 - imgWidthNum/2 + 'px');
                        currentImg.css(IEprefix+'top', defaults.modalSize[1]/2 - imgHeightNum/2 + 'px');
                    } else {
                        //放大了
                        currentImg.css(IEprefix+'left', -(imgWidthNum - defaults.modalSize[0]) / 2 + 'px')
                        currentImg.css(IEprefix+'top', -(imgHeightNum - defaults.modalSize[1]) / 2 + 'px')
                    }
                   
                    /*if(Math.abs(currentDeg) == 90 || Math.abs(currentDeg) == 270 ){
                            if(defaults.modalSize[1]>imgWidthNum){
                                //缩小了
                                currentImg.css(IEprefix+'left',(defaults.modalSize[1])/2 - imgWidthNum/2+'px');
                            }else if(defaults.modalSize[1]<=imgWidthNum){
                                //放大了
                                currentImg.css(IEprefix+'top',-(imgWidthNum-defaults.modalSize[1])/2+'px');
                                currentImg.css(IEprefix+'left',(defaults.modalSize[0])/2 - imgHeightNum/2+'px');
                            }
                    }else if(Math.abs(currentDeg) == 0 || Math.abs(currentDeg) == 180){
                        if(imgHeightNum > defaults.modalSize[0]){
                            currentImg.css(IEprefix+'left',(defaults.modalSize[0])/2 - imgHeightNum/2+'px');
                            currentImg.css(IEprefix+'top',-(imgHeightNum - defaults.modalSize[1])/2+'px');
                        }else if(imgHeightNum <= defaults.modalSize[1]){
                            currentImg.css(IEprefix+'left',(defaults.modalSize[0])/2 - imgWidthNum/2+'px');
                            currentImg.css(IEprefix+'top',(defaults.modalSize[1])/2 - imgHeightNum/2+'px');
                        }
                    }*/

                }

            }
        },



        resize: function () {
            var self = this;
            return throttle(function () {
                self.setModalSize()
            }, 500);
        },
        keyDown: function (e) {
            var self = this;
            if (!this.settings.keyboard) return false;
            var keyCode = e.keyCode || e.which || e.charCode;
            var ctrlKey = e.ctrlKey || e.metaKey;
            var altKey = e.altKey || e.metaKey;
            switch (keyCode) {
                case 37:
                    self.jump(-1);
                    break;
                case 39:
                    self.jump(1);
                    break;
                case 187:
                    self.zoom(self.settings.ratioThreshold * 3, {
                        x: self.$stage.width() / 2,
                        y: self.$stage.height() / 2
                    });
                    break;
                case 189:
                    self.zoom(-self.settings.ratioThreshold * 3, {
                        x: self.$stage.width() / 2,
                        y: self.$stage.height() / 2
                    });
                    break;
                case 61:
                    self.zoom(self.settings.ratioThreshold * 3, {
                        x: self.$stage.width() / 2,
                        y: self.$stage.height() / 2
                    });
                    break;
                case 173:
                    self.zoom(-self.settings.ratioThreshold * 3, {
                        x: self.$stage.width() / 2,
                        y: self.$stage.height() / 2
                    });
                    break;
                case 188:
                    if (ctrlKey) {
                        self.rotate(-90);
                    }
                    break;
                case 190:
                    if (ctrlKey) {
                        self.rotate(90);
                    }
                    break;
                case 48:
                    if (ctrlKey && altKey) {
                        self.actualSize();
                    }
                    break;
            }
        },
        movable: function (stage, image) {
            var self = this,
                isDragging = false,
                startX = 0,
                startY = 0,
                left = 0,
                top = 0,
                widthDiff = 0,
                heightDiff = 0,
                gt = 0;
            var dragStart = function (e) {
                stopPre(e);
                var imgWidth = $(image).width();
                var imgHeight = $(image).height();
                var stageWidth = $(stage).width();
                var stageHeight = $(stage).height();

                startX = e.clientX;
                startY = e.clientY;
                gt = !self.isRotated ? 0 : (imgWidth - imgHeight) / 2;

                widthDiff = !self.isRotated ? imgWidth - stageWidth : imgHeight - stageWidth;
                heightDiff = !self.isRotated ? imgHeight - stageHeight : imgWidth - stageHeight;

                isDragging = widthDiff > 0 || heightDiff > 0 ? true : false;
                isMoving = widthDiff > 0 || heightDiff > 0 ? true : false;

                left = $(image).position().left - gt;
                top = $(image).position().top + gt;
                if (stage.hasClass('is-grab')) {
                    $('html,body,.magnify-modal,.magnify-stage,.magnify-btn').addClass('is-grabbing');
                }
                $D.on(EVENTS.MOUSEMOVE + EVENTS.EVENT_NS, dragMove).on(EVENTS.MOUSEEND + EVENTS.EVENT_NS, dragEnd);
            };
            var dragMove = function (e) {
                stopPre(e);
                if (isDragging) {
                    var endX = e.clientX, endY = e.clientY;
                    var relativeX = endX - startX, relativeY = endY - startY;
                    var newLeft = relativeX + left, newTop = relativeY + top;

                    if (heightDiff > 0) {
                        if (relativeY + top > gt) {
                            newTop = gt;
                        } else if (relativeY + top < -heightDiff + gt) {
                            newTop = -heightDiff + gt;
                        }
                    } else {
                        newTop = top;
                    }

                    if (widthDiff > 0) {
                        if (relativeX + left > -gt) {
                            newLeft = -gt;
                        } else if (relativeX + left < -widthDiff - gt) {
                            newLeft = -widthDiff - gt;
                        }
                    } else {
                        newLeft = left;
                    }

                    $(image).css({
                        left: newLeft,
                        top: newTop
                    });
                    $.extend(self.imageData, {
                        left: newLeft,
                        top: newTop
                    });
                }
            };
            var dragEnd = function () {
                $D.off(EVENTS.MOUSEMOVE + EVENTS.EVENT_NS, dragMove).off(EVENTS.MOUSEEND + EVENTS.EVENT_NS, dragEnd);
                isDragging = false;
                isMoving = false;
                $('html,body,.magnify-modal,.magnify-stage,.magnify-btn').removeClass('is-grabbing');
            };
            $(stage).on(EVENTS.MOUSESTART + EVENTS.EVENT_NS, dragStart);
        },
        draggable: function (modal, dragHandle, dragCancel) {
            var isDragging = false;
            var startX = 0, startY = 0, left = 0, top = 0;
            var dragStart = function (e) {
                e = e || window.event;
                var cancelElem = $(e.target).closest(dragCancel);
                if (cancelElem.length) {
                    return true;
                }
                isDragging = true;
                startX = e.clientX;
                startY = e.clientY;
                left = $(modal).offset().left;
                top = $(modal).offset().top;
                $D.on(EVENTS.MOUSEMOVE + EVENTS.EVENT_NS, dragMove).on(EVENTS.MOUSEEND + EVENTS.EVENT_NS, dragEnd);
            };
            var dragMove = function (e) {
                stopPre(e);
                if (isDragging && !isMoving && !isResizing) {
                    var endX = e.clientX;
                    var endY = e.clientY;
                    var relativeX = endX - startX;
                    var relativeY = endY - startY;
                    $(modal).css({
                        left: relativeX + left,
                        top: relativeY + top
                    })
                }
            };
            var dragEnd = function () {
                $D.off(EVENTS.MOUSEMOVE + EVENTS.EVENT_NS, dragMove).off(EVENTS.MOUSEEND + EVENTS.EVENT_NS, dragEnd);
                isDragging = false;
            };
            $(dragHandle).on(EVENTS.MOUSESTART + EVENTS.EVENT_NS, dragStart);
        }
    };
    $.fn.Magnify = function (options) {
        jqEle = $(this);
        var opts = $.extend(true, {}, defaults, options);
        jqEle.off(EVENTS.CLICK + EVENTS.EVENT_NS).on(EVENTS.CLICK + EVENTS.EVENT_NS, function (e) {
            stopPro(e);
            stopPre(e);
            $(this).data('magnify', new magnify(this, opts));
        });
        return jqEle;
    };

    // 阻止冒泡
    function stopPro(event) {
        event = event || window.event;
        try {
            event.stopPropagation();
        } catch (e) {
            event.cancelBubble = true;
        }
    }

    // 阻止浏览器默认行为
    function stopPre(event) {
        event = event || window.event;
        try {
            event.preventDefault();
        } catch (e) {
            event.returnValue = false;
        }
    }

    // 获取图片地址
    function getImgSrc(ele) {
        return $(ele).data('src') || $(ele).attr('href');
    }

    // 获取图片原始属性
    function preLoadImg(src, success, error) {
        var img = new Image();
        img.onload = function () {
            success(img);
        };
        img.onerror = function () {
            error(img)
        };
        img.src = src;
    }

    function setGrabCursor(imageData, stageData, stage, isRotated) {
        var imgWidth = !isRotated ? imageData.w : imageData.h;
        var imgHeight = !isRotated ? imageData.h : imageData.w;

        if (imgHeight > stageData.h || imgWidth > stageData.w) {
            stage.addClass('is-grab');
        }
        if (imgHeight <= stageData.h && imgWidth <= stageData.w) {
            stage.removeClass('is-grab')
        }
    }

    function throttle(fn, delay) {
        var timer = null;
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    }

});