var PicasaImageGallery = function(galleryId) {
  this.galleryId = galleryId;
  this._popup = null;
  this._popupBack = null;
  this._images = [];
  this._currentIndex = 0;
  this._maxWidth = 0;
  
  this.startup = function() {
    jQuery(window).resize(jQuery.debounce(100, jQuery.proxy(this._resize, this)));
    
    jQuery.picasa.albums(this.galleryId, jQuery.proxy(this._createGallery, this));
    this._createPopup();
    this._resize();
  };
  
  this._createGallery = function(albums) {
    var gallery = "<ul class='gallery-list'>\n";
    jQuery.each(albums, function(i, album) {
      gallery += "    <li class='album'>\n";
      gallery += "        <img class='album-thumb' albumid='" + album.id + "' title='" + album.title + "' src='" + album.thumb + "' alt='" + album.title + "'/>\n";
      gallery += "    </li>\n";
    });
    gallery += "</ul>\n";
    jQuery("#gallery").append(gallery);
    jQuery("#gallery > ul > li > img").click(jQuery.proxy(function(event) {
      this.showGallery(jQuery(event.currentTarget).attr("albumid"), jQuery(event.currentTarget).attr("title"));
    }, this));
  };
  
  this._createPopup = function() {
    var popup =
        "<div class='gallery-popup'>\n" +
        "   <div class='gallery-header'>\n" +
        "       <span class='gallery-back-button' title='back'>&nbsp;</span>\n" +
        "       <span class='gallery-title'></span>\n" +
        "   </div>\n" +
        "   <div class='gallery-wrapper'>\n" +
        "       <div class='gallery-overview'></div>\n" +
        "       <div class='gallery-overlay'>\n" +
        "           <div class='image-container'></div>\n" +
        "           <div class='gallery-button-wrapper next'>\n" +
        "              <span class='gallery-next-button' title='next'>&nbsp;</span>\n" +
        "           </div>\n" +
        "           <div class='gallery-button-wrapper prev'>\n" +
        "               <span class='gallery-prev-button' title='previous'>&nbsp;</span>\n" +
        "           </div>\n" +
        "       </div>\n" +
        "   </div>\n" +
        "</div>\n" +
        "<div class='gallery-back'></div>";
    
    jQuery("#gallery").append(popup);
    this._popup = jQuery("#gallery .gallery-popup");
    this._popupBack = jQuery("#gallery .gallery-back");
    this._popupBack.click(jQuery.proxy(this.hideGallery, this));
    
    this._popup.find(".gallery-back-button")
      .mousedown(function() {jQuery(this).addClass("down");})
      .mouseup(function() {jQuery(this).removeClass("down");})
      .mouseout(function() {jQuery(this).removeClass("down");})
      .click(jQuery.proxy(this._resetPopup, this));
    
    this._popup.find(".gallery-overlay > .gallery-button-wrapper")
      .css({opacity: 0})
      .mouseenter(function() {jQuery(this).stop().fadeTo(100, 1)})
      .mouseleave(function() {jQuery(this).stop().fadeTo(100, 0)})
      .click(jQuery.proxy(this._handlePageChange, this));
  };
  
  this.showGallery = function(albumId, title) {
    this._popup.find(".gallery-title").html(title);
    jQuery.picasa.images(this.galleryId, albumId, jQuery.proxy(this._populatePopup, this));
    
    this._centerPopup();
    this._popup.fadeIn(100);
    
    this._popupBack.css("width", jQuery(document).width() + "px");
    this._popupBack.css("height", jQuery(document).height() + "px");
    this._popupBack.fadeIn(100);
  };
  
  this.hideGallery = function() {
    this._popup.fadeOut(100, jQuery.proxy(this._resetPopup, this));
    this._popupBack.fadeOut(100);
  };
  
  this.zoom = function(event) {
    this.switchImage(event.currentTarget);
    this._popup.find(".gallery-overlay").fadeIn(100);
    this._popup.find(".gallery-back-button").fadeIn(100);
  };
  
  this.switchImage = function(node) {
    var element = jQuery(node);
    
    this._currentIndex = parseInt(element.attr("index"));
    
    var width = element.attr("bigwidth");
    var height = element.attr("bigheight");
    if (width > this._maxWidth) {
      height = height * (this._maxWidth / width);
      width = this._maxWidth;
    }
    
    this._popup.find(".gallery-overlay > .image-container")
      .empty()
      .append("<img src='" + element.attr("bigurl") + "' width='" + width + "' height='" + height + "' />")
      .hide()
      .fadeIn(500);
    
    this._popup.find(".gallery-wrapper").css({
      "width": width + "px",
      "height": height + "px"
    });
    
    this._centerPopup();
  };
  
  this._populatePopup = function(images) {
    var imageList = "<ul class='image-list'>";
    jQuery.each(images, function(i, image) {
      imageList += "  <li class='image'>\n";
      imageList += "      <img index='" + i + "' bigurl='" + image.url + "' bigwidth='" + image.width + "' bigheight='" + image.height + "' src='" + image.thumbs[1].url + "' width=" + image.thumbs[1].width + " height=" + image.thumbs[1].height +  "/>\n";
      imageList += "  </li>\n";
    });
    imageList += "</ul>";
    
    this._popup.find(".gallery-overview").empty().append(imageList);
    
    this._images.length = 0;
    this._images = this._popup.find(".gallery-overview > ul > li > img");
    this._images.click(jQuery.proxy(this.zoom, this));
  };
  
  this._resetPopup = function() {
    this._popup.find(".gallery-overlay").hide();
    this._popup.find(".gallery-wrapper").css({
      width: "auto",
      height: "auto"
    });
    this._centerPopup();
    this._popup.find(".gallery-back-button").hide();
  };
  
  this._centerPopup = function() {
    var windowHeight = jQuery(window).height();
    var popupHeight = this._popup.outerHeight();
    var position = 0;
    if (popupHeight > windowHeight) {
      position = 10;
    } else {
      position =(windowHeight - popupHeight) / 2;
    }
    this._popup.css("top", (position) + jQuery(window).scrollTop() + "px");
    this._popup.css("left", (Math.abs(jQuery(window).width() - this._popup.outerWidth()) / 2) + jQuery(window).scrollLeft() + "px");
  };
  
  this._handlePageChange = function(event) {
    var element = jQuery(event.currentTarget);
    
    if (element.hasClass("next")) {
      if (this._currentIndex == this._images.length - 1) {
        this.switchImage(this._images[0]);
      } else {
        this.switchImage(this._images[this._currentIndex + 1]);
      }
    } else {
      if (this._currentIndex == 0) {
        this.switchImage(this._images[this._images.length - 1]);
      } else {
        this.switchImage(this._images[this._currentIndex - 1]);
      }
    }
  };
  
  this._resize = function() {
    this._popupBack.css("width", jQuery(document).width() + "px");
    this._popupBack.css("height", jQuery(document).height() + "px");
    this._maxWidth = Math.round(jQuery(window).width() * 0.8);
    this._centerPopup();
  };
  
  return this;
};