$(document).ready(function(){
	var currentPosition = 0;
	var slideWidth = 944;
	var slides = $('#gallery-list li');
	var numberOfSlides = slides.length;

	// Remove scrollbar in JS
	$('#gallery-list').css('overflow', 'hidden');

	// Wrap all .slides with #gallery-inner div
	slides
	.wrapAll('<div id="gallery-inner"></div>')
	// Float left to display horizontally, readjust slides width
	.css({
	  'float' : 'left',
	  'width' : slideWidth
	});

	// Set #gallery-inner width equal to total width of all slides
	$('#gallery-inner').css('width', slideWidth * numberOfSlides);

	// Insert left and right arrow controls in the DOM
	$('#gallery-list')
	  .prepend('<span class="control" id="prev-control">Previous Photo</span>')
	  .append('<span class="control" id="next-control">Next Photo</span>');

	// Hide left arrow control on first load
	manageControls(currentPosition);

	// Create event listeners for .controls clicks
	$('.control').bind('click', function(){
	  // Determine new position
	    currentPosition = ($(this).attr('id')=='next-control')
	  ? currentPosition+1 : currentPosition-1;

	    // Hide / show controls
	    manageControls(currentPosition);
	    // Move gallery-inner using margin-left
	    $('#gallery-inner').animate({
	      'marginLeft' : slideWidth*(-currentPosition)
	    });
	  });

	// manageControls: Hides and shows controls depending on currentPosition
	function manageControls(position){
	  // Hide left arrow if position is first slide
	  if(position==0){ $('#prev-control').hide() }
	  else{ $('#prev-control').show() }
	  // Hide right arrow if position is last slide
	  if(position==numberOfSlides-1){ $('#next-control').hide() }
	  else{ $('#next-control').show() }
	  }
});