/**
* jQuery.smoothDivScroll - Smooth div scrolling using jQuery.
* This plugin is for turning a set of HTML elements's into a smooth scrolling area.
*
* Copyright (c) 2009 Thomas Kahn - thomas.kahn(at)karnhuset(dot)net
*
* This plugin is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* any later version.
*
* This plugin is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
* GNU General Public License for more details. <http://www.gnu.org/licenses/>.
*
* Date: 2009-05-23
* @author Thomas Kahn
* @version 0.8
*
* Changelog
* ---------------------------------------------
* 0.9	- Bugfixes: Problem with multiple autoscrollers on the same page - the intervals
*		  where global which resulted in the wrong autoscroller stopping on mouseOver or
*		  mouseDown.
*		  Error in calculation in autoscrolling mode that made the autoscrolling grind
*		  to a halt after a number of loops.
*
* 0.8   - Major update. New parameter setup. Lots of new autoscrolling capabilities and 
*		  new parameters for controlling the scrolling speed. Made it possible to start 
*		  the scroller at a specific element.
* 
* 0.7   - Added support for autoscrolling after the page has loaded. 
*         Added support for making the hot spots visible at start for X number of seconds
*         or visible all the time.
*
* 0.6   - First version.
*/

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

		var defaults = {

		scrollTickInterval: 40,
		showBigImageInterval: 10000,

		bigImageWrapper: "div#bigImage",
		fadeDuration: 500,
		path2images: '',
		scrollingHotSpotLeft: "div.scrollingHotSpotLeft", // The hot spot that triggers scrolling left.
		scrollingHotSpotRight: "div.scrollingHotSpotRight", // The hot spot that triggers scrolling right.
		scrollWrapper: "div.scrollWrapper", // The wrapper element that surrounds the scrollable area
		scrollableArea: "div.scrollableArea", // The actual element that is scrolled left or right
		hiddenOnStart: false, // True or false. Determines whether the element should be visible or hidden on start
		ajaxContentURL: "", // Optional. If supplied, content is fetched through AJAX using the supplied URL
		countOnlyClass: "", // Optional. If supplied, the function that calculates the width of the scrollable area will only count elements of this class
		scrollingSpeed: 25, // A way of controlling the scrolling speed. 1=slowest and 100= fastest.
		mouseDownSpeedBooster: 3, // 1 is normal speed (no speed boost), 2 is twice as fast, 3 is three times as fast, and so on
		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
										// left - autoscrolls left and stops when it reaches the end 
										// (only relevant if you have set the parameter startAtElementId).
										// 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
		pauseAutoScroll: "", // Optional. Values mousedown and mouseover. Leave blank for no pausing abilities.
		visibleHotSpots: "", 	// Optional. Leave it blank for invisible hot spots. 
								// Otherwise use the values  "onstart" or "always". 
								// onstart - makes the hot spots visible for X-number of seconds 
								// after tha page has loaded and then they become invisible. 
								// always - hot spots are visible all the time.
		hotSpotsVisibleTime: 5, // If you have selected "onstart" as the value for visibleHotSpots, 
								// you set the number of seconds that you want the hot spots to be 
								// visible after the page has loaded. After this time they will fade 
								// away and become invisible again.
		startAtElementId: ""	// Optional. Use this parameter if you want the offset of the 
								// scrollable area to be positioned at a specific element directly 
								// after the page has loaded. First give your element an ID in the 
								// HTML code and then provide this ID as a parameter.
		};

		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);
			
			// Load the content of the scrollable area using the optional URL.
			// If no ajaxContentURL is supplied, we assume that the content of
			// the scrolling area is already in place.
			/*
			if(options.ajaxContentURL.length !== 0){
				$mom.scrollableAreaWidth = 0;
				$mom.find(options.scrollableArea).load((options.ajaxContentURL), function(){	
					$mom.find(options.scrollableArea).children((options.countOnlyClass)).each(function() {
						$mom.scrollableAreaWidth = $mom.scrollableAreaWidth + $(this).outerWidth(true);
					});

					// Set the width of the scrollable area
					$mom.find(options.scrollableArea).css("width", ($mom.scrollableAreaWidth + "px"));
					
					// Hide the mother element if it shouldn't be visible on start
					if(options.hiddenOnStart) {
						$mom.hide();
					}
					
					windowIsResized();
					
					setHotSpotHeightForIE();
				});		
			}
			*/
			// Some variables used for working with the scrolling
			var scrollXpos;
			var booster;
			var mouseMoveScrollXPos;
			
			// 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;
			
			// A variable used for storing the current hot spot width.
			// It is used when calculating the scroll speed
			var hotSpotWidth = 0;
			
			// Set the booster value to normal (doesn't change until the user
			// holds down the mouse button over one of the hot spots)
			booster = 1;
			
			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
				if(options.ajaxContentURL.length === 0) {
					$mom.scrollableAreaWidth = 0;
					$mom.tempStartingPosition = 0;
					
					$mom.find(options.scrollableArea).children((options.countOnlyClass)).each(function() {
						
						// Check to see if the current element in the loop is the one where the scrolling should start
						if( (options.startAtElementId.length !== 0) && (($(this).attr("id")) == options.startAtElementId) ) {
						$mom.tempStartingPosition = $mom.scrollableAreaWidth;
						}

						// 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");
					
					// Check to see if the whole thing should be hidden at start
					if(options.hiddenOnStart) {
						$mom.hide();
					}
				}
				
				// Set the starting position of the scrollable area. If no startAtElementId is set, the starting position
				// will be the default value (zero)
				$mom.find(options.scrollWrapper).scrollLeft($mom.tempStartingPosition);
				
				// If the user has set the option autoScroll, the scollable area will
				// start scrolling automatically
				if(options.autoScroll !== "") {
					$mom.autoScrollInterval = setInterval(autoScroll, options.scrollTickInterval);
				}

			});
			
			// --------------------------- $$$$$$$$$$$$$$$$$$ -----------------
			var _inTimer = false;
			var _curImgIndex = 0;
			var _imgCount = $mom.find('img').length;
			var _galleryImagesSrc = new Array();
			var _galleryImagesModel = new Array();
			var _galleryImagesSize = new Array();
			var _galleryImagesRise = new Array();

			// Создадим массив ссылок на картинки
        	$mom.find('img').each( function(index) {
				var strs = $(this).attr('src').split('/');
				var fname = strs[strs.length-1];
				_galleryImagesSrc[index] = options.path2images +fname;
				_galleryImagesSize[index] = $(this).attr('size');
				_galleryImagesRise[index] = $(this).attr('rise');
				_galleryImagesModel[index] = $(this).attr('model');
			});


			$mom.showBigImageTimer = setInterval(tickBigImage, options.showBigImageInterval);
			showBigImageByIndex(_curImgIndex++);

			function tickBigImage() {
	//			if (_inTimer) return;
				_inTimer = true;
				if (_curImgIndex < _imgCount ) _curImgIndex ++;
				else _curImgIndex = 1;
				showBigImageByIndex(_curImgIndex);
				_inTimer = false;
			}

			function showBigImageByIndex(indexNo) {
				var strs = _galleryImagesSrc[indexNo].split('/');
				var fname = strs[strs.length-1];
				var prevImage = $(options.bigImageWrapper).find('img');
				var image = $('<img />').attr('src', options.path2images+fname);

/*
				image.css({
		            position: 'absolute',
		            top: 0,
			    	left: 0,
		            opacity: 0.0
		          })
				.load( function() {
					$(options.bigImageWrapper).append(image);
					image.animate({opacity: 1.0}, {
			            queue: false,
			            duration: options.fadeDuration,
			            easing: 'linear',
						complete: function() {
							$(options.bigImageWrapper).remove(prevImage);
						}
					});
				});
*/

	image.css({
		            position: 'absolute',
		            top: 0,
			    	left: 0,
		            opacity: 0.0
	})
	.one("load",function(){
					$(options.bigImageWrapper).append(image);
					image.animate({opacity: 1.0}, {
			            queue: false,
			            duration: options.fadeDuration,
			            easing: 'linear',
						complete: function() {
							$(options.bigImageWrapper).remove(prevImage);
						}
					});
	})
	.each(function(){
		if(this.complete || (jQuery.browser.msie && parseInt(jQuery.browser.version) == 6)) 
			$(this).trigger("load");
	});


//				$('#model-info').css( {opacity: 0.0} );

				var st = '<div id="model-info-inner">';
				st = st + '<p>';
				st = st + '<span class="model-no-text">модель: </span>';
				st = st + '<span class="model-no">' + _galleryImagesModel[indexNo] + '</span><br />';
				st = st + '<span class="size-text">размер: </span>';
				st = st + '<span class="size-no">' + _galleryImagesSize[indexNo] + '</span><br />';
				st = st + '<span class="rise-text">рост: </span>';
				st = st + '<span class="rise-no">' + _galleryImagesRise[indexNo] + '</span>';

				st = st + '</p>';
				st = st + '</div>';

				$('#model-info').html(st);
//				$('#model-info').animate({opacity: 1.0}, {
//			            queue: false,
//			            duration: options.fadeDuration,
//			            easing: 'linear'
//				});
			}

			function showBigImage(image_src) {

				var strs = image_src.split('/');
				var fname = strs[strs.length-1];

				var i;

				for (i=0;i<_imgCount;i++) {
					var parts = _galleryImagesSrc[i].split('/');
					var imageFileName = parts[parts.length-1];
					if ( fname == imageFileName ) {
						showBigImageByIndex(i);
						break;
					}
				}
			}


			// EVENT - window resize
			$(window).bind("resize",function(){
				windowIsResized();
			});

			// A function for doing the stuff that needs to be
			// done when the browser window is resized
			function windowIsResized() {
			
				// If the scrollable area is not hidden on start, reset and recalculate the
				// width of the scrollable area
				if(!(options.hiddenOnStart))
				{
					$mom.scrollableAreaWidth = 0;
					$mom.find(options.scrollableArea).children((options.countOnlyClass)).each(function() {
						$mom.scrollableAreaWidth = $mom.scrollableAreaWidth + $(this).outerWidth(true);
					});
					
					$mom.find(options.scrollableArea).css("width", $mom.scrollableAreaWidth + 'px');
				}

				// Reset the left offset of the scroll wrapper
				$mom.find(options.scrollWrapper).scrollLeft("0");
				
				// Get the width of the page (body)
				var bodyWidth = $("body").innerWidth();
				
			}
			
			// HELPER FUNCTIONS FOR SHOWING AND HIDING HOT SPOTS
			function showLeftHotSpot(){
				$mom.find(options.scrollingHotSpotLeft).show();
				// Recalculate the hot spot width. Do it here because you can
				// be sure that the hot spot is visible and has a width
				if(hotSpotWidth <= 0) {
					hotSpotWidth = $mom.find(options.scrollingHotSpotLeft).width();
				}
			}
			
			function showRightHotSpot(){
				$mom.find(options.scrollingHotSpotRight).show();
				// Recalculate the hot spot width. Do it here because you can
				// be sure that the hot spot is visible and has a width
				if(hotSpotWidth <= 0) {
					hotSpotWidth = $mom.find(options.scrollingHotSpotRight).width();
				}
			}
			
			function setHotSpotHeightForIE()
			{
				// Some bugfixing for IE 6
				jQuery.each(jQuery.browser, function(i, val) {
					if(i=="msie" && jQuery.browser.version.substr(0,1)=="6")
					{
						$mom.find(options.scrollingHotSpotLeft).css("height", ($mom.find(options.scrollableArea).innerHeight()));
						$mom.find(options.scrollingHotSpotRight).css("height", ($mom.find(options.scrollableArea).innerHeight()));				
					}
				});
			}
			// **************************************************
			// EVENTS - scroll right
			// **************************************************
			
			// The function that does the actual scrolling right
			var doScrollRight = function()
			{	
				if(scrollXpos > 0) {
					$mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft() + (scrollXpos*booster));
				}
