var miniTab = { currentTab: 0, activeTab: 0, destX: 0, destW: 0, t: 0, b: 0, c: 0, d: 20, animInterval: null, sliderObj: null, aHeight: 0, init: function() { if(!document.getElementById || !document.getElementById("miniflex")) return; var ul = document.getElementById("miniflex"); var liArr = ul.getElementsByTagName("li"); var aArr = ul.getElementsByTagName("a"); for(var i = 0, li; li = liArr[i]; i++) { liArr[i].onmouseover = aArr[i].onfocus = function(e) { var pos = 0; var elem = this.nodeName == "LI" ? this : this.parentNode; while(elem.previousSibling) { elem = elem.previousSibling; if(elem.tagName && elem.tagName == "LI") pos++; } miniTab.initSlide(pos); } } ul.onmouseout = function(e) { miniTab.initSlide(miniTab.currentTab); }; for(var i = 0; i < aArr.length; i++) { if(document.location.href.indexOf(aArr[i].href)>=0) { miniTab.activeTab = miniTab.currentTab = i; } aArr[i].style.borderBottom = "0px"; aArr[i].style.paddingBottom = "6px"; } miniTab.slideObj = ul.parentNode.appendChild(document.createElement("div")); miniTab.slideObj.appendChild(document.createTextNode(String.fromCharCode(160))); miniTab.slideObj.id = "animated-tab"; miniTab.slideObj.style.top = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px"; miniTab.slideObj.style.left = (ul.offsetLeft + + liArr[miniTab.activeTab].offsetLeft + aArr[miniTab.activeTab].offsetLeft) + "px"; miniTab.slideObj.style.width = aArr[miniTab.activeTab].offsetWidth + "px"; miniTab.aHeight = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop; miniTab.initSlide(miniTab.activeTab, true); var intervalMethod = function() { miniTab.slideIt(); } miniTab.animInterval = setInterval(intervalMethod,10); }, cleanUp: function() { clearInterval(miniTab.animInterval); miniTab.animInterval = null; }, initSlide: function(pos, force) { if(!force && pos == miniTab.activeTab) return; miniTab.activeTab = pos; miniTab.initAnim(); }, initAnim: function() { var ul = document.getElementById("miniflex"); var liArr = ul.getElementsByTagName("li"); var aArr = ul.getElementsByTagName("a"); miniTab.destX = parseInt(liArr[miniTab.activeTab].offsetLeft + liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetLeft + ul.offsetLeft); miniTab.destW = parseInt(liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetWidth); miniTab.t = 0; miniTab.b = miniTab.slideObj.offsetLeft; miniTab.c = miniTab.destX - miniTab.b; miniTab.bW = miniTab.slideObj.offsetWidth; miniTab.cW = miniTab.destW - miniTab.bW; miniTab.slideObj.style.top = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px"; }, slideIt:function() { var ul = document.getElementById("miniflex"); var liArr = ul.getElementsByTagName("li"); var aArr = ul.getElementsByTagName("a"); // Has the browser text size changed? if(miniTab.aHeight != ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) { miniTab.initAnim(); miniTab.aHeight = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop }; if(miniTab.t++ < miniTab.d) { var x = miniTab.animate(miniTab.t,miniTab.b,miniTab.c,miniTab.d); var w = miniTab.animate(miniTab.t,miniTab.bW,miniTab.cW,miniTab.d); miniTab.slideObj.style.left = parseInt(x) + "px"; miniTab.slideObj.style.width = parseInt(w) + "px"; } else { miniTab.slideObj.style.left = miniTab.destX + "px"; miniTab.slideObj.style.width = miniTab.destW +"px"; } }, animate: function(t,b,c,d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; }}window.onload = miniTab.init;window.onunload = miniTab.cleanUp;