"

From 2013.igem.org

window.GalleryFiles = [ //EPFL " File:Team-EPF-Lausanne_Charlotte1"];

$(function() {

return window.GalleryObject = new Gallery(window.GalleryFiles, $("#gallery-main-image"), $("#gallery-thumbnails"));

}); var Image; Image = (function() {

Image.autoload = true;
function Image(url, index) {
  this.url = url;
  this.index = index != null ? index : -1;
  this.img = void 0;
  this.loaded = false;
  this.callbacks = [];
  this.dom = void 0;
  this.thumbnail = void 0;
  if (Image.autoload) {
    this.load();
  }
}
Image.prototype.load = function(callback) {
  var _this = this;
  if (this.loaded) {
    if (callback != null) {
      return callback(this.img);
    }
  } else {
    if (callback != null) {
      this.callbacks.push(callback);
    }
    if (this.img === void 0) {
      this.img = $("<img>").load(function() {
        return _this.loadCallback();
      });
      return setTimeout((function() {
        return _this.img.attr("src", _this.url);
      }), 1);
    }
  }
};
Image.prototype.generateThumbnail = function() {
  var ctx, dim, dx, dy, h, imgDim, r, source, w;
  if (this.loaded && this.thumbnail === void 0) {
    imgDim = {
      w: this.img[0].width,
      h: this.img[0].height
    };
    dim = {
      w: 70,
      h: 55
    };
    r = Math.max(dim.w / imgDim.w, dim.h / imgDim.h);
    dx = -(imgDim.w * r - dim.w) / 2;
    dy = -(imgDim.h * r - dim.h) / 2;
    w = imgDim.w * r + 10;
    h = imgDim.h * r + 10;
    source = $("<canvas>").attr("width", w * 1.5).attr("height", h * 1.5);
    if (source[0].getContext("2d") !== void 0) {
      ctx = source[0].getContext("2d");
      ctx.drawImage(this.img[0], 0, 0, w * 1.5, h * 1.5);
    } else {
      source = $("<img>").attr("src", this.url);
    }

this.thumbnail = $(" ").css({

      overflow: "hidden",
      position: "relative",
      left: "0px",
      top: "0px",
      width: dim.w + "px",
      height: dim.h + "px"
    }).append(source.css({
      position: "relative",
      left: dx + "px",
      top: dy + "px",
      width: w + "px",
      height: h + "px"
    }).mouseover(function() {
      $(this).stop().animate({
        width: (w + 20) + "px",
        height: (h + 20) + "px",
        left: (dx - 10) + "px",
        top: (dy - 10) + "px"
      });
      return $(this).parent().stop().animate({
        width: (dim.w + 20) + "px",
        height: (dim.h + 20) + "px"
      });
    }).mouseout(function() {
      $(this).stop().animate({
        width: w + "px",
        height: h + "px",
        left: dx + "px",
        top: dy + "px"
      });
      return $(this).parent().stop().animate({
        left: "0px",
        top: "0px",
        width: dim.w + "px",
        height: dim.h + "px"
      });
    }));
  }
  return this.thumbnail;
};
Image.prototype.loadCallback = function() {
  var callback, _i, _len, _ref, _results;
  this.loaded = true;
  _ref = this.callbacks;
  _results = [];
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    callback = _ref[_i];
    _results.push(callback(this.img));
  }
  return _results;
};
Image.prototype.isLoaded = function() {
  return this.loaded;
};
Image.prototype.get = function(callback) {
  if(callback){
    this.load(callback);
  }
  return this.img;
};
Image.prototype.updateGalleryDOM = function() {
  var thumb,
    _this = this;
  if (!this.loaded) {
    this.dom.empty();

this.dom.append($(" ").attr("class", "gallery-image-inner").append(Gallery.getLoadImage().attr("class", "gallery-image")));

    return this.load(function() {
      return _this.updateGalleryDOM();
    });
  } else {
    thumb = this.generateThumbnail();
    this.dom.empty();

return this.dom.append($(" ").attr("class", "gallery-image-inner").append($(thumb).attr("class", "gallery-image")));

  }
};
Image.prototype.getGalleryDOM = function(callback) {
  var _this = this;
  if (this.dom === void 0) {

this.dom = $(" ").attr("class", "gallery-image-outer").click(function() {

      if (callback != null) {
        return callback(_this);
      }
    });
    this.updateGalleryDOM();
  }
  return this.dom;
};
return Image;

})(); var Gallery; Gallery = (function() {

Gallery.loadAnimation = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
Gallery.loadImage = void 0;
Gallery.getLoadImage = function() {
  return $("<img>").attr("src", Gallery.loadAnimation);
};
function Gallery(imageList, imgHolder, thumbHolder, width, height) {
  var i, src, _i, _len, _ref;
  this.imageList = imageList;
  this.imgHolder = imgHolder;
  this.thumbHolder = thumbHolder;
  this.width = width != null ? width : 550;
  this.height = height != null ? height : 400;
  this.loadImage = Gallery.getLoadImage();
  this.imgHolder.width(this.width + 12);
  this.imgHolder.height(this.height + 12);
  this.link = $("<a>").attr("target", "_blank");
  this.imgHolder.append(this.link);
  this.thumbHolder.width(this.width);
  this.images = [];
  _ref = this.imageList;
  for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
    src = _ref[i];
    this.images[i] = new Image(src, i);
  }
  this.createThumbnails();
  this.curIndex = 0;
  this.update();
}
Gallery.prototype.click = function(img) {
  this.curIndex = img.index;
  return this.update();
};
Gallery.prototype.createThumbnails = function() {
  var img, _i, _len, _ref, _results,
    _this = this;
  _ref = this.images;
  _results = [];
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    img = _ref[_i];
    _results.push(this.thumbHolder.append(img.getGalleryDOM(function(img) {
      return _this.click(img);
    })));
  }
  return _results;
};
Gallery.prototype.update = function() {
  var h, img, r, real_h, real_w, ref_r, w,
    _this = this;
  img = this.images[this.curIndex];
  this.link.empty();
  if (!img.loaded) {
    img.load(function() {
      return _this.update();
    });
    this.loadImage.width(this.loadImage[0].width);
    this.link.attr("href", void 0);
    return this.link.append(this.loadImage);
  } else {
    w = img.get()[0].width;
    h = img.get()[0].height;
    r = w / h;
    ref_r = this.width / this.height;
    if (r > ref_r) {
      real_w = Math.min(this.width, w);
      img.get().width(real_w);
      img.get().height(real_w*1.0 / r);
    } else {
      real_h = Math.min(this.height, h);
      img.get().width(real_h * r);
      img.get().height(real_h);
    }
    this.link.attr("href", img.url);
    return this.link.append(img.get());
  }
};
return Gallery;

})();