var current = 1;
var description;
var mainpage;
var thumblength;

$( document ).ready( function( ) {
	
	function navigateTo( i ) {
		
		if( i < 1 )
			current = $( "#thumbnails img" ).length;
		else if( i > $( "#thumbnails img" ).length )
			current = 1;
		else
			current = i;
		
		thisOne = $( "#thumbnails img:nth-child(" + ( current + 1 ) + ")" );
		
		thisImage = new Image( );
		
		$( thisImage ).load( function( ) {
				
			var URLSplit = $( this ).attr( "src" ).split( '.' );
			var NameSplit = URLSplit[ URLSplit.length - 2 ].split( '/' );
			var Name = NameSplit[ NameSplit.length - 1 ];
				
			$( "#photo" ).html( "" ).append( this );
			$( "#description" ).html( thisOne.data( "description" ).replace( /#ID#/gi, current ).replace( /#NAME#/gi, Name ) ).width( $( this ).width( ) );
			$( "img#photospacer" ).width ( $( this ).width( ) ).height( $( this ).height( ) );
									  
    	} ).attr( "src", thisOne.attr( "src" ).replace( /thumbnails/, "images" ) );
		
		//$( "#photo" ).html( '<img src="' + thisOne.attr( "src" ).replace( /thumbnails/, "images" ) + '" border="0" />' );
		//$( "#description" ).html( thisOne.data( "description" ).replace( /#ID#/gi, current ).width( $( "#photo img" ).width( ) );
		//$( "img#photospacer" ).width ( $( "#photo img" ).width( ) ).height( $( "#photo img" ).height( ) );
		$( "#thumbnails .container" ).animate( { scrollLeft: 2000 + ( current ) * ( Number( thumblength ) + 10 ) - ( $( window ).width( ) + Number( thumblength ) ) / 2 },
											   { duration: 250, queue: false } );
		
	}
	
	// Animate thumbnail bar
	$( "#thumbnails" ).hover( function( ) {

		$( "#thumbnails .container" ).animate( { height: 120 },
											   { duration: 1000, queue: false } );

	}, function( ) {
	
		$( "#thumbnails .container" ).animate( { height: 0 },
											   { duration: 1000, queue: false } );
	
	} );
	
	// Find out what the gallery is
	g = window.location.href.split( "/" );
	g = g[ g.length - 2 ];
	
	// Load data
	$.ajax( {
		type: "GET",
		url: "../images_" + g + ".xml",
		dataType: "xml",
		success: function( xml ) {
			
			mainpage = $( "settings mainpage", xml ).text( );
			description = $( "settings description", xml ).text( );
			thumblength = $( "settings thumblength", xml ).text( );
			document.title = "pietboer.nl ~ " + $( "settings galleryname", xml ).text( );
			
			$( "#thumbnails .container" ).html( "<span></span>" );
			
			$( "image", xml ).each( function( ) {
			
				img = '<img src="http://www.pietboer.nl/view/thumbnails/' + $( this ).attr( "src" ) + '" border="0" />';
				$( "#thumbnails .container" ).append( img );
				$( "#thumbnails .container img:last" ).data( "description", !$( this ).attr( "description" ) ? description : $( this ).attr( "description" ) );
				
			} );
			
			$( "#thumbnails img" ).click( function( ) {
			
				navigateTo( $( "#thumbnails img" ).index( this ) + 1 );
			
			} );
			
			$( "#thumbnails .container" ).append( "<span></span>" );
			
			navigateTo( 1 );
			
		}
	} );
	
	// Navigate by arrow-keys
	$( document ).keyup( function( event ) {
								
		switch( event.keyCode ) {
		
			case 37:
				navigateTo( current - 1 );
			break;
			case 38:
				window.location = mainpage;
			break;
			case 39:
				navigateTo( current + 1 );
			break;
			
		}
		
	} );
	
	// Navigate by buttons
	$( ".navigation-up" ).click( function( ) {
		window.location = mainpage;
	} );
							  
} );