A sort of image slider logic

slider.js

		// replace background image when user clicks on a thumbnail
		$projectImages.live( 'click', function(e) {
			e.preventDefault();
			var $this = $( this ),
				$bgImage = $( '.current-section .bg-image' ),
				oldSrc = $bgImage.attr( 'src' ),
				newSrc = $this.find( 'img' ).attr( 'src' ),
				marginValue = $this.width() + 20, // 20 for the 10px margin-left and right
				newThumbnail = '<li><a href="#"><img src="' + oldSrc + '" class="scale-with-grid"></a></li>',
				newBgImage = '<img src="' + newSrc + '" alt="" class="bg-image">';

			// only append/prepend if the first thumnail is not animating
			if( $( '.current-section #project-images > li:eq(0)' ).not(':animated') ) {

				
				if( !$this.index() ) {
					marginValue = -marginValue;
					//add to end of list
					$projectImages
						.parent()
						.append( newThumbnail );
				} else {
					// add to start of list
					$projectImages
						.parent()
						.prepend( newThumbnail );
					
					$( '.current-section #project-images > li:eq(0)' ).css( 'margin-left', -marginValue );
					marginValue = 10;
				}

				//since we've added to the list, we need to get the latest version of it
				$projectImages = $( '.current-section #project-images > li' );

				$projectImages.eq(0).animate({
					'margin-left' : marginValue
				}, 400, function() {
					$this.remove();
				});
				
				$bgImage.fadeOut( 200, function() {
					$( this ).remove();
				});
				
				$content.prepend( newBgImage );

				//implemenets the scalable full page bg on new bg image
				slide.fullPageImage();

			} 
			

		});