//Next:
//make so I can use keyboard
//image loader
var animating= 			false; // begin false (animating either enables or disables an animation when a button is clicked)


$(document).keyup(function(e){ //listen for the keystroke
	
	switch (e.keyCode) {  //check which key is pressed
		case 37: move('left'); 
		break; 
		case 39: move('right'); 
		break; 
	} 
	
	
});


function move(direction) { 
	
	var rightExtent=	-3416, // the max length of all images side by side 
	leftExtent=		    854, // the max negative length of all images side by side (Change to width of images)
	position=			parseInt($('#slider').css('left'), 10), //changes the css left string to a numeric value
	imgWidth=			854, //(Change to width of images)
	newPosition; //take value stored in position and add given width then store in newPosition
	
	
	
	switch (direction) { 
		case 'right' : newPosition=position-imgWidth; 
		break; 
		case 'left'  : newPosition=position+imgWidth;
		break;
	}
	
	if (animating) { //if animating var is true exit the function
		return;
	}
	
	
	
	if (newPosition>rightExtent && newPosition<leftExtent){ //if the number in new position is less than positiveTotal (2500) 
 		animating=true; //change animating to true, no double click
 		
		
		
 		$('ul').animate({left: newPosition}, 1000, function() { //move the image 
 			animating = false; // I am now open to pressing the button again
 		});
 			
	} 
	 
	if (newPosition<=rightExtent+imgWidth) { //if the newPosition is at 0 remove the left button from the page
		$('#button_right').css('display', 'none'); 	
	} else { 		
		$('#button_right').css('display', 'block');
	}
	
	if (newPosition>=leftExtent) { 
		$('#button_left').css('display', 'none');	
	} else { 
		$('#button_left').css('display', 'block');
	}


}



$(document).ready(function(){
	
	$('#button_left').on('click', function(){
		move('left');
	});
	
	$('#button_right').on('click', function(){
		move('right');
	});
	
	$('#button_left').css('display', 'none');
	
});