var CSS = '.img_view_box{width:170px;border:1px solid #e7e7eb;}\
    .img_view_box .img_box{height:100px;line-height:100px;text-align:center;}\
    .img_view_box img{max-width:100%;max-height:100%;width:auto;height:auto;vertical-align:middle;}\
    .img_view_box p{text-align:center;border-top:1px solid #e7e7eb;height:30px;line-height:30px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 10px;cursor:pointer;}\
    .img_view_box p:hover{background-color:#ececec;}\
    #img_viewer{position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,0.7);text-align:center;z-index:999999;}\
    #img_viewer .img_viewer_box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);margin-top:-20px;}\
    #img_viewer .compare_text{color:#fff;font-size:16px;margin-top:10px;}\
    #img_viewer .img_wrap{background-color:#fff;transition:all 0.2s linear;-o-transition:transform 0.2s linear;-ms-transition:transform 0.2s linear;-moz-transition:transform 0.2s linear;-webkit-transition:transform 0.2s linear;transform-origin:top;transform-origin:center center;position:relative;cursor:move;}\
    #img_viewer .img_viewer_box img{max-width:100%;max-height:100%;-webkit-user-drag: none;}\
    #img_viewer .img_viewer_opr{position:fixed;bottom:0;left:50%;margin-left:-130px;background-color:#000;font-size:0;}\
    #img_viewer .img_viewer_opr .glyphicon{font-size:26px;color:#fff;cursor:pointer;}\
    #img_viewer .img-opr + .img-opr{margin-left:15px;}\
    #img_viewer .img-opr{display:inline-block;width:40px;height:40px;padding-top:7px;}\
    #img_viewer .img-opr:hover{background-color:#4C4C4C;}';

$('head').append('<style>'+CSS+'</style>');

var rotateDeg = 0;//鏃嬭浆瑙掑害
var scaleTime = 1;//鏀惧ぇ鍊嶆暟


function imgViewer(option) {
    this.el = option.el;
    this.url = option.url;
    this.imgs = option.imgs;
    this.title = option.title || '鏌ョ湅鍥剧墖';
    this.compare = option.compare || '';
    rotateDeg = 0;
    scaleTime = 1;

    if (this.el !== undefined) {
        $(this.el).html('<div class="img_view_box">\
            <div class="img_box"><img src="'+this.url+'"></div>\
            <p data-url="'+this.url+'">'+this.title+'</p>\
        </div>');
    }
}

$.extend(imgViewer.prototype, {
    show: function(){
        var winHeight = $(window).height();
        $('body').append('<div id="img_viewer">\
            <div class="img_viewer_box">\
                <div class="img_wrap"><img src="'+this.url+'" style="max-width:'+(winHeight-40)+'px;max-height:'+(winHeight-40)+'px;"></div>\
            </div>\
            <p class="compare_text">'+this.compare+'</p>\
            <div class="img_viewer_opr" style="top:'+(winHeight-40)+'px;">\
                <a href="javascript:;" class="img-opr img-backward hide"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a>\
                <a href="javascript:;" class="img-opr img-rotate"><span class="glyphicon glyphicon-repeat" aria-hidden="true"></span></a>\
                <a href="javascript:;" class="img-opr img-in"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>\
                <a href="javascript:;" class="img-opr img-out"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></a>\
                <a class="img-opr img-download" target="_blank" href="'+this.url+'"><span class="glyphicon glyphicon-save" aria-hidden="true"></span></a>\
                <a href="javascript:;" class="img-opr img-forward hide"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>\
                <a href="javascript:;" class="img-opr img-close"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>\
            </div>\
        </div>');

        if(!!this.imgs && this.imgs.length > 1){
            $('#img_viewer').find('.img_viewer_opr').css('margin-left', '-170px');
            $('#img_viewer').find('.img-backward').removeClass('hide');
            $('#img_viewer').find('.img-forward').removeClass('hide');

            $('#img_viewer').data('imgs', this.imgs);

            $('#img_viewer').data('compare', this.compare);
        }
    },
    hide: function(){
        $('#img_viewer').remove();
    }
});

$.imgView = function(option){
    return new imgViewer(option);
};

$(document).on('click', '.img_view_box p', function(){
    var _url = $(this).data('url');
    $.imgView({ url: _url }).show();
});

$(document).on('click', '#img_viewer .img-backward', function(){
    var imgs = $('#img_viewer').data('imgs');
    var img_url = $('#img_viewer').find('img').attr('src');

    if(!!imgs) {
        var idx = 0;
        for (var i = 0, len = imgs.length; i < len; i++) {
            if(imgs[i] == img_url){
                idx = i;
                break;
            }
        }

        if(idx > 0){
            idx--;
            var url = imgs[idx];
            $('#img_viewer').remove();
            $.imgView({url:url, imgs: imgs, compare:$('#img_viewer').data('compare')}).show();
        }else if(idx == 0){
            //濡傛灉褰撳墠鍥剧墖鏄涓€寮狅紝閭ｄ箞鐐逛笂涓€寮犲氨鏄浘鐗囨暟缁勭殑鏈€鍚庝竴寮
            idx = len;
            var url = imgs[idx-1];
            $('#img_viewer').remove();
            $.imgView({url:url, imgs: imgs, compare:$('#img_viewer').data('compare')}).show();
        }
    }
});

