// dom ready



$(function() {

    var $el, leftpos, newwidth;
        $mainnav2 = $("#example-two");
    
    /*
        example one
    */
    
    /* add magic line markup via javascript, because it ain't gonna work without */
   /* $("#example-one").append("<li id='magic-line'></li>");*/
    
    /* cache it */
   /* var $magicline = $("#magic-line");
    
    $magicline
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origleft", $magicline.position().left)
        .data("origwidth", $magicline.width());
        
    $("#example-one 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")
        });    
    });*/
    
    
    
    
    /*
        example two
    */
    
    $mainnav2.append("<li id='magic-line-two'></li>");
    
    var $magiclinetwo = $("#magic-line-two");
    
    $magiclinetwo
        .width($(".current_page_item_two").width())
        .height($mainnav2.height())
        .css("left", $(".current_page_item_two a").position().left)
        .data("origleft", $(".current_page_item_two a").position().left)
        .data("origwidth", $magiclinetwo.width())
        .data("origcolor", $(".current_page_item_two a").attr("rel"));
                
    $("#example-two a").hover(function() {
        $el = $(this);
        leftpos = $el.position().left;
        newwidth = $el.parent().width();
        $magiclinetwo.stop().animate({
            left: leftpos,
            width: newwidth,
            backgroundcolor: $el.attr("rel")
        })
    }, function() {
        $magiclinetwo.stop().animate({
            left: $magiclinetwo.data("origleft"),
            width: $magiclinetwo.data("origwidth"),
            backgroundcolor: $magiclinetwo.data("origcolor")
        });    
    });
    
    /* kick ie into gear */
    $(".current_page_item_two a").mouseenter();
    
});