jQuery(document).ready(function() {
		
		var itemWidth = 204;
		var positionLeft = 0;
		var noOfItems = jQuery(".peopleItem").length;
		var divScrollLength = (noOfItems - 3) * itemWidth; // - 3 because 3 items is the length of items already showing
		var index = 0;
		
		//show the correct number of dots when page loads
		//if (noOfItems / 3) = a whole number then that number of dots is needed.
		//if there is a remainder then number of dots needed is the whole number plus 1
		var numberOfSlidePanels = noOfItems / 3;
		var intPart = Math.floor(numberOfSlidePanels);
		var fracPart = noOfItems % 3;
		
		if(fracPart != 0) {
			numberOfSlidePanels = intPart + 1;
		}
		
		//write the correct number of clickable dots onto the page to represent the no of slides
		jQuery("<ul class='links'></ul>").insertAfter(".people .title");
		for (var i = 0; i < numberOfSlidePanels; i++ ) {
			jQuery(".links").append("<li><a href='#'>Panel " + (i + 1) + "</a></li>");
		}
		
		//add class of active to first dot
		jQuery(".links li:first").addClass("active");
		
		jQuery(".scrollLeft").css({'visibility' : 'hidden'});
		
		//when a dot is clicked scroll the banner (3 * 204px either way) depending on which dot is clicked
		// and also add the active state
		
		//when a dot is clicked find out which dot it is in the array ( 0, 1, 2 etc)
		// find the background position by 3 x 204 x position in array
		var arrayOfListItems = jQuery(".links li");
		
		jQuery(".links li").click(function(e) {
			index = jQuery.inArray(this, arrayOfListItems);
			positionLeft = -(3 * itemWidth * index);
			
			
			if (index == (arrayOfListItems.length - 1)) {
				
				if (fracPart == 1) {
					positionLeft = positionLeft + itemWidth;
				}
				
				if (fracPart == 2) {
					positionLeft = positionLeft + itemWidth;
				}
				
			}
			
			jQuery(".peopleListInner2")
					.animate(
					{
						left: positionLeft 
					},
					'slow', 'easeInOutCubic');
				
			arrowVisibility(positionLeft, divScrollLength);
			
			jQuery(this).addClass("active");
			jQuery(this).siblings().removeClass("active");
		});
		
		
		//if the panel being shown is the last one and it does not have 3 items in it then the scroll position needs to be adjusted to only show items available (no blank spaces)
		
		//scroll right when click right
		jQuery(".scrollRight").click(function(e) {

			if ( positionLeft > -divScrollLength ) {
				positionLeft = positionLeft - itemWidth;
				jQuery(".peopleListInner2")
					.animate(
					{
						left: positionLeft 
					},
					'slow', 'easeInOutCubic');
				}
				arrowVisibility(positionLeft, divScrollLength);
		});
		
		
		//scroll left when click left
		jQuery(".scrollLeft").click(function(e) {
			
			if ( positionLeft < 0 ) {
				positionLeft = positionLeft + itemWidth;
				jQuery(".peopleListInner2")
					.animate(
					{
						left: positionLeft 
					},
					'slow', 'easeInOutCubic');
				}
				arrowVisibility(positionLeft, divScrollLength);
		});
		
		
		//show/hide arrows
		function arrowVisibility(positionLeft, divScrollLength) {
			if (positionLeft == 0) 
				jQuery(".scrollLeft").css({'visibility' : 'hidden'});
			else 
				jQuery(".scrollLeft").css({'visibility' : 'visible'});
			
			
			if (positionLeft == -divScrollLength) 
				jQuery(".scrollRight").css({'visibility' : 'hidden'});
			else 
				jQuery(".scrollRight").css({'visibility' : 'visible'});
		}
		
		
	});