var menuSlider = function() {
	
	var menuList;
	var menus=[];
	var selectedMenu;
	var slider;
	var ratio=5;
	var interval = 10;
	
	return {
		init:function(targetId, sliderId){
			menuList = document.getElementById(targetId);
			menus = menuList.getElementsByTagName("LI");
			for(var i=0; i<menus.length; i++) {
				var element = menus[i];
				if(element.className == "selected") {
					selectedMenu = element;
				}
				element.onmouseover = function() {
					menuSlider.musOver(this);
				}
				element.onmouseout = function() {
					menuSlider.musOver(selectedMenu);
				}
			}
			slider = document.getElementById(sliderId);
			slider.style.left = (selectedMenu.offsetLeft-1)+'px';
			slider.style.width = (selectedMenu.offsetWidth+2)+'px';
			slider.style.display = "block";
		},
		musOver:function(target){
			clearInterval(slider.timer);
			var targetPos,targetWth;
			targetPos = parseInt(target.offsetLeft);
			targetWth = parseInt(target.offsetWidth);
			slider.timer = setInterval(function(){menuSlider.sldMove(targetPos,targetWth)},interval);
		},
		sldMove:function(targetPos,targetWth){
			var sliderPos,sliderWth;
			sliderPos = parseInt(slider.offsetLeft);
			sliderWth = parseInt(slider.offsetWidth);
			if(sliderPos!=(targetPos-1)||sliderWth!=(targetWth+2)) {
				if(sliderPos!=(targetPos-1)){
					var posDrc = (sliderPos>(targetPos-1))?-1:1;
					var posDfe = Math.abs(sliderPos-(targetPos-1));
					var posInc = posDfe/ratio;
					posInc = (posInc<1)?1:posInc;
					posInc = posDrc*posInc;
					slider.style.left=(sliderPos+posInc)+'px';
				}
				if(sliderWth!=(targetWth+2)){
					slider.style.width=(targetWth+2)+'px';
				}
			} else {
				clearInterval(slider.timer);
			}
		}
	}; 
	
}();

addListener(window, 'load', function(){menuSlider.init('btns','slider');});