javascript - tab fixe

/** 
* Copyright©2001 Garrett Smith 
* Web:<a href="http://dhtmlitchen.com/" target="_blank">http://dhtmlitchen.com/</a> 
* 
* Last Modified:Sept 22, 2002. 
*/ 
Browser={ 
isSupported:function(){ 
return(Boolean(document.getElementsByTagName)&&Boolean(document.getElementById)); 
}, 
id:new function(){ 
var ua=navigator.userAgent; 
var OMNI=ua.indexOf("Omni")>0; 
this.OPERA=ua.indexOf("Opera")>=0; 
this.MAC=ua.indexOf("Mac")>0; 
if(!this.OPERA&&!OMNI){ 
this.IE5=ua.indexOf("MSIE 5")>0; 
this.IE5_0=ua.indexOf("MSIE 5.0")>0; 
this.NS6=ua.indexOf("Gecko")>0; 
this.MOZ=this.NS6&&ua.indexOf("Netscape")==-1; 
this.MAC_IE5=this.MAC>0&&this.IE5; 
this.IE6=ua.indexOf("MSIE 6")>0; 
}} 
}; 
var tabs, tabsClone, tabArray, activeTab, relatedTab=null; 
TabParams={ 
useCloneOnBottom:false, 
showRemoveLink:false, /* mettre à true pour afficher le bouton "Afficher tout". Modifié pour base Prestations BCVd*/ 
alwaysShowClone:false 
}; 
function tabInit(){ 
if(window.tabInited)return; 
if(!document.createElement||Browser.id.OPERA){ 
TabParams.useCloneOnBottom=false; 
TabParams.alwaysShowClone=false; 
TabParams.showRemoveLink=true; 
} 
tabs=document.getElementById('tabs'); 
tabs.getElementsWithClass=get_elements_with_class_from_classList; 
if(Browser.id.OPERA&&!Browser.id.IE5){ 
tabArray=tabs.getElementsByTagName("span"); 
activeTab=tabArray[0]; 
} 
else { 
tabArray=tabs.getElementsWithClass("*", ["tab", "tabActive"]); 
activeTab=tabs.getElementsWithClass("*", "tabActive")[0]||tabArray[0]; 
} 
tabArray.isImg=tabArray[0].tagName.toLowerCase()=="img"; 
IE5_0noImg=(Browser.id.IE5_0&&!tabArray.isImg&&!Browser.id.MAC); 
if(!Boolean(tabs.cloneNode)||!Boolean(tabs.cloneNode(true))||tabArray.isImg)TabParams.useCloneOnBottom=false; 
if(TabParams.useCloneOnBottom){ 
tabsClone=document.body.appendChild(tabs.cloneNode(true)); 
tabsClone.className="tabsClone"; 
tabsClone.getElementsWithClass=get_elements_with_class_from_classList; 
tabsCloneArray=tabsClone.getElementsWithClass("*", ["tab", "tabActive"]); 
} 
for(var i=0;i<tabArray.length; i++){ 
var _tab; 
if(!Browser.id.OPERA){ 
_tab=tabArray[i]; 
_tab.content=document.getElementById("content"+(i+1)); 
} 
else { 
_tab=document.getElementById("tab"+(i+1)); 
_tab.num=i+1; 
} 
if(TabParams.useCloneOnBottom)tabsCloneArray[i].content=document.getElementById("content"+(i+1)); 
if(_tab.tagName.toLowerCase()=="img"){ 
_tab["normalsrc"]=new String(_tab.src); 
_tab.hover=new Image(); 
_tab.hover.src=_tab.getAttribute("hoversrc"); 
_tab.active=new Image(); 
_tab.active.src=_tab.getAttribute("activesrc"); 
} 
if(_tab.addEventListener){ 
_tab.addEventListener("mouseover", hoverTab ,false); 
_tab.addEventListener("mouseout", hoverOff ,false); 
_tab.addEventListener("mousedown", depressTab ,false); 
if(TabParams.useCloneOnBottom){ 
tabsCloneArray[i].addEventListener("mouseover", hoverTab ,false); 
tabsCloneArray[i].addEventListener("mouseout", hoverOff ,false); 
tabsCloneArray[i].addEventListener("mousedown", depressClonedTab ,false); 
}} 
else { 
_tab.onmouseover=hoverTab; 
_tab.onmouseout=hoverOff; 
_tab.onmousedown=depressTab; 
if(TabParams.useCloneOnBottom){ 
tabsCloneArray[i].onmouseover=hoverTab; 
tabsCloneArray[i].onmouseout=hoverOff; 
tabsCloneArray[i].onmousedown=depressClonedTab; 
}} 
if(TabParams.useCloneOnBottom){ 
tabsCloneArray[i].depressTab=depressClonedTab; 
tabsCloneArray[i].controller=_tab; 
_tab.bottomTab=tabsCloneArray[i]; 
} 
_tab.depressTab=depressTab; 
if(TabParams.showRemoveLink){ 
_tab.content.appendChild(document.createElement("br")); 
removeTabLink=_tab.content.removeTabLink=_tab.content.appendChild(document.createElement("a")); 
removeTabLink.id="removeTabLink"+(i+1); 
removeTabLink.href="javascript:removeTabs("+(i+1)+")"; 
removeTabLink.appendChild(document.createTextNode("Afficher tout")); 
removeTabLink.className="removeTab"; 
} 
if(IE5_0noImg){ 
tabs.tabOffset=tabs.tabOffset?tabs.tabOffset:0; 
var tabWidth=_tab.offsetWidth+18; 
_tab.style.left=tabs.tabOffset+"px"; 
_tab.style.width=tabWidth+"px"; 
if(TabParams.useCloneOnBottom){ 
tabsCloneArray[i].style.left=tabs.tabOffset+"px"; 
tabsCloneArray[i].style.width=tabWidth+"px"; 
} 
_tab.style.display="block"; 
_tab.style.position="absolute"; 
_tab.style.whiteSpace="nowrap"; 
if(TabParams.useCloneOnBottom){ 
tabsCloneArray[i].style.display="block"; 
tabsCloneArray[i].style.position="absolute"; 
tabsCloneArray[i].style.whiteSpace="nowrap"; 
} 
tabs.tabOffset+=parseInt(_tab.offsetWidth)+4; 
} 
if(Browser.id.MAC_IE5&&TabParams.useCloneOnBottom)tabsCloneArray[i].innerHTML=_tab.innerHTML; 
} 
tabs.onchange=new Function(); 
var q=String(window.location.search); 
if(q&&q.indexOf("tab=")>0)switchTabs(q.substring(q.indexOf("tab=")+4,q.indexOf("tab=")+8)); 
else if(window.location.hash!=""){ 
var hash=window.location.hash; 
var el=document.getElementById(hash.substring(1)); 
if(el==null)return; 
var content=findAncestorWithClass(el, "content"); 
if(content!=null&&Boolean(content.id)&&content.id.indexOf("content")==0){ 
var num=content.id.substring("content".length); 
switchTabs("tab"+num, null, hash); 
el=content=num=null; 
}} 
if(tabArray.isImg)activeTab.src=activeTab.getAttribute("activesrc"); 
else{ 
activeTab.className="tab tabActive"; 
if(TabParams.useCloneOnBottom)activeTab.bottomTab.className=activeTab.className; 
} 
if(Browser.id.IE5_0&&!Browser.id.MAC&&!tabArray.isImg)window.defaultStatus="IE 5.0 does not support inline boxes. "+"Please upgrade to IE 5.5 or 6.0 for better performance."; 
if(TabParams.useCloneOnBottom){ 
setTabsClonePosition(); 
tabsClone.style.height=(activeTab.offsetHeight+1)+"px"; 
showTabsCloneIfNecessary(); 
if(window.addEventListener)window.addEventListener("resize",updateTabsClonePosition, false); 
else window.onresize=updateTabsClonePosition; 
} 
window.tabInited=true; 
} 
function updateTabsClonePosition(e){ 
if(activeTab!=null)setTimeout("setTabsClonePosition();",500); 
} 
function setTabsClonePosition(){ 
var adjustment=0; 
if(Browser.id.MAC_IE5)adjustment=-1 * 
parseInt(activeTab.content.currentStyle.paddingBottom); 
else if(Browser.id.IE5_0)adjustment=0; 
else adjustment=1; 
tabsClone.style.top=(activeTab.content.offsetHeight+activeTab.content.offsetTop+adjustment)+"px"; 
} 
function showTabsCloneIfNecessary(){ 
var contentBottom=activeTab.content.offsetTop+activeTab.content.offsetHeight; 
var visibility=(contentBottom>getViewportHeight()||TabParams.alwaysShowClone)?"visible":"hidden"; 
tabsClone.style.visibility=visibility; 
} 
function switchTabs(tab,e){ 
if(typeof document.getElementById=="undefined")return true; 
var el=(arguments.length==3&&typeof arguments[2]=="string")?document.getElementById(arguments[2].substring(1)):null; 
var booleanReturnValue=(arguments.length==3&&arguments[2]==true)?true:false; 
try{ 
document.getElementById(tab).depressTab(e); 
} 
catch(exception){} 
if(!el&&!booleanReturnValue){ 
window.scrollTo(0,0); 
return false; 
} 
else if(el!=null)scrollToElement(el); 
if(booleanReturnValue)return booleanReturnValue; 
} 
function scrollToElement(el){ 
try{ 
if(typeof el.scrollIntoView=="function")el.scrollIntoView(); 
else 
window.location.hash="#"+el.id; 
} 
catch(ex){}} 
function hoverTab(){ 
if(activeTab==this||activeTab==this.controller)return; 
this.className="tabHover tab"; 
this.src=this.getAttribute("hoversrc"); 
if(TabParams.useCloneOnBottom){ 
if(this.bottomTab)this.bottomTab.className="tabHover tab"; 
else this.controller.className="tabHover tab"; 
}} 
function hoverOff(){ 
if(activeTab==this||activeTab==this.controller)return; 
this.className="tab"; 
this.src=this["normalsrc"]; 
if(TabParams.useCloneOnBottom){ 
if(this.bottomTab)this.bottomTab.className="tab"; 
else this.controller.className="tab"; 
}} 
function depressTab(e){ 
if(activeTab==this)return; 
relatedTab=activeTab; 
this.className="tab"; 
this.className="tab tabActive"; 
this.src=this.getAttribute("activesrc"); 
if(activeTab)resetTab(activeTab); 
activeTab=this; 
tabs.onchange(e); 
if(!Browser.id.OPERA){ 
if(!Browser.id.MAC_IE5)this.content.style.display="block"; 
this.content.style.visibility="visible"; 
} 
else document.getElementById("content"+this.num).style.visibility="visible"; 
if(TabParams.useCloneOnBottom){ 
setTabsClonePosition(); 
this.bottomTab.className=this.className; 
showTabsCloneIfNecessary(); 
}} 
function depressClonedTab(e){ 
if(activeTab==this.controller)return; 
this.controller.depressTab(e); 
this.className="tab"; 
this.className="tab tabActive"; 
window.scrollTo(0,(tabsClone.offsetTop+tabsClone.offsetHeight)-getViewportHeight()); 
} 
function resetTab(tab){ 
tab.className="tab"; 
tab.src=tab["normalsrc"]; 
if(activeTab.bottomTab)activeTab.bottomTab.className="tab"; 
if(!Browser.id.OPERA){ 
if(!Browser.id.MAC_IE5)tab.content.style.display="none"; 
tab.content.style.visibility="hidden"; 
} 
else document.getElementById("content"+tab.num).style.visibility="hidden"; 
} 
get_elements_with_class_from_classList=function(tagName, classList){ 
var returnedCollection=new Array(0); 
var collection=(this.all&&tagName=="*")?this.all:this.getElementsByTagName(tagName); 
for(var i=0; i<collection.length; i++)jloop:for(var j=0;j<classList.length; j++)if(collection[i].className.test(classList[j], " ")){ 
returnedCollection[returnedCollection.length]=collection[i]; 
break jloop; 
} 
return returnedCollection; 
}; 
if(!String.prototype.test){ 
String.prototype.test=function(inp, delim){ 
var exps=getTokenizedExps(inp, delim); 
return(exps.global.test(this)||exps.ends.test(this)); 
}; 
function getTokenizedExps(inp, delim){ 
return { 
global:new RegExp(delim+inp+delim, "\g"), 
ends:new RegExp("^"+inp+delim+"|^"+inp+"$|"+delim+inp+"$", "\g")}; 
}} 
function findAncestorWithClass(el, klass){ 
for(var parent=el;parent!=null;){ 
if(parent.className!=null&&parent.className.test(klass, " "))return parent; 
parent=parent.parentNode; 
} 
return null; 
}; 
function getScrollTop(){ 
if(Browser.id.NS6)return(window.pageYOffset); 
if(document.documentElement.scrollTop)return Math.max(document.documentElement.scrollTop, document.body.scrollTop); 
else if(document.body.scrollTop)return(document.body.scrollTop); 
} 
function getViewportHeight(){ 
if(Browser.id.NS6)return window.innerHeight; 
if(Browser.id.IE6)return Math.max(document.documentElement.clientHeight, document.body.clientHeight); 
return document.body.clientHeight-2; 
} 
function removeTabs(index){ 
var noScrollFlag=activeTab.id=="tab1"; 
resetTab(activeTab); 
var removeTabLink; 
for(var i=0; i<tabArray.length; i++)if(Boolean(tabArray[i].content)&&tabArray[i].content.style){ 
tabArray[i].content.style.position="relative"; 
if(i!=0){ 
tabArray[i].content.style.borderTopWidth="0"; 
tabArray[i].content.style.marginTop="0"; 
if(!Browser.id.MOZ)tabArray[i].content.style.top="0"; 
} 
if(i!=tabArray.length-1)tabArray[i].content.style.borderBottomWidth="0"; 
else tabArray[i].content.style.marginBottom="10px"; 
if(!Browser.id.MAC_IE5)tabArray[i].content.style.display="block"; 
tabArray[i].content.style.visibility="visible"; 
removeTabLink=tabArray[i].content.removeTabLink; 
if(removeTabLink!=null&&removeTabLink.firstChild!=null&&removeTabLink.firstChild.nodeName=="#text"){ 
var newIndex=parseInt(removeTabLink.id.substring(removeTabLink.id.length-1)); 
if(newIndex<tabArray.length-1)newIndex+=1; 
removeTabLink.href="javascript:undoRemoveTabs('tab"+newIndex+"')"; 
removeTabLink.firstChild.nodeValue="Afficher condense"; 
} 
if(Browser.id.NS6)tabArray[tabArray.length-1].content.style.marginBottom=tabArray[0].content.offsetTop+"px"; 
} 
tabs.style.display="none"; 
if(TabParams.useCloneOnBottom)tabsClone.style.display="none"; 
if(noScrollFlag)return; 
if(Browser.id.MOZ)window.scrollTo(0, document.getElementById("content"+index).offsetTop); 
else window.location.hash='content'+index; 
} 
function undoRemoveTabs(sTabToActivate){ 
for(var i=0; i<tabArray.length; i++){ 
if(Boolean(tabArray[i].content)&&tabArray[i].content.style){ 
tabArray[i].content.style.position="absolute"; 
if(i!=0){ 
tabArray[i].content.style.top=""; 
tabArray[i].content.style.borderTopWidth=""; 
} 
if(i!=tabArray.length-1)tabArray[i].content.style.borderBottomWidth=""; 
else tabArray[i].content.style.marginBottom=""; 
if(!Browser.id.MAC_IE5)tabArray[i].content.style.display="none"; 
tabArray[i].content.style.visibility="hidden"; 
var removeTabLink=tabArray[i].content.removeTabLink; 
if(removeTabLink!=null&&removeTabLink.firstChild!=null&&removeTabLink.firstChild.nodeName=="#text"){ 
removeTabLink.firstChild.nodeValue="Afficher tout"; 
removeTabLink.href="javascript:removeTabs("+(i+1)+")"; 
}} 
} 
tabs.style.display="block"; 
if(TabParams.useCloneOnBottom)tabsClone.style.display="block"; 
activeTab=null; 
switchTabs(sTabToActivate, null); 
activeTab=document.getElementById(sTabToActivate); 
if(Browser.id.NS6)tabArray[tabArray.length-1].content.style.marginBottom=""; 
}