$(document).ready(function() {

// ----------------------------------------------------
// opens document ready function, edit below this line

	slideDisplay = function(trigger,direction,clickIndex) {
	
		var navBtnLeft = $(trigger).parents(".carousel-nav").find(".carousel-nav-left a"); // get the left nav button
		var navBtnRight = $(trigger).parents(".carousel-nav").find(".carousel-nav-right a"); // get the right nav button
		var navProgress = $(trigger).parents(".carousel-nav").find(".carousel-progress a"); // path to all of the progress circle buttons

		var targetCarousel = $(trigger).parents(".carousel"); // the parent carousel
		var targetCarouselWidth = $(trigger).parents(".carousel").width(); // width of carousel, delcared in CSS, must match element's total width+margins * elements showing
		var elLength = $(targetCarousel).find(".carousel-element").length; // find number of carousel elements
		var elOuterWidth = $(targetCarousel).find(".carousel-element").outerWidth({margin: true}); // width of each element, including margin
		var targetEls = $(targetCarousel).find(".carousel-element"); // array of all the carousel elements

		var containerWidth = elLength*elOuterWidth; // width of container that houses all the elements, extends beyond carousel width
		var visibleEls = targetCarouselWidth / elOuterWidth; // the number of elements showing when the page loads
		$(targetCarousel).find(".carousel-container").width(containerWidth); // sets width of container that houses all the elements, extends beyond carousel width

		getContainerOffsetLeft = function(targetCarousel){
			var carouselOffset = targetCarousel.offset();
			var carouselOffsetLeft = carouselOffset.left + 1; // to adjust for the border TO DO: calculate the border width
			var containerOffset = $(targetCarousel).find(".carousel-container").offset();
			var containerOffsetLeft = carouselOffsetLeft - containerOffset.left;
			return containerOffsetLeft;
		}
		
		var carouselMove;
		
		if ( direction == 0 ) {
			if ( targetCarouselWidth * clickIndex < containerWidth ) {
				var carouselMove = -(targetCarouselWidth * clickIndex - targetCarouselWidth);
			} else {
				var carouselMove = -(containerWidth - targetCarouselWidth);
			}
		} else {
			// if it's going to extend too far
			if ( getContainerOffsetLeft(targetCarousel) + 2*targetCarouselWidth > containerWidth && direction == +1 ) {
				var carouselMove = -( containerWidth - targetCarouselWidth);
			} else if ( getContainerOffsetLeft(targetCarousel) < targetCarouselWidth && direction == -1 ) {
				var carouselMove = 0
			} else {
				var carouselMove = -( getContainerOffsetLeft(targetCarousel) + direction*targetCarouselWidth);
			}
		}

		$(targetCarousel).find(".carousel-container").animate({ marginLeft: carouselMove+"px" },function(){
			var progressPanel = Math.ceil( getContainerOffsetLeft(targetCarousel) / targetCarouselWidth);
			$(navProgress).removeClass("active");
			$(navProgress).eq(progressPanel).addClass("active");
			if (carouselMove == 0) {
				$(navBtnLeft).addClass("disabled");
				$(navBtnRight).removeClass("disabled");
			} else if ( carouselMove - targetCarouselWidth <= -(containerWidth) ){
				$(navBtnLeft).removeClass("disabled");
				$(navBtnRight).addClass("disabled");
			} else {
				$(navBtnLeft).removeClass("disabled");
				$(navBtnRight).removeClass("disabled");
			}
		});

	}
	
	$(".carouselSlide .carousel-nav-right a").click(function(){
		var trigger = $(this);
		slideDisplay(trigger,+1); // passes the dom element clicked and direction
		return false;
	});
	$(".carouselSlide .carousel-nav-left a").click(function(){
		var trigger = $(this);
		slideDisplay(trigger,-1); // passes the dom element clicked and direction
		return false;
	});
	$(".carouselSlide .carousel-progress a").click(function(){
		var trigger = $(this);
		clickIndex = $(this).html();
		slideDisplay(trigger,0,clickIndex); // passes the dom element clicked and direction
		return false;
	});


		 
// closes document ready function, edit above this line
// -----------------------------------------------------

});