/* mousetrack.js */
var yTop; // distance wrapslide is from the top of the page
 
 
jQuery.easing.def = "easeInOutQuart"; // apply easeInOutQuart easing
 
function mouseFollow(e, id) { // mouseFollow() is called whenever the mouse enters a nav slider, id assigned to be slidePrev or slideNext
	var mouseYPos = e.pageY - yTop; // y-coord of mouse relative to wrapslide
		$('#readout').html('yTop =' + yTop + ', e.pageY' + e.pageY + ', mouseYPos = ' + mouseYPos); // display mouse tracking data, can be removed
 
	var heightBox = $(id + ' a').height(); // find height of clickable a tag
	var slideHeight = $(id).height(); // height of slidePrev or slideNext, the length of the whole slide-able area
	if (mouseYPos > 0 && mouseYPos < slideHeight ) { //ensure clickable a tag does not slide off #slidePrev or #slideNext
 
		var boxYPos; // this will track where the top of the a tag should be
		if (mouseYPos < (heightBox / 2)) { // prevents a tag from sliding above #slidePrev when the mouse is near the top of the div
			boxYPos = heightBox / 2;	 // force a tag to stay within div
		}
		else if (mouseYPos > slideHeight - (heightBox / 2)) { // prevents a tag from sliding below div when the mouse is near the bottom of the div
			boxYPos = slideHeight - (heightBox / 2); // force a tag to stay within div
		}
		else { boxYPos = mouseYPos; } // allow a tag to follow mouse if the mouse is in the middle of the div
 
		$(id + ' a').stop(true, true); // stops the mouseEnd() animation, so the a tag follows the mouse without delay.
		$(id + ' a').css('top', boxYPos - (heightBox / 2)); // - (heightBox/2) puts the mouse pointer in the center of the a tag.
	}
}
 
function mouseEnd(id) { // mouseEnd is called when the mouse leaves the nav slider
	var slideHeight = $(id).height();
	var heightBox = $(id + ' a').height();
	$(id + ' a').animate({top: (slideHeight/2) - (heightBox/2)}, 500); // a tag will ease back to the center of the div when the mouse leaves the div area
}
 
 
 
$( function(){
 
	// grab distance wrapslide is from the top of the page
	yTop = $('div.wrapslide').css('top');
	yTop = parseInt(yTop); // strips the unit from css property (e.g. 50px becomes 50)
 
 
	// tracks mouse movement inside slider area
	$('#slidePrev').mousemove(function(e){
		mouseFollow(e, '#slidePrev');
	});
	$('#slideNext').mousemove(function(e){
		mouseFollow(e, '#slideNext');
	});
 
	// reset button location when pointer leaves slider area
	$('#slidePrev').mouseleave( function() {
		mouseEnd('#slidePrev');
	});
	$('#slideNext').mouseleave( function() {
		mouseEnd('#slideNext');
	});
 
});