// JavaScript Document

$(document).ready(function(){
	// Get the width of the outermost container div.
	var getWidth = $('#slideContainer').width();
	// Get the total number of slides
	var ct = $('#shifter').children().size();
	// Get slide thumbnail that is clicked
	// Set a slide "listener" variable
	var slideShowing = 1;
	// Gets the image that was clicked
	var imgClicked = $('.divSlideNav li');
	
	//Makes the first slide thumbnail class="active"
	$(".divSlideNav li:first-child").addClass("active");
	
	// Set a global variable to keep track of how far
	// the "shifter" should be moved.
	var setWidth = 0;

	
	// Subtract the pane width from the amount by which
	// the "shifter" has already been moved.
	// Don't forget to give back the changed setWidth variable!
	$('.shiftleft').click(function(){
		if (slideShowing < ct) {
//			var thumbChild = ":nth-child(" + slideShowing + 
			setWidth = setWidth - getWidth; 
			slideShowing = slideShowing + 1;
			$(".divSlideNav li").removeClass("active"); // removes "active" class from thumb <li>
			$(".divSlideNav ul").find(":nth-child(" + slideShowing + ")").addClass("active");// adds "active" class to thumb <li>
			$('#shifter').animate({left: setWidth}, 500);
			return false;
		}
		// Goes to the first slide if the first slide is selected and "Next" button is clicked
		else if (slideShowing >= ct) {
			setWidth = 0;
			slideShowing = 1;
			$(".divSlideNav li").removeClass("active"); // removes "active" class from thumb <li>
			$(".divSlideNav ul").find(":nth-child(" + slideShowing + ")").addClass("active");// adds "active" class to thumb <li>
			$('#shifter').animate({left: setWidth}, 500);
			return false;
		}

	});
	// Same thing in reverse.
	$('.shiftright').click(function(){
		if (slideShowing > 1) {
			setWidth = setWidth + getWidth;
			slideShowing = slideShowing - 1;
			$(".divSlideNav li").removeClass("active"); // removes "active" class from thumb <li>
			$(".divSlideNav ul").find(":nth-child(" + slideShowing + ")").addClass("active");// adds "active" class to thumb <li>
			$('#shifter').animate({left: setWidth}, 500);
			return false;
		}
		// Goes to the last slide if the first slide is selected and "previous" button is clicked
		else if (slideShowing <= 1) {
			setWidth = getWidth * -1 * ct + getWidth;
			slideShowing = ct;
			$(".divSlideNav li").removeClass("active"); // removes "active" class from thumb <li>
			$(".divSlideNav ul").find(":nth-child(" + slideShowing + ")").addClass("active");// adds "active" class to thumb <li>
			$('#shifter').animate({left: setWidth}, 500);
			return false;
		}
	});
	// Same as .shiftLeft, but is when they click on the image
	$('#shifter .pane').click(function(){
		if (slideShowing < ct) {
//			var thumbChild = ":nth-child(" + slideShowing + 
			setWidth = setWidth - getWidth; 
			slideShowing = slideShowing + 1;
			$(".divSlideNav li").removeClass("active"); // removes "active" class from thumb <li>
			$(".divSlideNav ul").find(":nth-child(" + slideShowing + ")").addClass("active");// adds "active" class to thumb <li>
			$('#shifter').animate({left: setWidth}, 500);
			return false;
		}
		// Goes to the first slide if the first slide is selected and Slide plane is clicked
		else if (slideShowing >= ct) {
			setWidth = 0;
			slideShowing = 1;
			$(".divSlideNav li").removeClass("active"); // removes "active" class from thumb <li>
			$(".divSlideNav ul").find(":nth-child(" + slideShowing + ")").addClass("active");// adds "active" class to thumb <li>
			$('#shifter').animate({left: setWidth}, 500);
			return false;
		}
	});
	
	
	
	// Gets the list item (dot) that was clicked and shifts the slides to the exact spot	
	$('.divSlideNav li').click(function(){
		$(this).siblings("li").removeClass("active");
		$(this).addClass("active");
		slideClicked = imgClicked.index(this);
		slideShowing = slideClicked + 1
		setWidth = 0 - slideClicked * 700;
		$('#shifter').animate({left: setWidth}, 500);	
	});



});