function browserSliderOnStart(obj) {
  if (obj.element.visible()) {
    // browser pane is going to be closed
    $$('#article_browser_panes ul').invoke('setStyle', {'overflowY': 'hidden'})
  }
}

function browserSliderOnFinish(obj) {
  var toggle = $('article_browser_toggle');
  if (obj.element.visible()) {
    // browser pane has been opened
    $$('#article_browser_panes ul').invoke('setStyle', {'overflowY': 'auto'})
      updateToggleLink(toggle, 'open', 'Article Browser');
    } else {
      // browser pane has been closed
      updateToggleLink(toggle, 'closed', 'Article Browser');
  }
}

Event.addBehavior({
  '#article_groups li a:click' : function() {
    $$('#article_groups li a').each(function(el) {
      el.removeClassName('active');
    });
  
    this.toggleClassName('active');
  
    if (this.id == 'show_all_articles') {
      $$('#article_listings li').invoke('show');
      return false;
    }
    var targetClass = this.id.replace('show_', 'related_to_');
    var targetElements = [];
  
    $$('#article_listings li').invoke('hide');
  
    $$('#article_listings li').each(function(el) {
      if (el.hasClassName(targetClass)) {
        targetElements.push(el)
      }
    });
  
    targetElements.invoke('show');
    return false;
  },

  '#article_listings li a:click' : function() {
    var href_for_xhr = this.href.replace(/\/reference\/article\//, '/reference/article_xhr/');

    $$('#article_listings li a').each(function(el) {
      el.removeClassName('active');
    });

    this.toggleClassName('active');

    new Ajax.Updater('article_wrapper', href_for_xhr, {method: 'get'});
    return false;
  },
  
  '#article_browser_toggle:click' : function() {
    Effect.toggle('article_browser_panes', 'blind', {
      beforeStart: browserSliderOnStart,
      afterFinish: browserSliderOnFinish
    });
    return false;
  }

});