$(function(){

if ($.browser.msie) {
$('#nav1').attr('rel','rgb(11,129,133) ');
$('#nav2').attr('rel','rgb(255,15,244) ');
$('#nav3').attr('rel','rgb(210,225,72) ');
$('#nav4').attr('rel','rgb(67,130,31) ');
$('#nav5').attr('rel','rgb(120,188,237) ');
$('#nav6').attr('rel','rgb(193,0,119) ');
$('#nav7').attr('rel','rgb(122,95,255) ');
$('#nav8').attr('rel','rgb(0,105,255) ');
$('#nav9').attr('rel','rgb(175,20,22) ');
}
else {
$('#nav1').attr('rel','rgba(11,129,133,0.9) ');
$('#nav2').attr('rel','rgba(255,15,244,0.9) ');
$('#nav3').attr('rel','rgba(210,225,72,0.9) ');
$('#nav4').attr('rel','rgba(67,130,31,0.9) ');
$('#nav5').attr('rel','rgba(120,188,237,0.9) ');
$('#nav6').attr('rel','rgba(193,0,119,0.9) ');
$('#nav7').attr('rel','rgba(122,95,255,0.9) ');
$('#nav8').attr('rel','rgba(0,105,255,0.9) ');
$('#nav9').attr('rel','rgba(175,20,22,0.9) ');
};

    var $el, leftPos, newWidth,
        $mainNav2 = $("#example-two");
                    $("#example-two li a").click(function() {
$(this).parent().siblings().removeClass("current_page_item_two");
$(this).parent().addClass("current_page_item_two");
$magicLineTwo
.width($(".current_page_item_two").width())
.css("left", $(".current_page_item_two a").position().left)
.data("origLeft", $magicLineTwo.position().left)
.data("origWidth", $magicLineTwo.width());
});
    
 /*
        EXAMPLE TWO
    */
    $mainNav2.append("<li id='magic-line-two'></li>");
    
    var $magicLineTwo = $("#magic-line-two");
    
    $magicLineTwo
        $magicLineTwo
		.width($(".current_page_item_two").width())
		.height($mainNav2.height())
		.css("left", $(".current_page_item_two a").position().left)
		.css("background",$(".current_page_item_two a").attr("rel"))
        .data("origLeft", $(".current_page_item_two a").position().left)
        .data("origWidth", $magicLineTwo.width())
                
    $("#example-two li").find("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"),
            


        });
        
        
    });
});
