// JavaScript Document

//logo_scroller from andy giles


// JavaScript Document


// the speed of the logo scroller, number of miliseconds per pixel of logo..
// bigger numbers = slower scrolling.
LOGO_SCROLL_SPEED = 10;

// the type of animation fot the scroll - either 'swing' or 'linear'
LOGO_SCROLL_TYPE = "";




jQuery( function($) {		// wrap it all in JQuery in case we called this function before the page is ready...
		
		var debug = false;
		var logosContainer = $("#homeClientLogos");
		var logosScrollingContainer = $("#scrollingContainer");
		
	
		logosContainer.bind("scrollFinished", scrollLogos);
		
		var logosLoadingCount=0;
		
		logoLoaded();
	
		
		function fillScroller() {
			//console.log("filling scroller...");
			// make sure that there are enough logos to fill the scroller
			var containerWidth = logosContainer.outerWidth();
			var overlapRequired = 100;
			var logosWidth = logosScrollingContainer.outerWidth();	// figure out how wide our current logos are...
			
			if (logosContainer.children().length < 1) {				// stop now if we don't actually have any logos
				return false;	
			}
			
			indexToCopy=0;
			while ((logosWidth - overlapRequired) < containerWidth) { // duplicate the start of the list until we have a wide enough set of logos to fill the space + overlap
				//console.log(logosWidth);
				var toClone = logosScrollingContainer.children().eq(indexToCopy);
				logosWidth += toClone.outerWidth();
				logosScrollingContainer.css("width", parseInt(logosScrollingContainer.css("width")) + toClone.outerWidth() + "px");
				logosScrollingContainer.append(toClone.clone());
				indexToCopy ++;
			}

			logosContainer.trigger("scrollFinished");
		}
		
		
		function logoLoaded() {
			// we have to keep track of logo images loading, as they are loaded ofter the DOM is ready
			// if we try to scroll before the images have loaded we don't know how wide they are.
			logosLoadingCount--;	// reduce the count of logos that re loading...
			
			// increase the width of the logos container by the width of the container for this logo - prevents wrapping
			
		
			//logosScrollingContainer.css("width", parseInt(logosScrollingContainer.css("width")) + $(this).parents(".scrollingLogo").outerWidth() + "px");
			var width = 0;
			logosScrollingContainer.find(".scrollingLogo").each(function(){width = width + $(this).outerWidth()});
			logosScrollingContainer.css("width", width + "px");
			
			//if (logosLoadingCount ==0) {	// they are all here!
			//	logosContainer.trigger("allImagesLoaded");	// trigger the event to start the scrolling
			//}
			
			fillScroller();

		}
		
		
		function scrollLogos() {
			var leftLogo = logosScrollingContainer.children("div:first");
			var distance = leftLogo.outerWidth();
		
			var time = parseInt(distance * LOGO_SCROLL_SPEED);
			
			logosScrollingContainer.animate(
							{left:"-=" + distance + "px"},
							time,
							LOGO_SCROLL_TYPE,
							function() {
								var leftLogo = logosScrollingContainer.children("div:first");	// the logo we just scrolled off the screen
								logosScrollingContainer.append(leftLogo.clone());				// add a copy of the removed logo to the right of the list
								
								logosScrollingContainer.css("left", "0px");						 // move the scrolling box back to the original position
								leftLogo.remove();
								window.setTimeout(function(){logosContainer.trigger("scrollFinished");}, 2000);	// trigger the event to scroll some more
	//							logosContainer.trigger("scrollFinished");
							}
			);
		}
		
		
		

	
		
});	// end of jquery ready