jQuery(document).ready(function(){

    var $el, leftPos, newWidth,
        $mainNav = jQuery("#nav");

    var positions = {
        'home'          : 0,
        'about'         : 83,
        'services'      : 175,
        'industries'    : 368,
        'workshops'     : 489,
        'media'         : 706,
        'contact'       : 795
    };

    /*
        EXAMPLE ONE
    */
    $mainNav.append("<li id='magic-line'></li>");

    var $magicLine = jQuery("#magic-line");

    $magicLine
        .width(jQuery(".active").width())
        .css("left", jQuery(".active a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    jQuery("#nav li").find("a").hover(function() {
        $el = jQuery(this);
        el_class = $el.attr("class");

        jQuery("span",this).css("background","url(../images/nav-txt_test.gif) no-repeat");

        leftPos = positions[el_class];
        newWidth = $el.parent().width();

        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
        jQuery("span",this).css("background","url(../images/nav-txt.png) no-repeat");
    });

});