;(function($){

  var lightbox = function(setting){

    var self = this;
    this.obj = $('.js-lightbox') ;
    this.setting = setting;
    this.defaultsetting = {
      speed:'fast',
      scale: 0.8
    }
    $.extend(this.defaultsetting,this.getcustomsetting());
    this.grouparr = [];
    this.clear = false;
    this.groupname = null;
    this.bodynode = $(document.body);
    this.popupmask = $("<div class='lightbox-popupmask'></div>");
    this.popup     = $("<div class='lightbox-popup'></div>");
    this.settingdefaultimg();

    //主要通过点击事件触发大部分效果
    this.obj.on('click',  function(event) {
      event.preventdefault();
      event.stoppropagation();
      var currentgroup = $(this).attr('data-group');
      if(currentgroup != self.groupname){
        self.groupname = currentgroup;
      }
      //设置默认每次点击插入遮罩层与图片层的dom结构
      self.defaultdom();

      //点击当前对象获取到所在的集合
      self.getimagegroup();

      //（点击、左右切换）设置弹出图层的效果及图片的转换
      self.initlightbox($(this));

    });
  };

  lightbox.prototype = {
    //是否带有自定义设置
    getcustomsetting : function(){
        var setting = this.setting ;
        if(setting && setting != ''){
            return setting;
        }else{
            return {};
        }
    },
    //设置需要使用该效果的图片添加唯一的id值
    settingdefaultimg : function (){
      var obj = this.obj;
      obj.each(function(i){obj.eq(i).attr('data-id',i)});
    },
    //实现左右切换
    goto : function(dir){
      var len = this.grouparr.length;
      if(dir==='prev'){
        var picsrc = this.grouparr[--this.index].src;
        this.loadcompletepicshow(picsrc);            
      }else{
        var picsrc = this.grouparr[++this.index].src;
        this.loadcompletepicshow(picsrc);
      }
    },
    //过渡效果显示图片层的框
    showmaskandpopu:function(src,id){
      var _this_ = this 
          _scale_ = 1 ;
      this.winwidth  = $(window).width();
      this.winheight = $(window).height();
      this.lightboxpic.hide();
      this.lightboxdescription.hide();
      this.lightboxpopupmask.fadein();
      this.lightpopup.fadein();

      this.lightpopup.css({
        "width"      : this.winwidth/4 ,
        "height"     : this.winheight/4 ,
        "marginleft" : -(this.winwidth/4) / 2 ,
        "margintop"  : -this.lightpopup.height() - 8 ,
      }).animate({
        "margintop"  : (this.winheight-this.lightpopup.height() + 8)/2 
      },this.defaultsetting.speed,function(){
        _this_.loadcompletepicshow(_this_.src);
      })

    },
    settingparmt : function(thisobj){
      //设置每个图片显示的信息
      this.src   = thisobj.attr('src');
      this.title = thisobj.attr('data-title');
      this.lightboxpic.attr('src',this.src);
    },
    //获取当前索引值 
    getcurrentindex : function(thisobj){
      var thisid = thisobj.attr('data-id'),
          index = 0;
      jquery.each(this.grouparr,function(i,e){
        if(thisid == e.id){
          index = i;
          return false;
        }
      });
      return index;
    },
    loadpicshow : function(thissrc,callback){
      var image = new image();
      if(!!window.activexobject){
        //兼容ie
        image.onreadystatechange = function(){
          if(this.readystate == "complete"){
            callback();
          }
        };
      }else{
        image.onload = function(){
            callback();
        };
      }
      image.src = thissrc;
    },
    //主要展示图片的函数
    loadcompletepicshow : function (src){
      var _this_ = this ;
      this.lightboxpic.css({"width":"auto","height":"auto"}).hide();
      //this.lightboxdescription.hide();
      this.winwidth  = $(window).width();
      this.winheight = $(window).height();
      this.clear = true;

      _this_.loadpicshow(src,function(){
        _this_.lightboxpic.attr('src',src); 
        var picwidth  = _this_.lightboxpic.width();
        var picheight = _this_.lightboxpic.height();

        //判断所点击的图片是否需要左右按钮
        var grouparrlength = _this_.grouparr.length;
        if( grouparrlength>1 ){
          if(_this_.index === 0){
            _this_.lightboxprevbtn.addclass('disable');
            _this_.lightboxnextbtn.removeclass('disable');
          }else if(_this_.index === grouparrlength-1){
            _this_.lightboxnextbtn.addclass('disable');
            _this_.lightboxprevbtn.removeclass('disable');
          }else{
            _this_.lightboxnextbtn.removeclass('disable');
            _this_.lightboxprevbtn.removeclass('disable');
          }
        }

        //当图片大于浏览器窗口时按等比例方式显示
        if(picwidth > _this_.winwidth || picheight > _this_.winheight){
          _scale_ = math.min(_this_.winwidth/(picwidth+12) * _this_.defaultsetting.scale , _this_.winheight/(picheight+12)* _this_.defaultsetting.scale);
        }else{
          _scale_ =  _this_.defaultsetting.scale;   
        }

        picwidth = picwidth * _scale_;
        picheight = picheight * _scale_;  
        //加载完毕图片展示的动画效果
        _this_.lightpopup.animate({
          "width"      : picwidth  -12 ,
          "height"     : picheight  -12 ,      
          "marginleft" : -picwidth  / 2 ,
          "margintop"  : (_this_.winheight - picheight ) /2 ,
        },function(){
          _this_.lightboxpic.css({
            "width"      : picwidth  -12 ,
            "height"     : picheight  -12 ,                
          });

          _this_.lightboxtitle.text(_this_.grouparr[_this_.index].title);
          _this_.lightboxcurrentindex.text( (_this_.index + 1 ) + ' of ' + _this_.grouparr.length );
          _this_.lightboxpic.fadein();
          _this_.lightboxdescription.fadein(); 

        });

      });
    },
    //点击后需要促发的弹出框效果(并设置宽高)
    initlightbox:function(thisobj){
          var _this_    = this ,
          sourcesrc = thisobj.attr('src'),
          currentid = thisobj.attr('data-id');
          this.left = thisobj.offset().left ;
          this.top  = thisobj.offset().top ;
          this.width = thisobj.width() ;
          this.height = thisobj.height() ;

          this.settingparmt(thisobj);
          this.showmaskandpopu(sourcesrc,currentid);   
          this.index = this.getcurrentindex(thisobj); 
    },
    //默认的幻灯片弹出框设置
    defaultdom : function(){
      var _this_     = this ;
      var _leftbtn_  = '<span class="lightbox-btn lightbox-prev-btn active"></span>',
          _rightbtn_ = '<span class="lightbox-btn lightbox-next-btn active"></span>',
          _btn_ = $('<div class="btn-position">').append(_leftbtn_,_rightbtn_);

      this.lightboxview = '<div class="lightbox-view">'+
                            '<div class="lightbox-pic">'+
                              '<img src="" >'+
                            '</div>'+
                            '<div class="lightbox-description">'+
                              '<span class="lightbox-close"></span>'+
                              '<p class="lightbox-title"></p>'+
                              '<small class="lightbox-current-index"></small>'+
                            '</div>'+
                          '</div>'; 
                          
      this.bodynode.prepend(this.popupmask,this.popup);
      this.popup.html('').append(this.lightboxview);

      this.lightboxpopupmask = this.bodynode.find('.lightbox-popupmask');
      this.lightpopup = this.bodynode.find('.lightbox-popup');
      this.lightboxpic = this.lightpopup.find('.lightbox-pic > img');
      this.lightboxclose   = this.lightpopup.find('.lightbox-close');
      this.lightboxtitle   = this.lightpopup.find('.lightbox-title');
      this.lightboxcurrentindex = this.lightpopup.find('.lightbox-current-index');
      this.lightboxdescription = this.lightpopup.find('.lightbox-description');
      this.lightboxdescription.find('.lightbox-close').after(_btn_);
      this.lightboxprevbtn = this.lightpopup.find('.lightbox-prev-btn');
      this.lightboxnextbtn = this.lightpopup.find('.lightbox-next-btn');   

      //关闭按钮事件
      this.lightboxpopupmask.on('click',function(event){
        event.preventdefault();
        event.stoppropagation();
        $(this).fadeout();
        _this_.lightpopup.fadeout();
        _this_.clear = false;
      });

      this.lightboxclose.on('click',function(event){
        event.preventdefault();
        event.stoppropagation();
        _this_.lightpopup.fadeout();
        _this_.lightboxpopupmask.fadeout();
        _this_.clear = false;
      });

      //左右按钮hover事件 与 点击事件
      this.lightboxprevbtn.on('click',function(event){
          if(!$(this).hasclass('disable')){ 
            event.preventdefault();
            event.stoppropagation();
            _this_.goto('prev') 
          }
      })

      //响应式设置
      var timer = null;
      $(window).resize(function(event) {
        /* act on the event */
        if(_this_.clear){
          cleartimeout(timer);
          timer = settimeout(function(){
            _this_.loadcompletepicshow(_this_.grouparr[_this_.index].src);  
          },500)          
        }

      });
      document.onkeyup = function(e) {
        e = (e) ? e : window.event;
        if(e.key === "arrowleft" || e.keycode === 37 ){
          _this_.lightboxprevbtn.click();
        }else if(e.key === "arrowright" || e.keycode === 39){
          _this_.lightboxnextbtn.click();
        }
      };
      this.lightboxnextbtn.on('click',function(event){
          if(!$(this).hasclass('disable')){ 
            event.preventdefault();
            event.stoppropagation();
            _this_.goto('next') 
          }
      })
    },
    //获取每个组别的所有对象
    getimagegroup : function(){
      var _this_ = this ;
          _this_.grouparr = [];
      this.bodynode.find("[data-group='"+ this.groupname +"']").each(function(index, el) {

        _this_.grouparr.push({
          "src":$(el).attr('src'),
          "title":$(el).attr('data-title'),
          "id":$(el).attr('data-id'),
          "group":$(el).attr('data-group'),
          "src":$(el).attr('src')
        });

      })
    },     
  };
  $.extend({
    lightbox :function(object){
      new lightbox(object);    
    } 
  });
  
  window['lightbox'] = lightbox;

})(jquery);