/*
	jquery animated navigation slider effect thing
	Jake Teton-Landis <just.1.jake@gmail.com>
	
	REQUIRES jquery (written alongside jquery 1.6.1, not many features used)
*/
if ( typeof jynx === 'undefined' ) { jynx = {}; }

jynx.slideMenu = function( selectorNavlist, selectorChildren, givenOpts ) {
	/* Options object
		activePage: 	selector to find the element that corresponds to the active page
		indicatorClass: class to add to the navlist to indicate that it's being scripted
		sliderClass:  	class to add to the new slider
		sliderCode: 	HTML snippet to add to the nav. default: '<li></li>'
	*/ 
	var func, $nav, $slider, defaults, opts = {};
	
	func = {
		hoverin: function(e){
			$slider.stop().stop().stop().animate({
				left: $(this).position().left,
				width: $(this).width()
			});
		},
		hoverout: function(e, noanimate){
			// debugging infos
			// console.log('hoverout occured');
			var $el = $(this);
			if (noanimate) {
				$slider.stop().css({
					left: $slider.data('pos').left,
					width: $slider.data('pos').width
				});
			} else {
				$slider.stop().queue(function(next){
					// wait if we're currently centered on an element
					if ($slider.position().left === $el.position().left) {
						$slider.animate({left: $slider.position().left}, 300);
					}
					// procede the queue
					next();
				}).animate({
					left: $slider.data('pos').left,
					width: $slider.data('pos').width
				});
			}
		}, 
		click: function(e){
			// change active on click
			$slider.data("pos", {
				width: 		$(this).width(),
				height: 	$(this).height(),
				left: 		$(this).position().left,
				top: 		$(this).position().top
			});
			
			if ( opts.clickOnly ) {
				func.hoverout.apply(this);
			}

			$nav.find(opts.activeClass).removeClass( opts.activeClass.slice(1) );
			$(this).addClass( opts.activeClass.slice(1) );
			
			if ( opts.animateColor ) { // @TODO make colors fade nicely
				// $(this).css
			}
		},
		dblclick: function(e) {
			$slider.stop().css({
				left: $slider.data('pos').left,
				width: $slider.data('pos').width
			});
		}	
	}
	
	defaults = { 
		activeClass: '.active', // NOT ACTUALLY A CLASS, rather, class selector ('.' + class)
		indicatorClass: 'scripted', 
		sliderClass: 'slider', 
		sliderCode: '<li></li>',
		pos: {left: -120, width: 11},
		css: {'position': 'absolute'},
		animateColor: false,
		clickOnly: false
	}
	
	$.extend( opts, defaults, givenOpts );
	
	// cache jquery representations	
	$nav = $(selectorNavlist).addClass(opts.indicatorClass)
		.css('position', 'relative');
	$slider = $(opts.sliderCode).addClass(opts.sliderClass)
		.css( $.extend({}, opts.css, opts.pos) );
	// console.log(opts.activeClass);
	// console.log($(opts.activeClass));
	if ( $nav.find(opts.activeClass).length > 0 ) {
		// place slider under active page's link
		$slider.data("pos", {
			width: 		$nav.find(opts.activeClass).width(),
			//height: 	$nav.find(opts.activeClass).height(), // If you find a use for this code that needs height change, feel free to enable
			left: 		$nav.find(opts.activeClass).position().left,
			top: 		$nav.find(opts.activeClass).position().top
		});

		$slider.css( $slider.data("pos") );
	} else {
		$slider.data("pos", opts.pos);
	}
	
	// add slider to nav bar
	$slider.prependTo($nav);
	
	$nav.find(selectorChildren).click( func.click ).dblclick( func.dblclick );
	
	
	if ( ! opts.clickOnly ) {
		// add hover handlers
		$nav.find(selectorChildren).hover( func.hoverin, func.hoverout ); 
	}
	
	// maybe this will be a plugin in the future
	return $nav;
}