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

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

		// 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);

		// Insert left and right arrow controls in the DOM
		$('#slideshow')
		  //.prepend('<span class="control" id="leftControl">Move left</span>')
		  //.append('<span class="control" id="rightControl">Move right</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')=='rightControl') ? currentPosition+1 : currentPosition-1;

		// Hide / show controls
		//manageControls(currentPosition);
		// Move slideInner using margin-left
		$('#slideInner').animate({
		  'marginLeft' : slideWidth*(0)
		});
		});
				
		$('.control-schools')
			.bind('click', function(){
				
				$('#wwdif-bg').removeClass();
				$('#wwdif-bg').addClass('schools-bg');
				
				//$('#wwdif-top').removeClass();
				//$('#wwdif-top').addClass('schools-top');
				
               	$('#wwdif-bg-content').html('');
				
				var bg_content = '<img src="images/schools-spud.png" class="schools-spud" /><img src="images/schools-peas.png" class="schools-peas" />';
				
				$('#wwdif-bg-content').html(bg_content);		

				$('#slideInner').animate({
					'marginLeft' : slideWidth*(currentPosition)
				});
				
			});
		
		$('.control-fe')
			.bind('click', function(){
				
				$('#wwdif-bg').removeClass();
				$('#wwdif-bg').addClass('fe-bg');
				
				//$('#wwdif-top').removeClass();
				//$('#wwdif-top').addClass('fe-top');
				
                $('#wwdif-bg-content').html('');

				$('#slideInner').animate({
					'marginLeft' : slideWidth*(currentPosition - 1)
				});
			
			});
		
		$('.control-bandi')
			.bind('click', function(){
				
				$('#wwdif-bg').removeClass();
				$('#wwdif-bg').addClass('bandi-bg');
				
				//$('#wwdif-top').removeClass();
				//$('#wwdif-top').addClass('bandi-top');
				
                $('#wwdif-bg-content').html('');

				$('#slideInner').animate({
					'marginLeft' : slideWidth*(currentPosition - 2)
				});
				
			});
		
		$('.control-healthcare')
			.bind('click', function(){
				
				$('#wwdif-bg').removeClass();
				$('#wwdif-bg').addClass('healthcare-bg');
				
				//$('#wwdif-top').removeClass();
				//$('#wwdif-top').addClass('healthcare-top');
				
                $('#wwdif-bg-content').html('');

				$('#slideInner').animate({
					'marginLeft' : slideWidth*(currentPosition - 3)
				});
				
			});
		
		// 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() }
			}
	});