window.addEvent('domready', function() {
    var nav = $('navheader'), lis = $$('#navheader li'), current = $E('li.current', nav);
    
    if (!current)
        current = $E('li', nav);
        
    var offset = current.offsetLeft.toInt() + (Math.floor(current.getStyle('width').toInt() / 2)) - 45 - 7;
    
	var slider = new Element('div', {
        'id': 'slider',       
        'styles': {
                'left': offset,
                'top': 94
        }       
    });    
    nav.appendChild(slider);
    
    var fx = new Fx.Styles(slider, {
    	duration: 500,
    	wait: false,
    	transition: Fx.Transitions.linear
    });
    
    lis.each(function(li, i) {
        li.addEvent("mouseenter", function(event) {
            var posi = this.offsetLeft.toInt() + (Math.floor(this.getStyle('width').toInt() / 2)) - 45 - 7;
    		fx.start({
    			'left': [slider.getStyle('left').toInt(), posi]    			
    		})
    	});       
    });
    
    nav.addEvent("mouseleave", function(event) {            
        fx.start({
            'left': [slider.getStyle('left').toInt(), offset]    			
        })
    });
});