// JavaScript Document

	function slideImages() {
	
		var currImage = 4;
		
		var imageNum = 0;
		var increment = 672;
		var imageWidth = 150;
		var padding = 12; 
	
		return {
			
			slideLeft: function() {
						
				//find how how many images you have left until the end
				//of the strip. 
				var imagesLeft = currImage-4;
				//if it's more than 4, just slide back 4
				if (imagesLeft >= 4) {
					currImage -= 4;
					var imagesToSlide = 4;
				} else {
					//if it's less than 4, slide back that number of images
					currImage -= imagesLeft;
					var imagesToSlide = imagesLeft
				}					
				//the new x pos is determinged by the number of images
				//you have to slide, plus some padding

				var newPos = (imagesToSlide*150) + (18 * (imagesToSlide)) ;
				//animate it
				$("#imgStrip").animate({"left":"+="+newPos},300);
				//if you're at the beginning, fade out the back button
				if (currImage == 4) {
					$("#portfolioBrowseLeft").animate({"opacity":0},300);
				} else {
					//if the next button needs to faded back in, fade it back in
					if ($("#portfolioBrowseRight").css("opacity") == 0) {
						$("#portfolioBrowseRight").animate({"opacity":1},300);
					}
				}
			},
			
			slideRight: function() {
				var totalImages = $("#imgStrip").children();
				var imagesLeft = (totalImages.length) - currImage;
				if (imagesLeft >= 4) {
					var imagesToSlide = 4;
					currImage += 4;
				} else {
					currImage += imagesLeft;
					var imagesToSlide = imagesLeft
				}
	
				var newPos = ((imagesToSlide*150) + (18 * (imagesToSlide))) * -1;
				//slide to the right
				$("#imgStrip").animate({"left":"+="+newPos},300);
				//if you're at the end, fade out the next button
				if (currImage == imageNum) {
					$("#portfolioBrowseRight").animate({"opacity":0},300);
				} else {
					if ($("#portfolioBrowseLeft").css("opacity") == 0) {
						$("#portfolioBrowseLeft").animate({"opacity":1},300);
					}
				}
				
			}
		}
	}