/**
     * 弹出层图片放大缩小 ImageMoveable(selector)
     * ========================================
     *
     * 实现描述:点击页面相关dom出现弹出框进行相关图片缩放移动等细节查看
     * dependency:
     *    [jQuery](http://jquery.com/)
     *    [underscore](http://underscorejs.org/)
     *    [Backbone.js](http://backbonejs.org/)
     *
     * author: MeanOfWind
     * QQ: 316841740
     * created time: 2014.6.12
     *
     *
     * dom标签属性:
     *    tagName: any
     *    id: any (not required)
     *    class: any 如果页面有多个图片处理传递class 程序会遍历所有的对象单独实例化
     *    src: any (not required)
     *    data-config: 配置选项 参数格式:为JSON格式 不加花括号 键名不加引号 键值如为字符串加单引号
     *            可选参数:
     *            width:  弹出框及图片宽 default 0
     *            height: 弹出框及图片高 default 0
     *            scale:  图片缩放比例   default 1/8
     *            src:    图片url 如果是img标签存在src属性可不用指定
     *--------------------------------------------
     *
     * 函数调用示例:
     *
     *  (function($){
     *    $(function(){
     *      ImageMoveable( ".img_moveable" );
     *    })
     *  })(jQuery)
     *
     *
     * Tips:
     * 定点缩放 主要算法实现:
     * 缩放后图片位置(top)=图片的当前位置(top) [+ 或 -] (鼠标按下时距图片左上角距离(disX)*缩放因子(scale))
     *
     */
    (function($, _, Backbone){
      //弹出框样式
      var css = '.clear{clear:both;height:0;display:block}.imdia{z-index:1000;position:absolute;top:0;left:0}.imdia .dh{cursor:move;height:30px}.imdia .dh .dtit{margin:0;padding:0;display:block;float:left}.imdia .dh .btn{display:block;float:left;cursor:pointer;height:20px;line-height:20px;padding:0 10px;border-radius:3px;font-family:"微软雅黑";font-size:14px;color:#fff;background-color:#0082cb;margin:5px 5px 0}.imdia .dh .btn.zoom{background-color:#ccccd1;opacity:.5}.imdia .dh .btn.active{background-color:#0082cb;opacity:1}.imdia .dh .close{float:right}.imdia .dcon{background-color:#fff;width:100px;height:50px;position:relative;overflow:hidden;border-shadow:10px 10px 5px #888}.imdia .dcon img{display:block;position:absolute;top:0;left:0}#imdiabg{display:block;width:100%;height:100%;background-color:#000;opacity:.7;position:fixed;z-index:900;top:0;left:0}';
      var gnum = 0; //保存当前实例序号 自加用于生成唯一ID
      var diaClassName = "imdia";// 弹出框class
      var bgid = diaClassName + "bg"; //弹出框背景层ID
      var zoomIn = true;//big 放大缩小控制
      /**
       * 弹出框model
       * @type {*}
       */
      var DialogModel = Backbone.Model.extend({
        defaults:{
          id: "dia_",
          width:0,
          height:0,
          diaheight: 0,
          marginLeft:0,
          marginTop:0,
          top:0,
          left:0
        },
        initialize: function(){
          var app = this.get("app");
          //根据当前appid 设置相关参数
          this.set({id: this.get("id")+app.id});
          this.set({diaheight: (this.get("height") + 30)});
          this.setPosition();
        },
        setPosition: function(){
          var scrolltop = $(window).scrollTop();
          var winh = $(window).height();
          var top = winh>this.get("height")? ((winh-this.get("height"))/2) : scrolltop;
          var scrollleft = $(window).scrollLeft();
          var winw = $(window).width();
          var left = winw>this.get("width")? (winw-this.get("width"))/2 : scrollleft;
          this.set({top: top + scrolltop});
          this.set({left: left + scrollleft});
        }
      });
      /**
       * 图片model
       * @type {*}
       */
      var ImageModel = Backbone.Model.extend({
        defaults: {
          id: "img_",
          width:0,
          height:0,
          top:0,
          left:0,
          scale: 1/8, //
          src: ''
        },
        initialize: function(){
          var app = this.get("app");
          //根据当前appid 设置相关参数
          this.set({id: this.get("id")+app.id});
          this.set({scale: eval(this.get("scale"))});
        }
      });
      /**
       * dialog view
       * @type {*}
       */
      var DialogView = Backbone.View.extend({
        tagName: "div",
        className: diaClassName,
        mouseDown: false, //鼠标是否按下
        mouseMove: false,
        disX: 0, //鼠标按下位置和dialog left距离
        disY: 0,
        //弹出框html模板
        template: '<div class="dh">\
                      <h4 class="dtit"></h4>\
                      <div class="btn zoom zoom_in active">放大</div>\
                      <div class="btn zoom zoom_out">缩小</div>\
                      <div class="btn close">关闭</div><div class="clear"></div>\
                    </div>\
                    <div class="dcon"></div>\
                    <div class="db"></div><div class="clear"></div>',
        initialize: function(){
          _.bindAll(this, "setPosition","dh_mousemove");
          this.listenTo(this.model,"change",this.setPosition); //监听model change
          $("body").mousemove(this.dh_mousemove); //绑定鼠标move事件
        },
        events: {
          "click .close": "diaClose",
          "mousedown .dh": "dh_mousedown",
          "mouseup .dh": "dh_mouseup",
          "click .zoom_in": "zoom_in",
          "click .zoom_out": "zoom_out"
         // "mousemove .dh": "dh_mousemove"
        },
        render: function(){
          this.$el.attr("id",this.model.get("id"));
          this.$el.html(this.template);
          this.$el.find(".dcon").append(this.model.get("app").imageView.el);
          this.$el.css({ //dia 样式
            display:"none",
            left: this.model.get("left")+ "px",
            top: this.model.get("top") + "px",
            width:this.model.get("width") + "px",
            height: this.model.get("diaheight") + "px"
          });//内容样式
          this.$el.find(".dcon").css({
            width:this.model.get("width") + "px",
            height: this.model.get("height") + "px"
          });
          //console.log(this)
          return this;
        },
        //关闭
        diaClose: function(){
          this.hide();
        },
        show: function(){
          $("#"+bgid).css("display","block");
          this.$el.show();
        },
        hide: function(){
          $("#"+bgid).css("display","none");
          this.$el.hide();
        },
        setPosition: function(){
          this.$el.css({
            top: this.model.get("top") + "px",
            left: this.model.get("left") + "px"
          });
        },
        //处理托动
        dh_mousedown: function(e){
          this.mouseDown = true;
          this.disX = Math.abs(e.pageX - this.model.get("left"));
          this.disY = Math.abs(e.pageY - this.model.get("top"));
          //console.log(this.disX);
          //console.log(this.mouseDownX)
        },
        dh_mouseup: function(){
          this.mouseDown = false;
          this.mouseMove = false;
        },
        dh_mousemove: function(e){
          this.mouseMove = true;
          //console.log(3)
          if(this.mouseDown){
            var x = e.pageX; //当前鼠标位置
            var y = e.pageY;
            this.model.set({top: y-this.disY});
            this.model.set({left: x-this.disX});
            //console.log(x-this.mouseDownX)
          }
        },
        //放大
        zoom_in: function(e){
          zoomIn = true;// 全局变量
          //改变button class切换对应颜色
          this.$el.find(".zoom").removeClass("active");
          $(e.target).addClass("active");
        },
        //缩小
        zoom_out: function(e){
          zoomIn = false;
          this.$el.find(".zoom").removeClass("active");
          $(e.target).addClass("active");
        }
      });
     
    
      /**
       * 图片view类
       * @type {*}
       */
      var ImageView = Backbone.View.extend({
        tagName:"img",
        disX:0,   //鼠标按下时的点 离 图片左上角距离
        disY:0,
        dconX: 0,  //图片外层div
        dconY: 0,
        mouseDown: false, //鼠标没有按下
        mouseMove: false, //鼠标没有移动
        initialize: function(){
          _.bindAll(this, "img_mouse_move","setPosition");
          this.$el.attr({//设置当前image  dom id及src值
            id: this.model.get("id"),
            src: this.model.get('src')
          });
          this.$el.css({
            width: this.model.get("width") + "px",
            height: this.model.get("height") + "px"
          });
          //监听鼠标移动事件
          $(document).mousemove(this.img_mouse_move);
          this.listenTo(this.model,"change",this.setPosition); //监听model change
        },
        render: function(){
          return this;
        },
        events: {
          "mousedown": "imgmousedown",//鼠标按下
          "mouseup": "imgmouseup"     //鼠标弹起
        },
        //鼠标按下具体处理
        imgmousedown: function(e){
          this.mouseDown = true;
          var $con = this.model.get("app").dialogView.$el.find(".dcon");
          //dcon 左上角相对屏幕
          this.dconX = $con.offset().left;
          this.dconY = $con.offset().top;
          //图片相对屏幕
          var imgY = this.$el.offset().top;
          var imgX = this.$el.offset().left;
          //按下时鼠标位置
          var mouseX = e.pageX;
          var mouseY = e.pageY;
          // 计算鼠标距离图片左上角距离
          this.disX = Math.abs(mouseX - imgX);
          this.disY = Math.abs(mouseY - imgY);
          //console.log(disx);
          //console.log(this.$el.offset())
        },
        /**
         * 鼠标弹起事件具体处理
         * 如果鼠标按下并未移动则进行图片缩放操作
         */
        imgmouseup: function(){
          //console.log(2)
          if(this.mouseDown && !this.mouseMove){
            var w = this.model.get("width");//图片当前尺寸
            var h = this.model.get("height");
            var scale = this.model.get("scale");  //绽放比例
            var width, height,top=this.model.get("top"),//图片当前位置
                left=this.model.get("left");
            //定点缩放 主要算法实现
            //缩放后图片位置(top) =  图片的当前位置(top) [+ 或 -] (鼠标按下时距图片左上角距离(disX)*缩放因子(scale))
            if(zoomIn){ //放大
              width = w+w*scale;
              height = h+h*scale;
              top = top - this.disY*scale;
              left = left - this.disX*scale;
            }else{
              width = w-w*scale;
              height = h-h*scale;
              top = top + this.disY*scale;
              left = left + this.disX*scale;
            }
            //重设图片model数据
            this.model.set({
              "width":width,
              "height": height,
              top:top,
              left: left
            });
          }
          this.mouseDown = false;
          this.mouseMove = false;
        },
        //鼠标移动具体处理
        img_mouse_move: function(e){
          var top,left;
          if(this.mouseDown){
            this.mouseMove = true;
            //或取图片相对于容器div.dcon 的top left
            //e.pageX: 事件触发时鼠标相对于document的坐标
            //算法: 图片位置=鼠标坐标-容器坐标-鼠标在当前图片坐标系的位置
            top = e.pageY - this.dconY - this.disY;
            left = e.pageX - this.dconX - this.disX;
            //console.log(left)
            this.model.set({top: top});
            this.model.set({left: left});
          }
        },
        //根据model值重设当前图片位置及尺寸
        setPosition: function(){
          this.$el.css({
            top: this.model.get("top") + "px",
            left: this.model.get("left") + "px",
            width: this.model.get("width") + "px",
            height: this.model.get("height") + "px"
          });
        }
      });
    
      /**
       * 主控制类 实例化相关资源
       * @type {*}
       */
      var App = Backbone.View.extend({
        initialize: function(options){
          _.bindAll(this,"winScroll");
          this.id = "g_img_idx_" + gnum++; //设置当前操作对象单一ID
          options.data.app = this;   //当前引用到对应实例
          //Model实例
          this.dialogModel = new DialogModel(options.data);  //弹出框model
          this.imageModel = new ImageModel(options.data);  //图片model
          //View 实例化
          this.imageView = new ImageView({model:this.imageModel});//图片view
          this.dialogView = new DialogView({model:this.dialogModel});
          //console.log(options);
          //console.log(this.imageView.render().el);
          //console.log(this.el)
          $(window).scroll(this.winScroll);
          this.render();
        },
        render: function(){
          $("body").append(this.dialogView.render().el);
        },
        events:{
          "click": "elClick"
        },
        //当前对象点击
        elClick: function(){
          this.dialogView.show();
        },
        //预留window sroll事件
        winScroll: function(){
          this.dialogModel.setPosition();
        }
      });
     
      //工具函数
      // parse data-config attr string to json
      function attrToJson(data_config){
        var arr = data_config.split(","); //split to array
        for(var i = 0; i<arr add return add andd parse to json param selector constructor imagemoveable="function(selector){" return foreach every selector the starter function var var data="attrToJson(data_config);" var src="src;" new bg mask var></div>";
        var $css = "<style>"+ css +"</style>";
        $("body").append(bg).append($css);//添加弹出层背景 及对应CSS样式
      }
    })(jQuery, _, Backbone);