Ho un sistema di gestione di tab scritto in mootools, il cui codice viene richiamato all' interno della pagina html con questo codice:

<script type="text/javascript">
window.addEvent('load',function() {
var tabset = new TabSet($$('#tab a'),$$('#$content li'),{
startIndex: 0
});
});
</script>

e poi il codice vero e proprio dello script è questo:

var TabSet = new Class({
options: {
activeClass: 'active', //css class
startIndex: 0
},
Implements: [Options,Events],
initialize: function(tabs,contents,options) {
//handle arguments
this.setOptions(options);
this.tabs = $$(tabs);
this.contents = $$(contents);
//determine the "active" tab
var active = this.options.startIndex;
this.activeTab = this.tabs[active].addClass(this.options.activeClass);
this.activeContent = this.contents[active].setStyle('height','auto');
//process each tab and content
this.tabs.each(function(tab,i) {
this.processItem(tab,this.contents[i],i);
},this);
//tabs are ready -- load it!
this.fireEvent('load');
},
processItem:function(tab,content,i) {
var contentHeight = content.getScrollSize().y;
//add a click event to the tab
tab.addEvent('click',function(e) {
//stop!
if(e) e.stop();
//if it's not the active tab
if(tab != this.activeTab) {
if (tab.get('href') !='#')
location.href = tab.get('href');
//remove the active class from the active tab
this.activeTab.removeClass(this.options.activeClas s);
//make the clicked tab the active tab
(this.activeTab = tab).addClass(this.options.activeClass);
//tween the old tab content up
//tween the new content down
this.activeContent.set('tween',{
onComplete:function() {
this.activeContent = content.fade('in').set('tween',{ onComplete: $empty }).tween('height',contentHeight);
//fire the tab change event
this.fireEvent('change',[tab,content]);
}.bind(this)
}).setStyles({
height: contentHeight,
overflow: 'hidden'
}).fade('out').tween('height',0);
}
}.bind(this));
}
});



Tutto funziona correttamente, ma se voglio inserire un doppio sistema di tab uno incapsulato nell' altro (per esempio la prima scelta di tab è ITALIANO - INGLESE, mentre la seconda COLORE - TAGLIA ) ho provato a fare così:

<script type="text/javascript">
window.addEvent('load',function() {
var tabset1 = new TabSet($$('#tab1 a'),$$('#$content1 li'),{
startIndex: 0
});
});
</script>

<script type="text/javascript">
window.addEvent('load',function() {
var tabset2 = new TabSet($$('#tab2 a'),$$('#$content2 li'),{
startIndex: 0
});
});
</script>

Ma continua a dare problemi (ni realtà il tab interno funziona, quello più esterno no).

Dove sbaglio ?