$(function(){

  var $el, leftPos, newWidth,
  $navbar = $("#navbar");
  $navbar.append("<li id='magic-line'></li>");
  var $magicLine = $("#magic-line");

  if( ($(".current")).length ){
    $magicLine
      .width($(".current").width())
      .height($navbar.height())
      .css("left", $(".current a").position().left)
      .data("origLeft", $(".current a").position().left)
      .data("origWidth", $magicLine.width())
      .data("origColor", $(".current a").attr("rel"));
  }
  else{
    $magicLine
      .width($(".first").width())
      .height($navbar.height())
      .css("left", $(".first a").position().left)
      .data("origLeft", $(".first a").position().left)
      .data("origWidth", $magicLine.width())
      .data("origColor", $(".first a").attr("rel"));
  };

$("#navbar li").find("a").hover(function() {
  $el = $(this);
  leftPos = $el.position().left;
  newWidth = $el.parent().width();
  $magicLine.stop().animate({
    left: leftPos,
    width: newWidth
  })
},

function() {
  $magicLine.stop().animate({
    left: $magicLine.data("origLeft"),
    width: $magicLine.data("origWidth")
    });
  });
});