this was never intended for publication but
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.tabpanel {
position:absolute;left:50px;top:20px;width:800px;height:500px;
}
.tab {
position:absolute;z-Index:0;left:50px;top:0px;width:100px;height:30px;
background-Color:#FFCC66;-moz-border-radius:5px;border:solid black 1px;border-Bottom-Width:0px;
font-Size:14px;text-Align:center;
}
.tabpanel INPUT {
position:absolute;z-Index:101;top:460px;left:350px;width:70px;font-Size:12px;background-Color:#FFCC66;
}
.tabitem {
position:absolute;z-Index:0;left:0px;top:30px;width:800px;height:450px;background-Color:#FFCC66;border:solid black 1px;
}
.tabitem DIV{
position:absolute;left:20px;top:20px;width:760px;height:410px;background-Color:#FFFFCC;text-Align:left;
}
.tabta {
position:absolute;left:20px;top:20px;width:740px;height:400px;font-Size:12px;
}
.tabtxt {
position:absolute;left:0px;top:8px;height:20px;text-Align:center;
}
.tabactive {
font-Weight:bold;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
function siteTabsInit(e,args){
var oop=new siteTabs(args);
}
function siteTabs(args){
var oop=this;
this.mse=[args[1],args[1]+' '+args[4]];
this.obj=document.getElementById(args[0]);
this.tabs=zxcByClassName(args[1],this.obj,'DIV');
this.items=zxcByClassName(args[2],this.obj,'DIV');
this.nu=args[3]||0;
this.nu=0;
for (var z0=0;z0<this.tabs.length;z0++){
zxcES(this.tabs[z0],{zIndex:(z0!=this.nu?'0':'2')});
zxcES(this.items[z0],{zIndex:(z0!=this.nu?'0':'1')});
this.tabs[z0].onclick=function(){ oop.cng(this); }
this.tabs[z0].onmouseover=function(){ this.className=oop.mse[1]; }
this.tabs[z0].onmouseout=function(){ if (this!=oop.lst){ this.className=oop.mse[0]; } }
var txt=zxcES('DIV',{marginLeft:'10px'},this.tabs[z0],args[5][z0]);
txt.className=args[3];
}
this.lst=this.tabs[this.nu];
this.lst.className=this.mse[1];
this.lstitem=this.items[this.nu];
this.obj.getElementsByTagName('INPUT')[0].onclick=function(){
var ta=oop.lstitem.getElementsByTagName('TEXTAREA')[0];
if (ta) ta.select();
}
this.but=this.obj.getElementsByTagName('INPUT')[0];
this.cng(this.lst);
}
siteTabs.prototype.cng=function(tab){
this.lst.className=this.mse[0];
zxcES(this.lst,{zIndex:'0'});
zxcES(this.lstitem,{zIndex:'0'});
for (var z0=0;z0<this.tabs.length;z0++){
if (this.tabs[z0]==tab){
this.lst=this.tabs[z0];
this.lstitem=this.items[z0];
break;
}
}
zxcES(this.lst,{zIndex:'2'});
zxcES(this.lstitem,{zIndex:'1'});
zxcES(this.but,{visibility:(this.lstitem.getElementsByTagName('TEXTAREA')[0]?'visible':'hidden')});
this.lst.className=this.mse[1];
}
function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}
function zxcEventAdd(o,f,e,p) {
if ( o.addEventListener ){ o.addEventListener(e,function(ev){ return o[f](ev,p);}, false); }
else if ( o.attachEvent ){ o.attachEvent('on'+e,function(ev){ return o[f](ev,p); }); }
else {
var prev=o['on'+e];
if (prev){ o['on'+e]=function(ev){ prev(ev); o[f](ev,p); }; }
else { o['on'+e]=o[f]; }
}
}
function zxcAddEvt(obj,fun,ev,p){
if (obj['zxc'+fun+ev]) return;
obj['zxc'+fun+ev]=window[fun];
zxcEventAdd(obj,'zxc'+fun+ev,ev,p);
}
function zxcES(ele,style,par,txt){
if (typeof(ele)=='string') ele=document.createElement(ele);
for (key in style) ele.style[key]=style[key];
if (par) par.appendChild(ele);
if (txt) ele.appendChild(document.createTextNode(txt));
return ele;
}
zxcAddEvt(window,'siteTabsInit','load',['tab1','tab','tabitem','tabtxt','tabactive',['Comments','Code','CSS','HTML']]);
/*]]>*/
</script>
</head>
<body>
<div id="tab1" class="tabpanel" >
<div class="tab" style="z-Index:1;" ></div>
<div class="tab" style="left:155px;" ></div>
<div class="tab" style="left:260px;" ></div>
<div class="tab" style="left:365px;" ></div>
<div class="tabitem" >
<div >
<div style="position:absolute;left:20px;top:20px;width:720px;height:380px;" >
</div>
</div>
</div>
<div class="tabitem" >
<textarea name="scripttab" class="tabta" rows="1" cols="1" >
</textarea>
</div>
<div class="tabitem" style="z-Index:1;" >
<textarea name="scripttab" class="tabta" rows="1" cols="1" >
</textarea>
</div>
<div class="tabitem" >
<textarea name="scripttab" class="tabta" rows="1" cols="1" >
</textarea>
</div>
<input type="button" name="e" value="Select All" />
</div>
</div>
</body>
</html>