$(document).ready(function(){
    var currentPosition = 0;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
	$('.slide').css('display' , 'none');
	$(".slide:first").show('slow').addClass('active');

    // Hide left arrow control on first load
    manageControls(currentPosition);
	
	// Create event listeners for .controls clicks
    $('#rightControl').click( function(){
    	// Determine new position
  		currentPosition++;

		// Hide / show controls
    	manageControls(currentPosition);
    
		// fadeIn next Slide
    	$(".active").removeClass('active').next('.slide').toggle("slow", "linear").addClass('active');

  	});


    $('#leftControl').click( function(){
    	// Determine new position
  		currentPosition--;

		// Hide / show controls
    	manageControls(currentPosition);
    
		// fadeIn next Slide
    	$(".active").toggle("slow", "linear").removeClass('active').prev('.slide').addClass('active');
  	});




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