(function ($) {

  var LightBox = function () {
    var self = this;

    this.popupMask = $("<div id='mask'></div>");
    this.popupWin = $("<div id='popup'></div>");
    this.bodyNode = $(document.body);

    // 组名及数据变量
    this.groupName = null;
    this.groupData = [];

    this.renderDOM();

    // 获取弹出框区域
    this.picView = this.popupWin.find(".img"); // 图片区域
    this.pic = this.picView.find("img");
    this.prevBtn = this.picView.find(".btn-prev");
    this.nextBtn = this.picView.find(".btn-next");
    this.loader = this.picView.find(".img-loader");
    this.picInfo = this.popupWin.find(".info"); // 标题区域
    this.picCaption = this.picInfo.find(".info-des");
    this.picIndex = this.picInfo.find(".info-index");
    this.closeBtn = this.picInfo.find(".close");

    this.b_state = true;
    this.timer = null;

    // 事件委托
    this.bodyNode.delegate(".js_lightbox", "click", function (ev) {
      ev.stopPropagation();

      var curGroupName = $(this).attr("data-group");

      if (curGroupName != self.groupName) {
        self.groupName = curGroupName;

        self.getGroup();
      }

      self.intialPop($(this));
    });

    // 点击遮罩及关闭按钮时
    this.popupMask.click(function () {
      $(this).fadeOut();
      self.popupWin.fadeOut();
    });

    this.closeBtn.click(function () {
      self.popupMask.fadeOut();
      self.popupWin.fadeOut();
    });


    // 左右按钮事件
    this.prevBtn.hover(function () {
      if (!$(this).hasClass("disabled") && self.groupData.length > 1) {
        $(this).addClass("btn-prev__show");
      }
    }, function () {
      if (!$(self).hasClass("disabled") && self.groupData.length > 1) {
        $(this).removeClass("btn-prev__show");
      }
    }).click(function (ev) {
      if (!$(this).hasClass("disabled") && self.b_state) {
        self.b_state = false;

        ev.stopPropagation();

        self.goTo("prev");
      }
    });

    this.nextBtn.hover(function () {
      if (!$(this).hasClass("disabled") && self.groupData.length > 1) {
        $(this).addClass("btn-next__show");
      }
    }, function () {
      if (!$(self).hasClass("disabled") && self.groupData.length > 1) {
        $(this).removeClass("btn-next__show");
      }
    }).click(function (ev) {
      if (!$(this).hasClass("disabled") && self.b_state) {
        self.b_state = false;

        ev.stopPropagation();

        self.goTo("next");
      }
    });


    // 根据窗口调整图片大小
    $(window).resize(function () {
      window.clearTimeout(self.timer);

      self.timer = setTimeout(function () {
        self.picLoadSize(self.groupData[self.zIndex].src);
      }, 500);
    });
  };

  LightBox.prototype = {
    goTo: function (direction) { // 左右切换图片
      if (direction === "next") {
        this.zIndex ++;

        if (this.zIndex === this.groupData.length - 1) {
          this.nextBtn.addClass("disabled").removeClass("btn-next__show");
        }

        if (this.zIndex > 0) {
          this.prevBtn.removeClass("disabled");
        }

        var imgURL = this.groupData[this.zIndex].src;

        this.picLoadSize(imgURL);
      } else {
        this.zIndex --;

        if (this.zIndex === 0) {
          this.prevBtn.addClass("disabled").removeClass("btn-next__show");
        }

        if (this.zIndex != this.groupData.length - 1) {
          this.nextBtn.removeClass("disabled");
        }

        var imgURL = this.groupData[this.zIndex].src;

        this.picLoadSize(imgURL);
      }
    },

    picLoadSize: function (picURL) { // 加载图片并获取尺寸
      var self = this;

      this.pic.css({width: "auto", height: "auto"}).hide();
      this.picInfo.hide();

      this.preLoadImg(picURL, function () {
        self.pic.attr("src", picURL);

        var picWidth = self.pic.width();
        var picHeight = self.pic.height();

        self.changeImg(picWidth, picHeight);
      });
    },

    changeImg: function (picWidth, picHeight) { // 改变各项值及显示图片
      var self = this;
      var clietnWidth = $(window).width();
      var clietnHeight = $(window).height();

      var scale = Math.min(clietnWidth / picWidth, clietnHeight / picHeight, 1);

      picWidth = picWidth * scale;
      picHeight = picHeight * scale;

      this.picView.animate({
        width: picWidth,
        height: picHeight
      });

      this.popupWin.animate({
        width: picWidth,
        height: picHeight,
        marginLeft: -(picWidth / 2),
        top: (clietnHeight - picHeight) / 2
      }, function () {
        self.pic.css({
          width: picWidth,
          height: picHeight
        }).fadeIn();

        self.picInfo.fadeIn();

        self.b_state = true;
      });

      this.picIndex.text("Image "+(this.zIndex + 1)+" of "+this.groupData.length+"");
      this.picCaption.text(this.groupData[this.zIndex].caption);
    },

    preLoadImg: function (picURL, fn) { // 图片加载函数
      var oImg = new Image();

      if (!!window.ActiveXObject) {
        oImg.onreadystatechage = function () {
          if (this.readyState == "complete") {
            fn();
          }
        };
      } else {
        oImg.onload = function () {
          fn();
        };
      }

      oImg.src = picURL;
    },

    showMaskAndPop: function (src, curId) { // 显示弹窗部分区域
      var self = this;
      var winWidth = $(window).width();
      var winHeight = $(window).height();
      var viewHeight = winHeight / 2;

      this.pic.hide();
      this.picInfo.hide();

      this.popupMask.fadeIn();

      this.picView.css({
        width: winWidth / 2,
        height: winHeight / 2
      });

      this.popupWin.fadeIn();
      this.popupWin.css({
        width: winWidth / 2,
        height: winHeight / 2,
        marginLeft: -(winWidth / 2) / 2,
        top: -viewHeight
      }).animate({
        top: (winHeight - viewHeight) / 2
      }, function () {
        self.picLoadSize(src);
      });


      // 存下当前元素在数组中的位置
      this.zIndex = this.getIndex(curId);

      var dataLen = this.groupData.length;

      if (dataLen > 1) {
        if (this.zIndex === 0) {
          this.prevBtn.addClass("disabled");
          this.nextBtn.removeClass("disabled");
        } else if (this.zIndex == dataLen - 1) {
          this.prevBtn.removeClass("disabled");
          this.nextBtn.addClass("disabled");
        } else {
          this.prevBtn.removeClass("disabled");
          this.nextBtn.removeClass("disabled");
        }
      }
    },

    intialPop: function (curObj) { // 初始化弹窗
      var sourceSrc = curObj.attr("data-source");
      var curId = curObj.attr("data-id");

      this.showMaskAndPop(sourceSrc, curId);
    },

    getGroup: function () { // 同一组数据获取
      var self = this;
      var groupList = this.bodyNode.find("*[data-group="+this.groupName+"]");

      this.groupData.length = 0;

      groupList.each(function () {
        self.groupData.push({
          src: $(this).attr("data-source"), 
          id: $(this).attr("data-id"),
          caption: $(this).attr("data-caption")
        });
      });
    },

    renderDOM: function () { // 渲染 DOM
      var str = '<div class="container">\
          <a class="img" href="#">\
            <img src="#" alt="#">\
            <span class="btn btn-prev"></span>\
            <span class="btn btn-next"></span>\
          </a>\
          <div class="info">\
            <span class="info-des">Click the right half of the image to move forward.</span>\
            <span class="info-index">Image 0 of 0</span>\
            <a href="#" class="close"></a>\
          </div>\
        </div>';

      this.popupWin.html(str);

      this.bodyNode.append(this.popupMask);
      this.bodyNode.append(this.popupWin);
    },

    getIndex: function (curId) { // 存下当前元素在数组中的位置
      var index = 0;

      $(this.groupData).each(function (i) {
        if (this.id === curId) {
          return false;
        } else {
          index ++;
        }
      });

      return index;
    }
  };

  window["LightBox"] = LightBox;

})(jQuery);