## jquery extension

jQuery.fn.extend({	// We want our navigation set up to reveal itself when hovering over the containing div.
					// This function is called for each button, to set up this behaviour.
					// we extend jQuery like this to allow chaining among other jQuery functions
	navSetup: function(arguments,$target) { // we've brought the orientation of the button's hide direction with us
		if (!$target) {var $target = $(this)};
		var options = {		// setting up some options for the animation of the buttons when hovered over
				distance: 82,		// distance in pixels to move it
				show: {
					duration: 50,
					queue:false			// we don't want to wait for other animations to happen first, which will improve responsiveness.
				},		// milliseconds to show the button
				hide: {
					duration: 150,
					queue:false			// we don't want to wait for other animations to happen first, which will improve responsiveness.
				},		// ms to hide the button
				mouseover: {		// our options for the hoverIntent jQuery plugin
				    sensitivity: 10,	// number = sensitivity threshold (must be 1 or higher)
				    interval: 80,		// number = milliseconds for onMouseOver polling interval
				    timeout: 160,		// number = milliseconds delay before onMouseOut
					over: function(){$target.animate(args.show,options.show)},
										// when hovering over the button, animate with css argument hash and predefined duration
					out: function(){$target.animate(args.hide,options.hide).css('background-position','left')}
										// when finished hovering, animate with css argument hash and predefined duration
				},
		// at the start, the buttons are already presented and we'll want to hide them from view slowly
				intro: {		// setting up animation options for the nav 'introduction'
					duration: 1500		// duration in ms to hide them from view
			// easing: 'swing'
				}
			},
			args = setupArgsAltAlt(arguments.due);

		$(this)					// select the button (relative to the called element, as previously defined)
			.hover(
				function(){
					$(this)
						.stopTime(this.id)
						.hoverIntent(options.mouseover);
				},function(){})
			.oneTime((arguments.delay),(this.id),function(){
								// set up a delay (brought in as an argument earlier) using the timers plugin
								// we will wait this amount first, so the user can get a good look.
				$(this).hoverIntent(options.mouseover); // use our options to setup the hoverIntent plugin on the called element

				$target.animate(args.hide,options.intro);
								// then animate the hiding of the button
		});

		return $(this);			// pass back the called element (for further jQuery chaining).
	},
## jquery function supporting the above

function setupArgsAltAlt(o) {
	var a = {'show':{},'hide':{}}, s='left';
	if (o=='west') {
		a.hide[s] = "-36px";
	} else {
		a.hide[s] = "136px";
	};
	a.show[s] = "32px";
	return a;
}

## jquery document ready

		// setup scrolling with all buttons contained within the main slideshow and pane navigation
	$('#left').navSetup({due:'west',delay:5000},$('#left a'));		// setup the animation for the main slideshow navigation buttons
	$('#right').navSetup({due:'east',delay:5000},$('#right a'));		// each button's containing div is sent to a function along with it's orientation and an initial delay time
	$('#top').paneSetup({due:'north',delay:3000},$browser);		// this will hide the buttons and allow them to be revealed when hovering
	$('#bottom').paneSetup({due:'south',delay:3000},$details);	// over the area they are contained within (occupying a large area at the edges)


## html

			<span id="photonav">
				<div id="left"><a class="button prev"></a></div>
				<div id="center"></div>
				<div id="right"><a class="button next"></a></div>
			</span>