var sunriseGallery = new Class({
  Implements: [Options, Events, Chain],

  options: {
    thumbnails: null,
    slimbox: false,
    onComplete: $empty
  },

  initialize: function(groupOfThumbnails, options) {
    this.setOptions(options);
    this.thumbnails = groupOfThumbnails.getElements('img');
    this.setupThumbnails();
  },

  setupThumbnails: function() {
    this.thumbnails.each(function(thumbnail) {
      thumbnail.set('opacity', 1);
      this.setupThumbnail(thumbnail)
    }, this);
  },

  setupThumbnail: function(thumbnail) {
    if (!this.options.slimbox) {
      thumbnail.addEvent('click', function(e) {
        e.stop();
        //console.log('thumbnail clicked');
      });
    }
    var bigImage = thumbnail.get('src');
    var parent = thumbnail.getParent();
    if (!this.options.slimbox) {
      if (parent.get('href')) {
        bigImage = parent.get('href');
        parent.set('href', 'javascript:void(0);');
      }
    }
    thumbnail.addEvent('mouseenter', this.thumbnailFocus.bindWithEvent(thumbnail, [3, '8cc63f']));
    thumbnail.addEvent('mouseleave', this.thumbnailFocus.bindWithEvent(thumbnail, [1, 'ffffff']));
  },

  thumbnailFocus: function(thumbnail, size, color) {
    var s = this.getSize();
    var myEffect = new Fx.Morph(this, {
      duration: 1,
      transition: Fx.Transitions.Sine.easeOut,
      link: 'cancel'
    });
    /*
    myEffect.start({
        'border-width': size,
  			'width': s.x - 2 * size,
  			'height': s.y - 2 * size
    });
    */
    myEffect.start({
      'border-color': '#'+color
    });
  }
});