function positionImages ( )
{
	var $paul = $( 'img.paul.sixtyone' ).offset( );
	$( 'img.paul' ).css( { left: $paul.left, top: $paul.top } );

	var $john = $( 'img.john.sixtyone' ).offset( );
	$( 'img.john' ).css( { left: $john.left, top: $john.top } );

	var $george = $( 'img.george.sixtyone' ).offset( );
	$( 'img.george' ).css( { left: $george.left, top: $george.top } );

	var $ringo = $( 'img.ringo.sixtythree' ).offset( );
	$( 'img.ringo' ).css( { left: $ringo.left, top: $ringo.top } );
}


function moveIndicator ( anchor ) 
{ 
	var delta = anchor.offset( ).left - $( '.tuner-indicator' ).offset( ).left + 10;
	$( '.tuner-indicator' ).stop( ).animate( 
		{ left: "+=" + delta + "px" }	
	);

	$( 'img.current' ).animate( { opacity: 0 }, 750 ).removeClass( 'current' );

	switch ( anchor.closest( 'li' ).attr( 'id' ) )
	{
		case 'sixone':
			$( 'img.sixtyone' ).animate( { opacity: 1 }, 500 ).addClass( 'current' );
			break;
		case 'sixthree':
			$( 'img.sixtythree' ).animate( { opacity: 1 }, 500 ).addClass( 'current' );
			break;
// 		case 'sixfour':
// 			$( 'img.sixtyfour' ).animate( { opacity: 1 }, 500 ).addClass( 'current' );
// 			break;
		case 'sixfive':
			$( 'img.sixtyfive' ).animate( { opacity: 1 }, 500 ).addClass( 'current' );
			break;
		case 'sixsix':
			$( 'img.sixtysix' ).animate( { opacity: 1 }, 500 ).addClass( 'current' );
			break;
		case 'sixseven':
			$( 'img.sixtyseven' ).animate( { opacity: 1 }, 500 ).addClass( 'current' );
			break;
		case 'midsixseven':
			$( 'img.midsixtyseven' ).animate( { opacity: 1 }, 500 ).addClass( 'current' );
			break;
		case 'sixeight':
			$( 'img.sixtyeight' ).animate( { opacity: 1 }, 500 ).addClass( 'current' );
			break;
		case 'sixnine':
			$( 'img.sixtynine' ).animate( { opacity: 1 }, 500 ).addClass( 'current' );
			break;
	}
}

$.fn.image = function ( src, f ) {
    return this.each( function( ) { 
		this.src = src;
	} );
}


// $( window ).resize( positionImages );

$( function ( ) { 
	$( '.tuner ul li a' ).click( function ( ) { 
		moveIndicator( $( this ) );
		$( '.tuner-current' ).removeClass( 'tuner-current' );
		$( this ).closest( 'li' ).addClass( 'tuner-current' );
		return false;
	} );

	$( '.tuner .prev' ).click( function ( ) { 
		var $current = $( '.tuner-current' );
		var $prev = $current.prev( );
		if ( $prev.attr( 'id' ) )
		{
			$current.removeClass( 'tuner-current' );
			$prev.addClass( 'tuner-current' );
			moveIndicator( $prev.find( 'a' ) );
		}
		return false;
	} );

	$( '.tuner .next' ).click( function ( ) { 
		var $current = $( '.tuner-current' );
		var $next = $current.next( );
		if ( $next.attr( 'id' ) )
		{
			$current.removeClass( 'tuner-current' );
			$next.addClass( 'tuner-current' );
			moveIndicator( $next.find( 'a' ) );
		}
		return false;
	} );

	// preload images
	$( 'img.paul.sixtyfour' ).image( '/images/tuner/1964/paul.png' );
	$( 'img.paul.sixtyfive' ).image( '/images/tuner/1965/paul.png' );
	$( 'img.john.sixtyfour' ).image( '/images/tuner/1964/john.png' );
	$( 'img.john.sixtyfive' ).image( '/images/tuner/1965/john.png' );
	$( 'img.george.sixtyfour' ).image( '/images/tuner/1964/george.png' );
	$( 'img.george.sixtyfive' ).image( '/images/tuner/1965/george.png' );
	$( 'img.ringo.sixtyfour' ).image( '/images/tuner/1964/ringo.png' );
	$( 'img.ringo.sixtyfive' ).image( '/images/tuner/1965/ringo.png' );
//	positionImages( );
} );