// DOM Ready
$(function() {
    
    /* Add slider elements */
    $(".nav").append("<div class='left'></div>");
	$(".nav").append("<div class='right'></div>");
	$(".nav .left").css({ opacity: 0.18 });
	$(".nav .right").css({ opacity: 0.18 });
	$(".line").css({ opacity: 0.5 });

    /* Left block */
    var $magicLine = $(".left");
    
    $magicLine
        .css("left", $(".active a").position().left)
        .data("origLeft", $magicLine.position().left)
		
    $("#topnav li").find("a").hover(function() {
        $el = $(this);
        leftPos = ($el.position().left - 345);
     	
        $magicLine.stop().animate({
            left: leftPos
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft")
        });    
    });	
	
	/* Right block */
	var $magicLineR = $(".right");    
	
	
	if ( $.browser.msie ) {
 	$magicLineR
	.css("left", $(".active a").position().left + $(".active a").outerWidth() - 345 )
		 .data("origLeftR", $magicLineR.position().left) 	
	} else {
	$magicLineR
	.css("left", $(".active a").position().left + $(".active a").width() - 345 + 18 ) 
		 .data("origLeftR", $magicLineR.position().left) 
	
	};
	


	$("#topnav li").find("a").hover(function() {
        $el = $(this);
        leftPosR = ($el.position().left + $el.outerWidth() );
     	
        $magicLineR.stop().animate({
            left: leftPosR 
        });
    }, function() {
        $magicLineR.stop().animate({
            left: $magicLineR.data("origLeftR")
        });    
    });
});