Un regalito: clase de pestañas(Tabs) en prototype

[kotosh]

Con la particularidad que te permite crear varias pestañas en la misma página si se desea, cosa que no se podia hacer con los ejemplos y librerias existentes en la web (al menos las que encontré).
Compatible con: firefox, IE, opera, chrome.

Por allí alguien dirá, Dreamweaver te permite crear Tab`s de manera sencilla, pero el problema con esos tabs es que no funciona correctamente en IE cuando creas varias grupos de tabs.

Se requiere prototype, el codigo falta refinar, pero funciona muy bien. Se agradecen sugerencias para perfeccionarlo:

Tab.js

//TabMulti v.1.0.0

function Tabs(Nombre,Capas) {
this.TabNom = Nombre;
this.TabCapas = Capas;
this.DivAnt='';
this.TabAnt='';

Tabs.prototype.Capas = function() {
this.as=$$('div#'+this.TabNom+' li.TabOff'); //obtenemos el id de las listas

this.NumTab=this.TabCapas.length; //calculamos el nro de pestañas
for(it=0;it<this.NumTab;it++){
$(this.TabCapas[it]).style.display='none'; //ocultamos las capas detalle
}
//pintamos la primera pestaña
this.MuestraTab(this.TabCapas[0],this.as[0]); //Ejecutamos la funcion q muestrala capa y la pestaña activa
}

Tabs.prototype.MuestraTab = function(CapaT,Tab) {
this.CapaT=CapaT;
this.Tab=Tab;

if(this.DivAnt!=''){
$(this.DivAnt).style.display='none'; //ocultamos la capa anterior
Element.removeClassName(this.TabAnt, "TabOn"); //quitamos el estilo a la pestaña anterior ON
Element.addClassName(this.TabAnt, "TabOff"); //para luego ocultarlo añadiendo el estilo OFF
}
//mostramos la capa con sus estilos
Element.removeClassName(this.Tab, "TabOff");
Element.addClassName(this.Tab, "TabOn"); //agregamos el estilo ON a la pestaña activa
$(this.CapaT).style.display='inline'; //mostramos la capa

this.DivAnt=this.CapaT;
this.TabAnt=this.Tab;
}
}

estilo.css

@charset "utf-8";

.Tab{
padding:5px;
}

.HeadTab {
height:25px;
margin-bottom:0
}

.BodyTab {
padding:5px;
background-color: #F5F4EF;
border: 1px solid #666;
}


.TabOn {
float:left;
padding:5px;
background-color: #F5F4EF;
cursor:pointer;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #666;
border-right-color: #666;
border-left-color: #666;
margin-left:2px;
margin-right:2px;
list-style-type: none;
}

.TabOff {
float:left;
padding:5px;
background-color: #CCC;
cursor:pointer;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #666;
border-right-color: #666;
border-left-color: #666;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666;
margin-left:2px;
margin-right:2px;
list-style-type: none;
}

Prueba.html

//descargar prototype desde aqui: http://www.prototypejs.org/
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="Tab.js"></script>

<link href="estilo.css" media="all" rel="stylesheet" type="text/css" />




<div id="Tabs1" class="Tab">
<ul class="HeadTab">
<li class="TabOff" onClick="CambiaTab('universo',this);">gonzo</li>
<li class="TabOff" onClick="CambiaTab('dos',this);">fozzie</li>
<li class="TabOff" onClick="CambiaTab('tres',this);">statler</li>
<li class="TabOff" onClick="CambiaTab('cuatro',this);">waldorf</li>
</ul>
<div class="BodyTab">
<div id="universo">
<p>veamos que sucede en esta primera </p>
<p>capa que existe en esta pestaa</p>
<p>priemra pesta&ntilde;a</p>
</div>
<div id="dos">
cccccccccccccccccc
<p>segunda pesta&ntilde;a</p>
</div>
<div id="tres">
bbbbbbbbbbbbbbbbbb
<p>tercera pesta&ntilde;a</p>
</div>
<div id="cuatro">
mmmmmmmmmmmmmmmmm
<p>
<label>
<input name="Nombre" type="text" id="Nombre" value="wewewe" />
</label>
</p>
<p>cuerta pesta&ntilde;a</p>
</div>
</div>
</div>

<br />

<div id="Noticias" class="Tab">
<ul class="HeadTab">
<li class="TabOff" onClick="CambiaTab2('nota1',this);">gonzo</li>
<li class="TabOff" onClick="CambiaTab2('nota2',this);">fozzie</li>
<li class="TabOff" onClick="CambiaTab2('nota3',this);">statler</li>
</ul>
<div class="BodyTab">
<div id="nota1">
asdasdasdasdsadsd
</div>
<div id="nota2">
de esta noche entre el Deportivo Quito
</div>
<div id="nota3">
Los rimenses se pone arriba en el marcador gracias a Andy Pando.
</div>
</div>
</div>


<script type="text/javascript">
var Pest = new Tabs('Tabs1',["universo", "dos", "tres","cuatro"]);
Pest.Capas();
CambiaTab=function(Nom,IdTab){
Pest.MuestraTab(Nom,IdTab);
}


var Pest2 = new Tabs('Noticias',["nota1", "nota2", "nota3"]);
Pest2.Capas();
CambiaTab2=function(Nom,IdTab){
Pest2.MuestraTab(Nom,IdTab);
}
</script>

Estoy abierto a sugerencias.
Sdos.

[tredio]

colocalo en algun servidor para probarlo, y te cuento. saludos.

[kotosh]

Aquí la URL con código actualizado:
http://www.sistemass.com/desarrollo/

Sdos.

[tredio]

oye bastante bien, todos los aportes son agradecidos.