( function($) {
	$( document ).ready( function() {
		// get the predefined location, if we have one, otherwise default to surveys
		var feature = location.hash.substr( 1 );
		if ( feature == '' )
			feature = 'surveys';

		// nav click function
		$( '#nav li a' ).click( nav_swapper );
		
		function nav_swapper() {
			// Prevent further clicks until we're done
			$( this ).unbind( 'click' ).click( function() {
				return false;
			} );

			// grab the various IDs and content areas we need around the page
			var parent = $( this ).closest( 'li' );

			// the new set of content to display
			var currentContentID = $( this ).attr( 'rel' );

			// get previous item id
			var previousItemID = $( "#nav li.active a" ).attr( "rel" );

			// set the nav item classes
			$( '#nav li' ).removeClass( 'active' );

			parent.addClass( 'active' );

			// move the arrow into place
			// slide the arrow into position
			var pos = parent.position();
			var trianglepos = $( '#nav' ).position().left + pos.left + ( parent.width() / 2 ) - ( $( '#features-arrow' ).width() / 2 );

			$( '#features-arrow' ).css( 'left', trianglepos );

			// hide the last content and show the new content
			if ( $.support.transition ) {
				$( '#' + currentContentID + '-content' ).addClass( 'show' ).removeClass( 'hide' );

				// we need to take care of removing the selected state classes because things go wonky re: css inheritance if we don't
				$( '#what-you-get' ).removeClass( previousItemID );
				$( '#what-you-get' ).addClass( currentContentID );
			}
			else {
				$( '#' + currentContentID + '-content' ).switchClass( 'hide', 'show', 1000 );

				// we need to take care of removing the selected state classes because things go wonky re: css inheritance if we don't
				$( '#what-you-get' ).switchClass( previousItemID, currentContentID );
			}

			// Funky re-enabler for transitions
			setTimeout( function() {
				$( '#nav li a' ).unbind( 'click' ).click( nav_swapper );
			}, 1000 );
			
			return false;
		};

	} );
} )( jQuery );