/*
 *  NavAnimate 1.0
 *  Requires jQuery 1.4+ and jQueryUI 1.8+
 *  
 *  Any individual portion of the settings may be overridden including
 *  the animation effect, speed, and special options for the effect. Style
 *  the rollover with your own CSS declaration 'div.hiddenNavDiv' and/or with
 *  content in the added div (using the function argument).
 */
(function( $ ){
	$.fn.navAnimate = function(options) {
		var settings = {
			'content' : '',
			'mouseOver' : {
				'effect' : 'fade',
				'speed' : 500,
				'options' : {}
			},
			'mouseOut' : {
				'effect' : 'fade',
				'speed' : 500,
				'options' : {}
			}
		};
		$.extend(true,settings,options);
		
		this.css('position','relative');
		var left = new Array();
		left[0] = 0;
		var count = 0;
		this.children().each(function() {
			//Label child links, position them absolutely
			$(this).attr('id','navA'+count).css('position','absolute');
			//Calculate how far from left each link & hidden div should be
			if(count != 0)
				left[count] = left[count-1] + $('#navA'+(count-1)).innerWidth();
			//Position the link and add the hidden div behind it
			$(this).css('left',left[count]+'px').before('<div id="navD'+count+'" class="hiddenNavDiv">'+settings['content']+'</div>');
			//Add necessary styling for positioning the hidden divs
			$('#navD'+count).css({
				height: $(this).innerHeight(),
				width: $(this).innerWidth(),
				position: 'absolute',
				display: 'none'
			}).css('left',left[count]);
			$(this).mouseover(function() {
				$('#navD'+$(this).attr('id').substr(4)).show(settings['mouseOver']['effect'],settings['mouseOver']['options'],settings['mouseOver']['speed']);
			}).mouseout(function() {
				$('#navD'+$(this).attr('id').substr(4)).hide(settings['mouseOut']['effect'],settings['mouseOut']['options'],settings['mouseOut']['speed']);
			});
			count++;
		});
	};
})( jQuery );