var currentImage 	= 0;
var nrImages 		= 0;
var width			= 887;

var animationTime = 400;


$(document).ready( function(){
	nrImages = $('.items img').size();
	$(".items").css( "width", nrImages * width );
	$('.gallery a.prev').click( galleryShowPrev );
	$('.gallery a.next').click( galleryShowNext );
	
	for( var i = nrImages - 1; i >= 0; i-- )
	{
		$('.gallery .navi').append( $('<a href="javascript:void(0);" rel="' + i + '"></a>').click( galleryJump ) );
	}
	
	galleryJumpTo(0);
})

function galleryShowNext()
{
	followingImage 	= ( currentImage + 1 ) % nrImages;
	
	galleryJumpTo( followingImage );
}

function galleryShowPrev()
{
	followingImage 			= currentImage - 1;
	if( followingImage < 0 ) followingImage = nrImages - 1;
	
	galleryJumpTo( followingImage );
}

function galleryJump()
{
	galleryJumpTo( $(this).attr( "rel" ) );
}

function galleryJumpTo( index )
{
	followingImagePosition	= index * -1 * width;
	$(".items").animate( { left: followingImagePosition }, animationTime );
	
	currentImage 			= index;
	
	if( nrImages == 1 )
	{
		$('a.prev').hide();
		$('a.next').hide();
	}
	else
	{
		$('a.prev').show();
		$('a.next').show();
		if( index == 0 )
		{
			$('a.prev').hide();
		}
		
		if( index == nrImages - 1 )
		{
			$('a.next').hide();
		}
	}
	
	
	$(".gallery a").removeClass( "active" );
	$(".gallery a[rel=" + index +"]" ).addClass( "active" );
}