(function($){
	var Menu = {

			animator : {
				foreground : null,
				background : null
			},

			globals : {
				offset	: null,
				width	: null,
				id		: null
			},

			base : null,

			current : null,

			timer : null,

			initialize : function() {


				// store items that are used a lot
				if( $('#nav li.active').length < 1 ) {
					$('#nav li:first').addClass('active');
				}
				Menu.base = $('#nav li.active a');
				Menu.animator.background = $('#hover-item');
				Menu.animator.foreground = Menu.animator.background.find('.hover-fill');

				// show the animator
				Menu.animateTo( Menu.base );

				// bind the hover
				$('#nav li a').hover(function(){

					clearTimeout( Menu.timer );

					$('.over').removeClass('over');

					var item = $(this);

					Menu.globals.id = item.attr('id');

					// we are hovering this item already
					if( Menu.current == Menu.globals.id ){
						return;
					}

					Menu.current = Menu.globals.id;

					Menu.animateTo( item );

				},function(){
					// back to the default one
					Menu.timer = setTimeout(function(){
						$('.over').removeClass('over');
						Menu.current = Menu.base.attr('id');
						Menu.animateTo( Menu.base );
					},250);
				});
			},

			animateTo : function( element ) {

				Menu.globals.offset = element.position();
				Menu.globals.width  = element.outerWidth() - 59;

				element.addClass('over');

				Menu.animator.background.stop().animate({
					left: Menu.globals.offset.left,
					width: element.outerWidth() + 1,
					height: '57px'
				} , 500, function(){
				});

				Menu.animator.foreground.stop().animate({
					width: Menu.globals.width
				}, 500);

			}

		};

		$(document).ready(function(){
			Menu.initialize();
		});
})(jQuery);