var fbMenuBar = (function(){
//statics
function getTags(dom,tagName){
if(!document.getElementsByTagName)
throw new Error("Your Brower doesn't support!");
if(!tagName || typeof tagName != "string")
throw new Error("Need TagName");
return dom.getElementsByTagName(tagName);
}

return function(sId){
//privates
var elebox = fbMenuBar.$(sId);
var btns = [];
var len;
var bgbtn = document.createElement("div");
bgbtn.id = "fbmenubg";
elebox.insertBefore(bgbtn,getTags(elebox,"ul")[0]);
var ftbtn = document.createElement("div");
ftbtn.id = "fbmenubtn";
var btnPos = bgbtn.offsetLeft;
var timer;
var speed = 20;

//constructor
if(!elebox)
throw new Error("There is no element called " + sId);
var list = getTags(elebox,"li");
len=list.length;

var table = document.createElement("table");
table.setAttribute("cellPadding","0");
table.setAttribute("cellSpacing","0");
table.setAttribute("border","0");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");

for(var i=0;i<len;i++){
var alink = document.createDocumentFragment();
alink.appendChild(list[i].firstChild);
var td = document.createElement("td");
td.appendChild(alink);
btns.push(td.firstChild);
list[i].innerHTML = td.firstChild.innerHTML;
tr.appendChild(td);
}

tbody.appendChild(tr);
table.appendChild(tbody);
ftbtn.appendChild(table);elebox.appendChild(ftbtn);

for(var i=0;i<len;i++){
list[i].index = i;
list[i].onmousemove = function(){
btnPos = this.index * 86 + 4;
};
}

this.showBtn = function(){
timer = setInterval(function(){
var oPosX = bgbtn.offsetLeft;
if(oPosX == btnPos) return;
var _speed = Math.round((btnPos - oPosX)/speed);
if(oPosX>btnPos&&_speed>-1) _speed = -1;
if(oPosX<btnPos&&_speed<1) _speed = 1;oPosX = oPosX + _speed;
bgbtn.style.left = oPosX + "px"; 
ftbtn.style.left = oPosX + 4 + "px";
table.style.marginLeft = -4 - oPosX  + "px";
},1);
}

}
})();

fbMenuBar.$ = function(sId){
if(!document.getElementById)
throw new Error("Your Brower doesn't support!");
if(!sId || typeof sId != "string")
throw new Error("Need ID");
return document.getElementById(sId);
}
fbMenuBar.getOffset = function(ele){

};

fbMenuBar.mousePosition = function(evt){
evt = evt || window.event;
if(evt.pageX || evt.pageY){ 
return {x:evt.pageX, y:evt.pageY}; 
} 
return { 
x:evt.clientX + document.body.scrollLeft - document.body.clientLeft, 
y:evt.clientY + document.body.scrollTop  - document.body.clientTop 
}; 
} 

//Window Onload
window.onload = function(){
var fb = new fbMenuBar("fbmenubar");
fb.showBtn();
}