function addThumbEffects() {
  thumbs = $$('.thumb');
  thumbs.each(function(thumb, i) {
    el = thumb.getElement('.thumb-info');
    el.setStyle('opacity', 0.6);
    var fx = new Fx.Morph(el, {'duration': 'short', 'wait': false});
    thumb.addEvent('mouseenter', function(event) {
      event.stop();
      fx.start({'opacity': 0.0});
    });
    thumb.addEvent('mouseleave', function(event) {
      event.stop();
      fx.start({'opacity': 0.6});
    });
  });
}

var browsable = new Class({
  initialize: function(el, elup, eldown, reqtype) {
    this.current = 0;
    this.el = el;
    this.elup = elup;
    this.eldown = eldown;
    this.reqtype = reqtype;

    this.req = new Request.HTML({
      url: 'updatenew',
      method: 'get',
      onSuccess: function(html) {
        this.el.removeClass('ajax-loading');
        this.el.set('text', '');
        this.el.adopt(html);
        //fadeIn.hide().slideIn('vertical');
      
        addThumbEffects();
      }.bind(this)
    });

    if (elup) {
      elup.addEvent('click', function(e) {
        e.stop();
        this.current -= 1;
        if (this.current < 0) this.current = 0;
        this.el.empty().addClass('ajax-loading');
        this.req.send('i=' + this.current + '&t=' + this.reqtype);
      }.bind(this));
    }

    eldown.addEvent('click', function(e) {
      e.stop();
      this.current += 1;
      this.el.empty().addClass('ajax-loading');
      this.req.send('i=' + this.current + '&t=' + this.reqtype);
    }.bind(this));
  }
});

window.addEvent('domready', function() {
  var bNew = $('newestBox');
  var fadeOut = new Fx.Slide(bNew);
  var fadeIn = new Fx.Slide(bNew);
  
  var currentnew = 0;
  var currentpop = 0;
  var currentint = 0;

  addThumbEffects();

  new browsable($('newestBox'), $('newup'), $('newdn'), 'new');
  new browsable($('interestingBox'), $('intup'), $('intdn'), 'int');
  new browsable($('popularBox'), $('popup'), $('popdn'), 'pop');
  new browsable($('randomBox'), null, $('rnddn'), 'rnd');
});