//				showHideHotSpots();
			};
			
			// **************************************************
			// Autoscrolling
			// **************************************************

			/*
			if(options.pauseAutoScroll == "mousedown" && options.autoScroll == "always")
			{
				$mom.find(options.scrollWrapper).bind('mousedown',function(){
					clearInterval($mom.autoScrollInterval);
				});
				
				$mom.find(options.scrollWrapper).bind('mouseup',function(){
					$mom.autoScrollInterval = setInterval(autoScroll, options.scrollTickInterval);
				});
			}
			else if(options.pauseAutoScroll == "mouseover" && options.autoScroll == "always")
			{
				$mom.find(options.scrollWrapper).bind('mouseover',function(){
					clearInterval($mom.autoScrollInterval);
					clearInterval($mom.showBigImageTimer);
				});
				
				$mom.find(options.scrollWrapper).bind('mouseout',function(){
					$mom.autoScrollInterval = setInterval(autoScroll, options.scrollTickInterval);
					$mom.showBigImageTimer = setInterval(tickBigImage, options.showBigImageInterval);
				});
			}
			*/

			// Вместо предыдущей проверки 
			if(options.pauseAutoScroll == "mouseover" && options.autoScroll == "always")
			{
				$mom.find(options.scrollWrapper).bind('mouseover',function(){
					clearInterval($mom.autoScrollInterval);
					clearInterval($mom.showBigImageTimer);
					//$mom.mouseMoveScrollTimer = setInterval(mouseMoveScroll, 50);
				});
				
				$mom.find(options.scrollWrapper).bind('mouseout',function(){
					$mom.autoScrollInterval = setInterval(autoScroll, options.scrollTickInterval);
					$mom.showBigImageTimer = setInterval(tickBigImage, options.showBigImageInterval);
					clearInterval($mom.mouseMoveScrollTimer);
				});
			}

			if (options.autoScroll == "always") {
				
				$mom.find(options.scrollWrapper).bind('mousemove',function(e){
					var x = e.pageX - (this.offsetLeft + motherElementOffset);
					var cw = Math.round(this.clientWidth / 3);
mouseMoveScrollXPos = 0;
					//scrollXpos = Math.round((x/hotSpotWidth) * options.scrollingSpeed);
					//Math.abs
					if (x < cw) { // левый хотспот
						//callSpeed = Math.round(((cw-(cw-x))/21)+1);
						//callSpeed = callSpeed * 5;
						var cw3 = cw/3;
						mouseMoveScrollXPos = 1;
						if (x<cw3) mouseMoveScrollXPos = 3;
						if (x>cw3 && x<cw3*2) mouseMoveScrollXPos = 2;

					} else mouseMoveScrollXPos = 0;
					clearInterval($mom.mouseMoveScrollTimer);
					if (mouseMoveScrollXPos != 0)
						$mom.mouseMoveScrollTimer = setInterval(mouseMoveScroll, 25);
				});
				
			}

			var mouseMoveScroll = function(e) {
//				var self = this, el = this.element, o = this.options;

				if (mouseMoveScrollXPos > 0) {

					$mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft() + mouseMoveScrollXPos);

					if($mom.getNextElementWidth)
					{
						if(options.startAtElementId !== "") {
							$mom.swapAt = $("#" + options.startAtElementId).outerWidth();
						}
						else {
							$mom.swapAt = $mom.find(options.scrollableArea).children(":first-child").outerWidth();
						}
						$mom.getNextElementWidth = false;
					}
						
					// Do the autoscrolling
					$mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft() + mouseMoveScrollXPos);
						
					// Check to see if the swap should be done
					if(($mom.swapAt <= $mom.find(options.scrollWrapper).scrollLeft()))
					{ 
						// Clone the first element and append it last in the scrollableArea
						var item1 = $mom.find(options.scrollableArea).children(":first-child");
						var item2 = item1.clone(true);
				        //item2.click(function() {
						//	showBigImage( $(this).attr('src') );
						//});
						$mom.find(options.scrollableArea).append(item2);

						// Compensate for the removal of the first element by
						$mom.find(options.scrollWrapper).scrollLeft(($mom.find(options.scrollWrapper).scrollLeft() - $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();
						
						$mom.getNextElementWidth = true;
					}
				}
			}



