var Gallery = Class.create({
  initialize: function(elem) {
    this.title = elem.down('h2').innerHTML;
    this.published = elem.down('p.posted').innerHTML;
    this.overlay = new GalleryOverlay(this);
    this.images = elem.select('div.image');
    this.current = 0;
    this.total = this.images.length;
    this.applyImageActions();
  },

  applyImageActions: function() {
    this.images.each(function(image, i) {
      var img = image.down('img');
      var p = image.down('p');
      img.observe('click', this.clickImage.bindAsEventListener(this, i));
      if (p) p.hide();
    }.bind(this));
  },

  clickImage: function(event, current) {
    event.stop();
    this.current = current;
    this.selectImage(event.element().up('div.image'));
  },

  next: function() {
    this.current = this.current + 1;
    this.selectImage(this.images[this.current]);
  },

  previous: function() {
    this.current = this.current - 1;
    this.selectImage(this.images[this.current]);
  },

  selectImage: function(elem) {
    this.overlay.setImage(elem);
  }
});

var GalleryOverlay = Class.create({
  initialize: function(gallery) {
    this.gallery = gallery;
    $(document.body).insert('<div id="gallery_overlay_container"><div class="container"><span class="close">Close</span><span class="previous">Previous</span><span class="next">Next</span><div class="image"></div><div class="desc"><div class="top"></div><div class="middle"><p class="caption"></p><p class="event">' + this.gallery.title + '</p><p class="published">' + this.gallery.published + '</p><p class="pagination"></p></div><div class="bottom"></div></div></div></div>');
    this.container = $('gallery_overlay_container');
    this.container.down('span.close').observe('click', this.hide.bindAsEventListener(this));
    this.image = this.container.down('div.image');
    this.caption = this.container.down('p.caption');
    this.pagination = this.container.down('p.pagination');
    this.next_elem = this.container.down('span.next');
    this.prev_elem = this.container.down('span.previous');
    this.next_elem.observe('click', this.next.bindAsEventListener(this));
    this.prev_elem.observe('click', this.previous.bindAsEventListener(this));
    this.hide();
  },

  hide: function() {
    this.container.hide();
  },

  next: function() {
    this.gallery.next();
  },

  previous: function() {
    this.gallery.previous();
  },

  setImage: function(elem) {
    if (this.gallery.current == 0) {
      this.prev_elem.hide();
    } else {
      this.prev_elem.show();
    }
    if (this.gallery.current == this.gallery.total - 1) {
      this.next_elem.hide();
    } else {
      this.next_elem.show();
    }
    var link = elem.down('a');
    var caption = elem.down('p');
    this.image.update('<img src="' + link.href + '" />');
    this.caption.update(caption ? caption.innerHTML : '');
    this.pagination.update('(Photo #{current} of #{total})'.interpolate({
      current: this.gallery.current + 1,
      total: this.gallery.total
    }));
    this.show();
  },

  show: function() {
    this.container.show();
  }
})