(function($) { 
	jQuery.fn.smoothDivScroll = function(options){

		var defaults = {
		scrollWrapper: "div.scrollWrapper", // The wrapper element that surrounds the scrollable area
		scrollableArea: "div.scrollableArea", // The actual element that is scrolled left or right
		autoScroll: "", // Optional. Leave it blank if you don't want any autoscroll. 
						// Otherwise use the values "onstart" or "always". 
						// onstart - the scrolling will start automatically after 
						// the page has loaded and scroll according to the method you've selected 
						// using the autoScrollDirection parameter. When the user moves the mouse 
						// over the left or right hot spot the autoscroll will stop. After that 
						// the scrolling will only be triggered by the host spots.
						// always - the hot spots are disabled alltogether and the scrollable area 
						// will only scroll automatically.
		autoScrollDirection: "right", 	// This parameter controls the direction and behavior of the autoscrolling.	
										// Optional. The values are:
										// right - autoscrolls right and stops when it reaches the end
										// backandforth - starts autoscrolling right and when it reaches 
										// the end, switches to autoscrolling left and so on. Ping-pong style.
										// endlessloop - continuous scrolling right. An endless loop of elements.
		autoScrollSpeed: 1,	//  1-2 = slow, 3-4 = medium, 5-13 = fast -- anything higher = superfast
		};
		var $scrollWrapper;

		options = $.extend(defaults, options);

		/* Identify global variables so JSLint won't raise errors when verifying the code */
		/*global autoScrollInterval, autoScroll, clearInterval, doScrollLeft, doScrollRight, hideHotSpotBackgrounds, hideHotSpotBackgroundsInterval, hideLeftHotSpot, hideRightHotSpot, jQuery, makeHotSpotBackgroundsVisible, setHotSpotHeightForIE, setInterval, showHideHotSpots, window, windowIsResized */


		// Iterate and make each matched element a SmoothDivScroll
		return this.each(function() {
		
			// Create a variable for the current "mother element"
			var $mom = $(this);
			
			// Some variables used for working with the scrolling
			var scrollXpos;
			
			// The left offset of the container on which you place 
			// the scrolling behavior.
			// This offset is used when calculating the mouse x-position 
			// in relation to scroll hot spots
			var motherElementOffset = $mom.offset().left;
			
			var hasExtended = false;
			
			// Stuff to do once on load
			$(window).one("load",function(){
				// If the content of the scrolling area is not loaded through ajax,
				// we assume it's already there and can run the code to calculate
				// the width of the scrolling area, resize it to that width
				$mom.scrollableAreaWidth = 0;
				$mom.tempStartingPosition = 0;
				
				$mom.find(options.scrollableArea).children().each(function() {
					// Add the width of the current element in the loop to the total width
					$mom.scrollableAreaWidth = $mom.scrollableAreaWidth + $(this).outerWidth(true);
					
				});
				
				// Set the width of the scrollableArea to the accumulated width
				$mom.find(options.scrollableArea).css("width", $mom.scrollableAreaWidth + "px");
				$scrollWrapper = $mom.find(options.scrollWrapper);
				$mom.autoScrollInterval = setInterval(autoScroll, 20);
			});
			// **************************************************
			// EVENTS - scroll right
			// **************************************************
			
			$mom.previousScrollLeft = 0;
			$mom.pingPongDirection = "right";
			$mom.swapAt;
			$mom.getNextElementWidth = true;
			// The autoScroll function
			var autoScroll = function()
			{	
				switch(options.autoScrollDirection)
				{
					case "right":
						$scrollWrapper.scrollLeft($scrollWrapper.scrollLeft() + options.autoScrollSpeed);
						break;
						
					case "left":
						$scrollWrapper.scrollLeft($scrollWrapper.scrollLeft() - options.autoScrollSpeed);
						break;
						
					case "backandforth":
						// Store the old scrollLeft value to see if the scrolling has reached the end
						$mom.previousScrollLeft = $scrollWrapper.scrollLeft();
						
						if($mom.pingPongDirection == "right") {
							$scrollWrapper.scrollLeft($scrollWrapper.scrollLeft() + options.autoScrollSpeed);
						}
						else {
							$scrollWrapper.scrollLeft($scrollWrapper.scrollLeft() - options.autoScrollSpeed);
						}
						
						// If the scrollLeft hasnt't changed it means that the scrolling has reached
						// the end and the direction should be switched
						if($mom.previousScrollLeft === $scrollWrapper.scrollLeft())
						{
							if($mom.pingPongDirection == "right") {
								$mom.pingPongDirection = "left";
							}
							else {
								$mom.pingPongDirection = "right";
							}
						}
						break;
		
					case "endlessloop":
						// Get the width of the first element. When it has scrolled out of view,
						// the element swapping should be executed. A true/false variable is used
						// as a flag variable so the swapAt value doesn't have to be recalculated
						// in each loop.
						if($mom.getNextElementWidth)
						{
							$mom.swapAt = $mom.find(options.scrollableArea).children(":first-child").outerWidth();
							$mom.getNextElementWidth = false;
						}
						
						// Do the autoscrolling
						$scrollWrapper.scrollLeft($scrollWrapper.scrollLeft() + options.autoScrollSpeed);
						
						// Check to see if the swap should be done
						if(($mom.swapAt <= $scrollWrapper.scrollLeft()))
						{ 
							// Clone the first element and append it last in the scrollableArea
							$mom.find(options.scrollableArea).append($mom.find(options.scrollableArea).children(":first-child").clone());
				
							var widthToUse = $mom.find(options.scrollableArea).children(":first-child").outerWidth();
							
							// Remove it from its original position as the first element
							$mom.find(options.scrollableArea).children(":first-child").remove();

							// Compensate for the removal of the first element by
							$scrollWrapper.scrollLeft(($scrollWrapper.scrollLeft() - widthToUse));
							
							$mom.getNextElementWidth = true;
						}
						break;
					default:
						break;
						
				}

			};
			
	});
};

})(jQuery);