/**
 @ Name：layui.dragMove 图片查看器
 @ Author：FQSong
 @ License：MIT 
 */
 
layui.define('layer', function(exports){ 
  var $ = layui.$
  ,layer = layui.layer
  
  //字符常量
  ,MOD_NAME = 'dragMove', ELEM = '.layui-dragMove'
  
  //外部接口
  ,dragMove = {
    index: layui.dragMove ? (layui.dragMove.index + 10000) : 0
    
    //设置全局项
    ,set: function(options){
      var that = this;
      that.config = $.extend({}, that.config, options);
      return that;
    }
    
    //事件监听
    ,on: function(events, callback){
      return layui.onevent.call(this, MOD_NAME, events, callback);
    }
  }
    
  //构造器
  ,Class = function(options){
    var that = this;
    that.index = ++dragMove.index;
    that.config = $.extend({}, that.config, dragMove.config, options);
    that.render();
  };
  
  //默认配置
  Class.prototype.config = {
    layerArea: ["960px","720px"],
    layerShade: 0.6,
    layerMove: 0,
    maxZoom: 1
  };
  
  //渲染视图
  Class.prototype.render = function(){
    var that = this
    ,options = that.config
    ,dragMoveView = "<div class='layui-dragMove'>"
    + "<div class='dragMove-img'>"
    +   "<span class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop'></span>"
    + "</div>"
    + "<div class='dragMove-btn'>"
    +   "<button type='button' class='layui-btn layui-btn-sm' data-method='default'>默认大小</button>"
    +   "<button type='button' class='layui-btn layui-btn-sm' data-method='real'>实际大小</button>"
    +   "<button type='button' class='layui-btn layui-btn-sm' data-method='zoomin'>放大</button>"
    +   "<button type='button' class='layui-btn layui-btn-sm' data-method='zoomout'>缩小</button>"
    + "</div>"
    + "</div>";

    options.elem = $(options.elem);

    options.elem.on("click","img",function(e){
      let imgObj =  $(this),
      imgSrc = imgObj.attr("src"),
      imgTitle = imgObj.attr("alt") || imgSrc.replace(/(.*\/)*([^.]+).*/ig,"$2");
      
      layer.open({
        type: 1,
        resize: 0,
        btn: 0,
        skin: "dragMove-skin",
        move: options.layerMove,
        area: options.layerArea,
        shade: options.layerShade,
        title: imgTitle,
        content: dragMoveView,
        success: function(layero){
          var imgbox = layero.find(".dragMove-img");
          options.imgboxWidth = imgbox.innerWidth();
          options.imgboxHeight = imgbox.innerHeight();

          var nImg = new Image();
          nImg.src = imgSrc;
          if (nImg.complete) { 
            imgbox.empty().append(nImg);
            that.init(nImg)
          } else {
            nImg.onload = function () {
              imgbox.empty().append(nImg);
              that.init(nImg)
            }
          }
        }
      });
    });    
  }

  //
  Class.prototype.init = function(img){
    var that = this
    ,options = that.config;

    let $img = $(img),
    parent = $img.closest(".layui-dragMove"),
    zoomData = {};

    zoomData.img = img;
    zoomData.imgWidth = img.width;
    zoomData.imgHeight = img.height;

    zoomData.zoomSize = Math.min(Math.min(options.imgboxWidth / zoomData.imgWidth, options.imgboxHeight / zoomData.imgHeight), 1);
    zoomData.left = (options.imgboxWidth - zoomData.imgWidth * zoomData.zoomSize) / 2;
    zoomData.top = (options.imgboxHeight - zoomData.imgHeight * zoomData.zoomSize) / 2;
    zoomData.defaultZoom = zoomData.zoomSize;

    that.zoomData = zoomData;
    $img.css({ "transform-origin": "0 0", "transform": "matrix(" + zoomData.zoomSize + ",0,0," + zoomData.zoomSize + "," + zoomData.left + "," + zoomData.top + ")" });

    $img.on("mousedown", function (e) {
      e.preventDefault();      
      let currentX = e.clientX,
      currentY = e.clientY;
      $img.removeClass("transitioning").css({"cursor": "grabbing"});

      $(document).on("mousemove", function (even) {
        let moveX = even.clientX - currentX,
        moveY = even.clientY - currentY;
        $img.css({ "transform": "matrix(" + zoomData.zoomSize + ",0,0," + zoomData.zoomSize + "," + (zoomData.left + moveX) + "," + (zoomData.top + moveY) + ")" });
      });
      $(document).on("mouseup", function (even) {
        var matrix = $img.css("transform").slice(7, -1).split(','),
        center = that.getCenter(parseFloat(matrix[4]), parseFloat(matrix[5]), zoomData);

        zoomData.left = center.left;
        zoomData.top = center.top;

        $img.addClass("transitioning").css({
          "transform": "matrix(" + zoomData.zoomSize + ",0,0," + zoomData.zoomSize + "," + zoomData.left + "," + zoomData.top + ")",
          "cursor": "grab"
        });

        $(document).off("mousemove");
        $(document).off("mouseup");
      });
    });

    parent.on("click", "button", function (e) {
      e.preventDefault();
      var method = $(this).attr("data-method"),
      scaleSize = 0;
      switch (method) {
        case "default":
          scaleSize = zoomData.defaultZoom;
          break;
        case "real":
          scaleSize = 1;
          break;
        case "zoomin":
          scaleSize = zoomData.zoomSize * 1.2;
          scaleSize = scaleSize > options.maxZoom ? options.maxZoom : scaleSize;
          break;
        case "zoomout":
          scaleSize = zoomData.zoomSize / 1.2;
          scaleSize = scaleSize < zoomData.defaultZoom ? zoomData.defaultZoom : scaleSize;
          break;
      
        default:
          break;
      }
      scaleSize && that.scaleZoom(scaleSize);
    });
    
    //鼠标滚轮
    parent.on("mousewheel", function (e) {
      e.preventDefault();
      let scaleSize = 0;
      if (e.originalEvent.wheelDelta > 0) {
        scaleSize = zoomData.zoomSize * 1.2;
      } else {
        scaleSize = zoomData.zoomSize / 1.2;
      }
      scaleSize = Math.min(Math.max(scaleSize, zoomData.defaultZoom),options.maxZoom);
      that.scaleZoom(scaleSize);
    });

    $img.on("transitionend webkitTransitionend", function () {
      $(this).removeClass("transitioning")
    });

  };

  Class.prototype.scaleZoom = function(index){
    var that = this
    ,options = that.config
    ,zoomData = that.zoomData;
    
    zoomData.left = zoomData.left - zoomData.imgWidth * (index - zoomData.zoomSize) / 2;
    zoomData.top = zoomData.top -  zoomData.imgHeight * (index - zoomData.zoomSize) / 2;
    zoomData.zoomSize = index;   

    var center = that.getCenter(zoomData.left,zoomData.top,zoomData);
    zoomData.left = center.left;
    zoomData.top = center.top;
     
    $(zoomData.img).addClass("transitioning").css({          
      "transform":"matrix("+ zoomData.zoomSize +",0,0," + zoomData.zoomSize +","+zoomData.left+","+zoomData.top+")"
    });  
  };

  Class.prototype.getCenter = function(x,y,zoomData){
    var that = this
    ,options = that.config
    ,zoomData = that.zoomData;
    
    let newleft,newtop;
    newleft = (function(){
      var left;
      if(zoomData.imgWidth * zoomData.zoomSize < options.imgboxWidth){
        left = (options.imgboxWidth - zoomData.imgWidth * zoomData.zoomSize) / 2;
      }else{
        left = Math.max(Math.min(0,x), options.imgboxWidth - zoomData.imgWidth * zoomData.zoomSize);
      }
      return left;
    })();
    newtop = (function(){
      var top;
      if(zoomData.imgHeight * zoomData.zoomSize < options.imgboxHeight){
        top = (options.imgboxHeight - zoomData.imgHeight * zoomData.zoomSize) / 2;
      }else{
        top = Math.max(Math.min(0, y), options.imgboxHeight - zoomData.imgHeight * zoomData.zoomSize);
      }
      return top;
    })();
    return {left:newleft,top:newtop} 
  };

  Class.prototype.decimal = function(num){
    var result = parseFloat(num);
    if (isNaN(result)) {
      return false;
    }
    result = Math.round(num * 100) / 100;
    return result;
  };

  //核心入口
  dragMove.render = function(options){
    var ins = new Class(options);
    return ins;
  };
  
  //加载组件所需样式
  layui.link(layui.cache.base + 'dragMove/dragMove.css', function(){
    //样式加载完毕的回调
  }, MOD_NAME); 
  
  exports(MOD_NAME, dragMove);
});