$(document).ready(function(){
	var currentPosition = 0;
	var slideWidth = 220;
	var slides = $('.slide');
	var numberOfSlides = slides.length;

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

	// Set #slideInner width equal to total width of all slides
	$('#slideInner').css('width', slideWidth * numberOfSlides);
	
	// Hide left arrow control on first load
	manageControls(currentPosition);

	// Create event listeners for .controls clicks
	$('.slide_control')
	.bind('click', function(){
		// Determine new position
		currentPosition = ($(this).attr('id')=='control_right')
		? currentPosition+1 : currentPosition-1;
	
		// Hide / show controls
		manageControls(currentPosition);
		// Move slideInner using margin-left
		$('#slideInner').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){ 
			$('#control_left').hide() 
			$('#control_left_inactive').show() 
			} else { 
			$('#control_left').show() 		
			$('#control_left_inactive').hide() 
		}
		// Hide right arrow if position is last slide
		if(position==numberOfSlides-1){ 
			$('#control_right').hide() 
			$('#control_right_inactive').show() 
			} else { 
			$('#control_right').show() 
			$('#control_right_inactive').hide() 
		}
	}
});