/*
	Continuous scroller by James Mountford, 04/02/2010
	
	Example HTML:	
	
	<div id='products_page_container' class="wpsc_container productdisplay example-category">
	    <div class='absoluteBox'>
			<div class="product_grid_display">
		        <div class="product_grid_item product_view_72">
				   	<div class="item_image">
						<a href="http://www.bigdot1.cscrollerInstance.o.uk/nrs-wp/products-page/interlevin/interlevin-ur150ss/">

							<img class="product_image" id="product_image_72" alt="Interlevin UR150ss" title="Interlevin UR150ss" src="index.php?image_id=33&amp;width=96&amp;height=96" />
						</a>
					</div>
				 	<div class="grid_product_info">
						<div class="product_text">
							<a href='http://www.bigdot1.cscrollerInstance.o.uk/nrs-wp/products-page/interlevin/interlevin-ur150ss/'><strong>Interlevin UR150ss</strong></a>
						</div>
					</div>
				</div>
				<div class="product_grid_item product_view_70">
					<div class="item_image">
						<a href="http://www.bigdot1.cscrollerInstance.o.uk/nrs-wp/products-page/tefcold/tefcold-sd1360/">
							<img class="product_image" id="product_image_70" alt="Tefcold SD1360" title="Tefcold SD1360" src="index.php?image_id=35&amp;width=96&amp;height=96" />
						</a>
					</div>
				 	<div class="grid_product_info">
						<div class="product_text">
							<a href='http://www.bigdot1.cscrollerInstance.o.uk/nrs-wp/products-page/tefcold/tefcold-sd1360/'><strong>Tefcold SD1360</strong></a>
						</div>
					</div>			 				
				</div>
				<div class="product_grid_item product_view_69">
					<div class="item_image">
						<a href="http://www.bigdot1.cscrollerInstance.o.uk/nrs-wp/products-page/tecfrigo/tecfrigo-lgf4/">
							<img class="product_image" id="product_image_69" alt="Tecfrigo LGF4" title="Tecfrigo LGF4" src="index.php?image_id=31&amp;width=96&amp;height=96" />
						</a>
					</div>
				 	<div class="grid_product_info">
						<div class="product_text">
							<a href='http://www.bigdot1.cscrollerInstance.o.uk/nrs-wp/products-page/tecfrigo/tecfrigo-lgf4/'><strong>Tecfrigo LGF4</strong></a>
						</div>
					</div>				 				
				</div>
			</div>
		</div>
	</div>
	
	
	
	Call it with:
	
	<script type='text/javascript' src="<?php echo JS, "/"; ?>jmscroller.js"></script>
	<script type='text/javascript'>
		jQuery(document).ready(function(){
			jQuery(".wpsc_container").jmscroller({
				cycleTime: 5000,
				opacityValue: 0.7
			});
		});
	</script>
	
	To have no opacity, call it with the following argument
		opacityValue = "false"
	
	
	Required CSS (heights, padding, etc changeable):
	
	.wpsc_container{
		width: 100%;
		height: 165px;
		overflow: hidden;
		position: relative;
	}

	.product_grid_display{
		margin: 0 auto;
		padding-top: 30px;
	}

	.product_grid_display .product_grid_item{
		min-height: 0px;
		float: left;
	}

	.absoluteBox{
		width: 100%;
	}
	
	
	
	directions: left2right, right2left, top2bottom, bottom2top
	
*/

