jQuery.noConflict();
jQuery(document).ready(function($){

	var $el;
	var leftPos;
	var newWidth;
	
	var animDuration = 600;
	var animEase = "easeOutCubic";
	
	jQuery('#menu ul.menu-main').append("<li id='magic-line'></li>").addClass('magiclined');
	var $magicLine = jQuery("#magic-line");
	
	
	var $activeMenu;
	
	if(jQuery("#menu .menu-main > li#tray-active").length > 0) {
		$activeMenu = jQuery("#menu .menu-main > li#tray-active");
	} else {
		$activeMenu = jQuery("#menu .menu-main > li.first");
	}
	
	$magicLine
		.width($activeMenu.width())
		.css({
			left: $activeMenu.position().left,
			//backgroundColor: jQuery("#nav .menu > li.active > a").css('color')
		})
		.data("origLeft", $magicLine.position().left)
		.data("origWidth", $magicLine.width());
	  
	jQuery("#menu .menu-main > li").hover(function() {
		$el = jQuery(this);
		leftPos = $el.position().left;
		newWidth = $el.width();
		//newColor = $el.find('a').css('color');
		$magicLine.stop().animate({
			left: leftPos,
			width: newWidth
		},{
			duration: animDuration,
			easing: animEase
		});
	}, function() {
		$magicLine.stop() .animate({
			left: $magicLine.data("origLeft"),
			width: $magicLine.data("origWidth")
		},{
			duration: animDuration,
			easing: animEase
		});
	});

});