$(document).ready(function(){
		  var currentPosition = 0;
		  var slideWidth = 505;
		  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' : 'right',
				'width' : slideWidth
			});
		  $('#slideInner').css('margin', 0);

		  // Set #slideInner width equal to total width of all slides
		  $('#slideInner').css('width', slideWidth * numberOfSlides);
		  
		  // set the height accroding to the first slide
		  $('#slidesContainer').css('height', $('#slide-0').height());
		  $('#slide-0').load(function() {
			$('#slidesContainer').css('height', $('#slide-0').height());
		  });
		  


		  // 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')=='rightControl')
			? currentPosition-1 : currentPosition+1;

			  // Hide / show controls
			  manageControls(currentPosition);
			  // Move slideInner using 
			  $('#slideInner').animate({
				'left' : (slideWidth*currentPosition)
			  },"slow");

			  // set the height accroding to the current slide
			  
			  $('#slidesContainer').animate({'height': $('#slide-' + currentPosition).height() });
//			  $('#slidesContainer').css('height', $('#slide-' + currentPosition).height());
			});

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