// http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial
(function($){
 	$.fn.extend({ 
 		magicLine: function(options) {
 			
 			var defaults = {
				currentClass: 'selected',
				color: '#000000',
				height: '1',
				position: 'bottom'
			}
			var options =  $.extend(defaults, options);
			
    		return this.each(function() {
    			var o = options;
				var obj = $(this);
				
				// http://css-tricks.com/jquery-magicline-navigation/
				var $el, leftPos, newWidth, $mainNav = obj;

				$mainNav.append('<span class="magic-line" style="background-color:'+o.color+'; height: '+o.height+'px; position: absolute; '+o.position+': 0; left: 0;display:inline;"></span>');
				var $magicLine = $(".magic-line", $mainNav);
				
				if ($("li."+o.currentClass, $mainNav).length) {
					$magicLine
						.width($("li."+o.currentClass, $mainNav).outerWidth())
						.css("left", $("li."+o.currentClass+" a", $mainNav).position().left)
						.data("origLeft", $magicLine.position().left)
						.data("origWidth", $magicLine.width());
				}

				$("li a", $mainNav).hover(function() {
					$el = $(this);
					leftPos = $el.position().left;
					newWidth = $el.parent().width();
					$magicLine.stop().animate({
						left: leftPos,
						width: newWidth
					});
				});
				
				$("li a", $mainNav).bind('click', function() {
					$magicLine.data("pageClicked", true);
				});
				
				$mainNav.bind('mouseleave', function() {
					if (!$magicLine.data("pageClicked")) {
						if($magicLine.data("origLeft") == undefined) {
							$magicLine.data("origLeft", 0);
							$magicLine.data("origWidth", 0);
						}
						
						$magicLine.stop().animate({
							left: $magicLine.data("origLeft"),
							width: $magicLine.data("origWidth")
						});
					}
				});
			
    		});
    	}
	});
})(jQuery);