/*


				case "endlessloopright":
					// 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(el.data("getNextElementWidth"))
					{
						if((o.startAtElementId !== "") && (el.data("startAtElementHasNotPassed"))) {
							el.data("swapAt", $("#" + o.startAtElementId).outerWidth(true));
							el.data("startAtElementHasNotPassed", false);
						}
						else {
							el.data("swapAt", el.data("scrollableArea").children(":first").outerWidth(true));
						}
						
						el.data("getNextElementWidth", false);
					}
		
					// Do the autoscrolling
					el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft() + o.autoScrollStep);

					// Check to see if the swap should be done
					if(el.data("swapAt") <= el.data("scrollWrapper").scrollLeft())
					{ 
						el.data("swappedElement", el.data("scrollableArea").children(":first").detach());
						el.data("scrollableArea").append(el.data("swappedElement"));
						el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft() - el.data("swappedElement").outerWidth(true));
						el.data("getNextElementWidth", true);
					}
					break;
				case "endlessloopleft":
					// 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(el.data("getNextElementWidth"))
					{
						if((o.startAtElementId !== "") && (el.data("startAtElementHasNotPassed"))) {
							el.data("swapAt", $("#" + o.startAtElementId).outerWidth(true));
							el.data("startAtElementHasNotPassed", false);
						}
						else {
							el.data("swapAt", el.data("scrollableArea").children(":first").outerWidth(true));
						}
		
						el.data("getNextElementWidth", false);
					}
		
					// Do the autoscrolling
					el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft() - o.autoScrollStep);
					
					// Check to see if the swap should be done
					if(el.data("scrollWrapper").scrollLeft() === 0)
					{ 
						el.data("swappedElement", el.data("scrollableArea").children(":last").detach());
						el.data("scrollableArea").prepend(el.data("swappedElement"));
						el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft() + el.data("swappedElement").outerWidth(true));
						el.data("getNextElementWidth", true);
					}
					break;



*/




			/*
			$mom.find('img').each( function() {
				$(this).bind('mouseover', function() {
					alert($(this).src);
				});
			});
			*/

			// *****************************************************************
			//
			//
			$mom.find('img').css({cursor: 'hand'});

			// Для всех картинок внутри контейнера ставим эвент клик
			//   для отображения юольшой картинки
			$mom.find('img').click(function() {
				showBigImage( $(this).attr('src') );
			});

			//$mom.find('img').each( function() {
			//	$(this).bind('mouseover', function() {
			//		showBigImage( $(this).attr('src') );
			//	});
			//});

			
			//
			//
			// *****************************************************************

			$mom.previousScrollLeft = 0;
			$mom.pingPongDirection = "right";
			$mom.swapAt;
			$mom.getNextElementWidth = true;
			// The autoScroll function
			
			var autoScroll = function()
			{	
				switch(options.autoScrollDirection)
				{
					case "right":
						$mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft() + options.autoScrollSpeed);
						break;
						
					case "left":
						$mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft() - options.autoScrollSpeed);
						break;
						
					case "backandforth":
						// Store the old scrollLeft value to see if the scrolling has reached the end
						$mom.previousScrollLeft = $mom.find(options.scrollWrapper).scrollLeft();
						
						if($mom.pingPongDirection == "right") {
							$mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft() + options.autoScrollSpeed);
						}
						else {
							$mom.find(options.scrollWrapper).scrollLeft($mom.find(options.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 === $mom.find(options.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)
						{
							if(options.startAtElementId !== "") {
								$mom.swapAt = $("#" + options.startAtElementId).outerWidth();
							}
							else {
								$mom.swapAt = $mom.find(options.scrollableArea).children(":first-child").outerWidth();
							}
							
							$mom.getNextElementWidth = false;
						}
						
						// Do the autoscrolling
						$mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft() + options.autoScrollSpeed);
						
						// Check to see if the swap should be done
						if(($mom.swapAt <= $mom.find(options.scrollWrapper).scrollLeft()))
						{ 
							// Clone the first element and append it last in the scrollableArea
							var item1 = $mom.find(options.scrollableArea).children(":first-child");
							var item2 = item1.clone(true);
					        //item2.click(function() {
							//	showBigImage( $(this).attr('src') );
							//});
							$mom.find(options.scrollableArea).append(item2);

							// Compensate for the removal of the first element by
							$mom.find(options.scrollWrapper).scrollLeft(($mom.find(options.scrollWrapper).scrollLeft() - $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();
							
							$mom.getNextElementWidth = true;
						}
						break;
					default:
						break;
						
				}

			};
			
			
			// **************************************************
			// EVENTS - scroll left
			// **************************************************
		
			// The function that does the actual scrolling left
			var doScrollLeft = function()
			{	
				if(scrollXpos > 0) {
					$mom.find(options.scrollWrapper).scrollLeft($mom.find(options.scrollWrapper).scrollLeft() - (scrollXpos*booster));
				}
				showHideHotSpots();
			};
			
	});
};

})(jQuery);