(function(jQuery){
	
	jQuery.fn.jmscroller = function(options){
		
		var scrollerInstance = this;
		
		scrollerInstance.defaults = {
			movingBox: '.absoluteBox',
			imagesHolder: '.showcasegrid',
			cycleTime: 1500,
			imageBoxes: '.showcaseitem',
			textHolder: '.product_text',
			opacityValue: 0.7,
			hideText: 1,
			direction: "right2left"
		}
						
		scrollerInstance.container = jQuery(scrollerInstance);
		scrollerInstance.o = jQuery.extend(scrollerInstance.defaults, options);
		
		/*scrollerInstance.imagePreloads = new Array();
		scrollerInstance.i = 0;
		jQuery(scrollerInstance.o.imageBoxes + " img").each(function(){
			scrollerInstance.imagePreloads[scrollerInstance.i] = new Image();
			scrollerInstance.imagePreloads[scrollerInstance.i].src = this.src;
			scrollerInstance.i++;
		});*/
		
		if(scrollerInstance.o.direction == "left2right"){
			scrollerInstance.theWay = "right";
		}else if(scrollerInstance.o.direction == "top2bottom"){
			scrollerInstance.theWay = "bottom";
		}else if(scrollerInstance.o.direction == "bottom2top"){
			scrollerInstance.theWay = "top";
		}else{
			scrollerInstance.theWay = "left";
		}
		
		scrollerInstance.o.container = scrollerInstance.container;
		scrollerInstance.cssObject = Object();
		jQuery(scrollerInstance.o.movingBox, scrollerInstance).css({'position' : "absolute"});
		
		jQuery(scrollerInstance.o.imageBoxes, scrollerInstance).css({'position' : "absolute"});
		
		//if(scrollerInstance.o.opacityValue != "false")
			jQuery(scrollerInstance.o.imageBoxes, scrollerInstance).css({opacity : scrollerInstance.o.opacityValue});
			
		if(scrollerInstance.o.hideText != "false")
			jQuery(scrollerInstance.o.textHolder, scrollerInstance).css({opacity : 0});
		
		scrollerInstance.distFromLeft, scrollerInstance.timeLeft, scrollerInstance.distRemaining, scrollerInstance.pixelsPerMS;
		scrollerInstance.imageHolders = new Array(); //to hold original image holders
		scrollerInstance.clones = new Array(); //to hold clone image holders
		
		scrollerInstance.totalOriginalIHs = jQuery(scrollerInstance.o.movingBox + " " + scrollerInstance.o.imageBoxes, scrollerInstance).size(); //get the amount of original image holders
		
		scrollerInstance.o.cycleTime = scrollerInstance.totalOriginalIHs * scrollerInstance.o.cycleTime;
		
		scrollerInstance.runningWidthTotal = 0; //initiate width at 0
		
		for(var i=0; i<scrollerInstance.totalOriginalIHs; i++){
			scrollerInstance.imageHolders[i] = jQuery(scrollerInstance.o.movingBox + " " + scrollerInstance.o.imageBoxes + ":eq(" + i + ")", scrollerInstance); //get all original image holders
			scrollerInstance.cssObject[scrollerInstance.theWay] = scrollerInstance.runningWidthTotal;
			scrollerInstance.imageHolders[i].css(scrollerInstance.cssObject); //set original image holders left values
			
			scrollerInstance.clones[i] = scrollerInstance.imageHolders[i].clone(); //make clones
			
			if(scrollerInstance.o.direction == "left2right"){
				scrollerInstance.runningWidthTotal += scrollerInstance.imageHolders[i].outerWidth(true);
			}else if(scrollerInstance.o.direction == "top2bottom"){
				scrollerInstance.runningWidthTotal += scrollerInstance.imageHolders[i].outerHeight(true);
			}else if(scrollerInstance.o.direction == "bottom2top"){
				scrollerInstance.runningWidthTotal += scrollerInstance.imageHolders[i].outerHeight(true);
			}else{
				scrollerInstance.runningWidthTotal += scrollerInstance.imageHolders[i].outerWidth(true); //get next left value amount
			}
			
			
		}
		
		scrollerInstance.totalOriginalWidth = scrollerInstance.runningWidthTotal; //get total width of original image holders
		
		scrollerInstance.pixelsPerMS = scrollerInstance.totalOriginalWidth/scrollerInstance.o.cycleTime;
		
		for(var i=0; i<scrollerInstance.totalOriginalIHs; i++){
			scrollerInstance.cssObject[scrollerInstance.theWay] = (parseInt(scrollerInstance.clones[i].css(scrollerInstance.theWay), 10) + scrollerInstance.totalOriginalWidth);
			scrollerInstance.clones[i].css(scrollerInstance.cssObject); //set left value at original plus total width of originals			
			
			jQuery(scrollerInstance.o.imagesHolder, scrollerInstance).append(scrollerInstance.clones[i]); //add the clones to the marquee
		}
		
		function startMovement(){
			scrollerInstance.cssObject[scrollerInstance.theWay] = "0px";
			scrollerInstance.movement.css(scrollerInstance.cssObject); //reset the position to 0 at end of first cycle
			scrollerInstance.cssObject[scrollerInstance.theWay] = -(scrollerInstance.totalOriginalWidth);
			scrollerInstance.movement
				.animate(
					scrollerInstance.cssObject, //animate to left again
					scrollerInstance.o.cycleTime, //8 seconds to move by above left amount again
					"linear", //constant speed again
					startMovement
			);
		}

		scrollerInstance.cssObject[scrollerInstance.theWay] = -(scrollerInstance.totalOriginalWidth);
		scrollerInstance.movement = jQuery(scrollerInstance.o.movingBox, scrollerInstance).animate( //start the animation of container of the image holders
		scrollerInstance.cssObject, //animate to the left
		scrollerInstance.o.cycleTime, //8 seconds to move by the above left amount
		"linear", //constant speed instead of swinging speed
		startMovement //start the recursion
		);
					
		scrollerInstance.o.container.hover(function(){
			scrollerInstance.movement.stop();
			scrollerInstance.movement.dequeue();
		},
		function(){
			scrollerInstance.distFromLeft = -(parseFloat(scrollerInstance.movement.css(scrollerInstance.theWay)));
			scrollerInstance.distRemaining = (scrollerInstance.totalOriginalWidth) - scrollerInstance.distFromLeft;
			scrollerInstance.timeLeft = scrollerInstance.distRemaining/(scrollerInstance.pixelsPerMS);
			scrollerInstance.newPxPerMS = scrollerInstance.distRemaining/scrollerInstance.timeLeft;
			scrollerInstance.cssObject[scrollerInstance.theWay] = -(scrollerInstance.totalOriginalWidth);
			scrollerInstance.movement = jQuery(scrollerInstance.o.movingBox, scrollerInstance).animate( //start the animation of container of the image holders
				scrollerInstance.cssObject, //animate to the left
				scrollerInstance.timeLeft, //8 seconds to move by the above left amount
				"linear", //constant speed instead of swinging speed
				startMovement //start the recursion
			);
			
		});
		if(scrollerInstance.o.opacityValue != "false"){
			jQuery(scrollerInstance.o.imageBoxes, scrollerInstance).hover(function(){
				if(scrollerInstance.o.hideText != "false"){
					jQuery(scrollerInstance.o.textHolder, this).stop().animate({ opacity: 1 }, 200);
				}
				jQuery(this).stop().animate({ opacity: 1 }, 200);
			},
			function(){
				if(scrollerInstance.o.hideText != "false"){
					jQuery(scrollerInstance.o.textHolder, this).stop().animate({ opacity: 0 }, 100);
				}
				jQuery(this).stop().animate({ opacity: scrollerInstance.o.opacityValue }, 100);
			});		
		}		
	}
})(jQuery);