$(document).on('click', '#img_viewer .img-forward', function() {
    var imgs = $('#img_viewer').data('imgs');
    var img_url = $('#img_viewer').find('img').attr('src');

    if (!!imgs) {
        var idx = 0;
        for (var i = 0, len = imgs.length; i < len; i++) {
            if (imgs[i] == img_url) {
                idx = i;
                break;
            }
        }

        if (idx < len - 1) {
            idx++;
            var url = imgs[idx];
            $('#img_viewer').remove();
            $.imgView({url: url, imgs: imgs, compare:$('#img_viewer').data('compare')}).show();
        }else if(idx == len -1){
            //濡傛灉褰撳墠鍥剧墖鏄渶鍚庝竴寮狅紝閭ｄ箞鐐逛笅涓€寮犲氨鏄浘鐗囨暟缁勭殑绗竴寮
            idx = 0;
            var url = imgs[idx];
            $('#img_viewer').remove();
            $.imgView({url: url, imgs: imgs, compare:$('#img_viewer').data('compare')}).show();
        }
    }
});

$(document).on('click', '#img_viewer .img-rotate', function(){
    rotateDeg = rotateDeg + 90;
    $('#img_viewer .img_wrap').css({
        'transform': 'scale('+scaleTime+') rotate('+rotateDeg+'deg)',
        '-o-transform': 'scale('+scaleTime+') rotate('+rotateDeg+'deg)',
        '-ms-transform': 'scale('+scaleTime+') rotate('+rotateDeg+'deg)',
        '-moz-transform': 'scale('+scaleTime+') rotate('+rotateDeg+'deg)',
        '-webkit-transform': 'scale('+scaleTime+') rotate('+rotateDeg+'deg)'
    });
});

$(document).on('click', '#img_viewer .img-in', function(){
    scaleTime = scaleTime + 0.3;
    $('#img_viewer .img_wrap').css({
        'transform': 'scale('+scaleTime+') rotate('+rotateDeg+'deg)',
        '-o-transform': 'scale('+scaleTime+') rotate('+rotateDeg+'deg)',
        '-ms-transform': 'scale('+scaleTime+') rotate('+rotateDeg+'deg)',
        '-moz-transform': 'scale('+scaleTime+') rotate('+rotateDeg+'deg)',
        '-webkit-transform': 'scale('+scaleTime+') rotate('+rotateDeg+'deg)'
    });
});

$(document).on('click', '#img_viewer .img-out', function(){
    if (scaleTime > 0.1) {
        scaleTime = scaleTime - 0.3;
        $('#img_viewer .img_wrap').css({
            'transform': 'scale('+scaleTime+') rotate('+rotateDeg+'deg)',
            '-o-transform': 'scale('+scaleTime+') rotate('+rotateDeg+'deg)',
            '-ms-transform': 'scale('+scaleTime+') rotate('+rotateDeg+'deg)',
            '-moz-transform': 'scale('+scaleTime+') rotate('+rotateDeg+'deg)',
            '-webkit-transform': 'scale('+scaleTime+') rotate('+rotateDeg+'deg)'
        });
    }
});

$(document).on('click', '#img_viewer .img-close', function(){
    $('#img_viewer').remove();
});

//clientX-妯潗鏍囷紝clientY-绾靛潗鏍
var clientX, clientY;
$(document).on('mousedown', '#img_viewer .img_wrap', mouseHandler);

/**
 * 榧犳爣绉诲姩鍥剧墖
 * @param e 褰撳墠鎿嶄綔鐨刣om鑺傜偣
 */
function mouseHandler(e){
    //榧犳爣鎸変笅銆佺Щ鍔ㄣ€佹澗寮€浜嬩欢
    //璁＄畻榧犳爣鎸変綇鍥剧墖绉诲姩鏃舵墍鍦ㄧ殑x,y鍧愭爣鏃讹紝骞惰祴鍊肩粰鍥剧墖鐨勭浉瀵瑰畾浣
    //杩欐牱灏卞綋榧犳爣绉诲姩鏃讹紝鍥剧墖涔熶細璺熺潃绉诲姩
    if(e.type === "mousedown"){
        clientX = e.clientX;
        clientY = e.clientY;

        $(document).on("mousemove", '#img_viewer .img_wrap', mouseHandler)
        $(document).on("mouseup", '#img_viewer .img_wrap', mouseHandler)
    }else if(e.type === "mousemove"){
        var clientXDiff = e.clientX - clientX;
        var clientYDiff = e.clientY - clientY;
        $('#img_viewer .img_wrap').css({
            left: parseInt($('#img_viewer .img_wrap').css('left')) + clientXDiff + "px",
            top: parseInt($('#img_viewer .img_wrap').css('top')) + clientYDiff + "px"
        });
        clientX = e.clientX;
        clientY = e.clientY;
    }else if(e.type === "mouseup"){
        $(document).off("mousemove", '#img_viewer .img_wrap', mouseHandler);
        $(document).off("mouseup", '#img_viewer .img_wrap', mouseHandler);
    }
}