Create a simple mootools 1.2 tab system

I'm trying to create a very simple tab interface using the mootools 1.2 version. I need to have a fadein-fadeout effect, no sliding or morphing. I've tried to find some demos online but they all refer to different versions of mootools or they are too complicated comparing to my needs. Can you please give me some guidelines?

This is an image of what I'm trying to do and a sample code.

alt text http://img204.imageshack.us/img204/4983/tabsd.jpg

<ul id="buttons">
     <li><a href="#">button 1</a></li>
     <li><a href="#">button 2</a></li>
     <li><a href="#">button 3</a></li>
     <li><a href="#">button 4</a></li>
</ul>

<div id="tab1">content for button 1</div>
<div id="tab2">content for button 2</div>
<div id="tab3">content for button 3</div>
<div id="tab4">content for button 4</div>

I need all tabs to be hidden when page loads.
each time user clicks a button, the div/tab it's referring to should fade in.

Solution

Not exactly a perfect piece of code but should do the job:

window.addEvent('domready',function(){

  var tabs = $$('div[id^="tab"]');
  tabs.fade('hide');

  $$('#buttons li').each(function(element,index){
      element.addEvent('click',function(){
          tabs.fade(0);
          tabs[index].fade(1);
      });
  });
});