
jQuery.fn.babycarousel = function(settings) {
	 settings = jQuery.extend({
     easeFunc: "expoinout",
     easeTime: 650,
	 interval: 7000,
	 autoplay: true
  }, settings);
	return this.each(function(){
		
	// 	==========================================================================================
	//	Plugin Var Assignment and Intialization
	// 	==========================================================================================
		// Assign the container variable
		var $container = jQuery(this);
		// Get/assign the width of the individual panels
		var $panelWidth = $container.find("div.panel").width();
		// Get/assign the number of individual panels
		var $panelCount = $container.find("div.panel").size();
		// Assign the panel varaible to the first panel
		var $currentPanel = 1;
		// Assign the isPaused variable
		var $autoPlay = settings.autoplay;
		// Assign the isPaused variable
		var $isPaused = false;
		// Assign the variable used to hold the current animation state
		var $isAnimating = settings.autoplay;
		// Assign the variable used to hold the value if we have transitioned into a manual movement state
		var $isManual = false;

	// 	==========================================================================================
	//	Panel Link List Construct
	// 	==========================================================================================
		$container.find("div.panel").each(function(n) {
			// If this is the first panel dot link, give it a class of current-panel to signify its difference
			if ( n == 0 ) {
				$container.find("div.panel-position ul").append("<li><a href='#' class='current-panel' rel='" + (n+1) + "'>&bull;</a></li>");
			}
			// Else, business as usual kid...
			else {
				$container.find("div.panel-position ul").append("<li><a href='#' rel='" + (n+1) + "'>&bull;</a></li>");
			}
		});

	// 	==========================================================================================
	//	First/last <DIV> Cloning
	// 	==========================================================================================
		// Assign the first panel variable
		var $firstPanel = $container.find("div.panel").eq(0);
		// Assign the last panel variable
		var $lastPanel = $container.find("div.panel").eq($panelCount-1);
		// Clone the first panel and insert it after the last panel
		$firstPanel.clone(true).insertAfter($lastPanel);
		// Clone the last panel and insert it before the first panel
		$lastPanel.clone(true).insertBefore($firstPanel);
		// Get/assign the width of all panels lined up next to each other including the two cloned panels
		var $adjustedPanelContainerWidth = $panelWidth * ($panelCount*2);
		// Reassign the panelCount with the two new cloned divs...
		$panelCount = $panelCount + 2;
		// Use the above width to specify the CSS width for the panelContainer element...
		$container.find("div.panel-container").css("width" , $adjustedPanelContainerWidth);
		// Posiiton the panels at the first real, not cloned, panel...
		$container.find(".panel-container").css("left", "-" + $panelWidth + "px");
		

	// 	==========================================================================================
	//	Panel Position Links Click Event
	// 	==========================================================================================
		$container.find("div.panel-position a").click(function(){
			// Assign the selected panel number
			var $selectedPanel = $(this).attr("rel");
			// Set the current panel
			$currentPanel = $selectedPanel-1;
			// Stop the animation of the panels
			$container.find(".panel-container").stop();
			// Get the left position of the corresponding panel
			var $selectedPanelStart = $selectedPanel * $panelWidth;
			// Set the left position of the div panels to the corresponding position
			$container.find(".panel-container").css("left", "-" + $selectedPanelStart + "px");
			// Remove the current-panel class from any of the panel dot links...
			$container.find("div.panel-position ul li a").removeClass("current-panel");
			// Identify the panel dot link to the corresponding panel
			$container.find("div.panel-position ul li a").eq($currentPanel).addClass("current-panel");
			// we are now in a manual state...
			$isManual = true;
			// return this click event as false
			return false;
		});


	// 	==========================================================================================
	//	Control Panel Button Click Events
	// 	==========================================================================================
		$container.find(".control-forward").click(function(){
			// Stop all animation on our div
			$container.find(".panel-container").stop();
			// Call the function to increment our panels
			MoveForward();
			// return this click event as false
			return false;
		});
		$container.find(".control-back").click(function(){
			// Stop all animation on our div
			$container.find(".panel-container").stop();
			// Call the function to decrement our panels
			MoveBack();
			// return this click event as false
			return false;
		});


	// 	==========================================================================================
	//	Control Panel Hover Image Swaps
	// 	==========================================================================================
        $container.find(".control-container div").hover(
            function () { 
				// Highlight the manual movement arrow
				$(this).stop().animate({ opacity: 0.9 }, 500 ); 
			}, 
            function () { 
				// Fade the manual movement arrow
				$(this).stop().animate({ opacity: 0.4 }, 500 ); 
			}
        );


	// 	==========================================================================================
	//	Control Panel Hover Scroll up / Scroll Down
	// 	==========================================================================================
        $container.find(".uc-content").parent().hover(
            function () {
				// Pause the animation sequence
				if (  $autoPlay ) { PauseAnimation(); }
				// Show the control bar
				$(this).find(".control-container").stop().animate({ opacity: 1.0 }, 500 ); 
			}, 
            function () { 
				// Hide the control bar
				$(this).find(".control-container").stop().animate({ opacity: 0.0 }, 500 ); 
				// Restart the animation sequence
				if ( $autoPlay ) { RestartAnimation(); }
			}
        );


	// 	==========================================================================================
	//	PauseAnimation Function
	// 	==========================================================================================
		function PauseAnimation(){
			// Set the isPaused variable to true
			$isPaused = true;
			// Queue the animation sequence
			$container.find(".panel-container").queue("fx", []);
			// Stop the animation sequence, while instantly finshing 
			$container.find(".panel-container").stop(false,true);
		}


	// 	==========================================================================================
	//	PauseAnimation Function
	// 	==========================================================================================
		function RestartAnimation(){
			// Set the isPaused variable to false
			$isPaused = false ;
			// Leaving the manaul move state...
			$isManual = false;
			// Restart the animation sequence...
			AnimationSequence();
		}


	// 	==========================================================================================
	//	AnimationSequence Function
	// 	==========================================================================================
		function AnimationSequence(){

			if ( !$isPaused ) {
				
				// Run the interval animation
				$container.find(".panel-container").animate(
					{ fontColor:'#eee' },
					settings.interval,
					function(){ }
				);
	
				// Run the animation between panels
				$container.find(".panel-container").animate(
					{ left: "-" + $panelWidth*($currentPanel+1) }, 
					settings.easeTime, 
					settings.easeFunc, 
					function(){
						// Update the status of the dot links...
						UpdateDotLinksForward();
						// Call the function to execute after animation has finished...
						PostAnimateForward();
						// Loop animation sequence
						AnimationSequence();
					}
				);
				
			}
		}


	// 	==========================================================================================
	//	PostAnimateForward Function
	// 	==========================================================================================
		function PostAnimateForward(){
			// Reset the left position of the div panels because we are are the last "real" panel
			if ( $currentPanel == $panelCount-2 ) { 
				$container.find(".panel-container").css("left", "-" + $panelWidth + "px"); 
				$currentPanel = 1;
			}
			// Increment the current Panel number
			else {
				$currentPanel++;
			}
		}


	// 	==========================================================================================
	//	PostAnimateBackward Function
	// 	==========================================================================================
		function PostAnimateBackward(){
			// Reset the left position of the div panels because we are are the last "real" panel
			if ( $currentPanel == 1 ) { 
				// Move to the last real panel
				$container.find(".panel-container").css("left", "-" + $panelWidth*($panelCount-2) + "px"); 
				// Set the current panel to the last real panel
				$currentPanel = $panelCount-2;
			}
			// Increment the current Panel number
			else {
				$currentPanel--;
			}
		}


	// 	==========================================================================================
	//	UpdateDotLinksForward Function
	// 	==========================================================================================
		function UpdateDotLinksForward(){
			// Remove the current-panel class from any of the panel dot links...
			$container.find("div.panel-position ul li a").removeClass("current-panel");
			
			if ( $currentPanel == $panelCount-2 ) {
				// We are on the last panel: display the dot link as the first panel...
				$container.find("div.panel-position ul li a").eq(0).addClass("current-panel");
			}
			else {
				// Identify the panel dot link to the corresponding panel
				$container.find("div.panel-position ul li a").eq($currentPanel).addClass("current-panel");
			}
		}


	// 	==========================================================================================
	//	UpdateDotLinksBackward Function
	// 	==========================================================================================
		function UpdateDotLinksBackward(){
			// Remove the current-panel class from any of the panel dot links...
			$container.find("div.panel-position ul li a").removeClass("current-panel");
			
			if ( $currentPanel == 0 ) {
				// We are on the last panel: display the dot link as the first panel...
				$container.find("div.panel-position ul li a").eq($panelCount-1).addClass("current-panel");
			}
			else {
				// Identify the panel dot link to the corresponding panel
				$container.find("div.panel-position ul li a").eq($currentPanel-1).addClass("current-panel");
			}
		}


	// 	==========================================================================================
	//	MoveForward Function
	// 	==========================================================================================
		function MoveForward(){
			// Increment the current panel number only if we were not just animating, since animation is one panel ahead...
			if ( $isManual ) { $currentPanel++; }
			// Now we have entered a manual move state; update variable
			$isManual = false;
				
			// Run the animation between panels
			$container.find(".panel-container").stop().animate(
				{ left: "-" + $panelWidth*($currentPanel+1) }, 
				settings.easeTime, 
				settings.easeFunc, 
				function(){
					// Update the status of the dot links...
					UpdateDotLinksForward();
					// Call the function to execute after animation has finished...
					PostAnimateForward();
				}
			);

		// Restart the animation...
			if ( !$isPaused && $autoPlay ) { RestartAnimation(); }
		}


	// 	==========================================================================================
	//	MoveBack Function
	// 	==========================================================================================
		function MoveBack(){
			var $tempCurrentPanel;
			// Decrement the current panel by 2 only if we were not just animating, since animation is one panel ahead...
			if ( $isManual ) { $tempCurrentPanel = $currentPanel; $currentPanel++; }
			// Else decrement by one
			else { $tempCurrentPanel = $currentPanel-1; }
			// Now we have entered a manual move state; update variable
			$isManual = false;
			
			// Run the animation between panels
			$container.find(".panel-container").stop().animate(
				{ left: "-" + $panelWidth*($tempCurrentPanel) }, 
				settings.easeTime, 
				settings.easeFunc, 
				function(){
					// Call the function to execute after animation has finished...
					PostAnimateBackward();
					// Update the status of the dot links...
					UpdateDotLinksBackward();
				}
			);

			// Restart the animation...
			if ( !$isPaused && $autoPlay ) { RestartAnimation(); }
		}


	// 	==========================================================================================
	//	Intial Animation Sequence Call
	// 	==========================================================================================
		// Start the animation sequence if the isPaused variable is false
		if ( $autoPlay ) { AnimationSequence(); } 


  	});
};


