/*CSS example:
div.container{
	width: 800px;
	height: 180px;
	margin: 0 auto 0 auto;
	overflow: hidden;
	position: relative;
	zIndex: 1;
}
*/
/*HTML example:
<div class="container"><img src="image.jpg" onload="scroll(this,-1,0);" width="1280" height="200"/></div>
*/
var imagecounter = 0;
Math.randomMax = function(maxVal,asFloat){
	var val = Math.random()*maxVal;
	return asFloat?val:Math.round(val);
}
function scroll(scrollimage,speed,scrolloverlap){
			scrollwidth=scrollimage.width;	
			scrollimage.id = "image"+imagecounter;
			loadingimage = document.getElementById('loadingimage'+imagecounter);
			
			//hide loading image
			loadingimage.style.display = "none";
			scrollimage.style.visibility="";
			
  		//create imageclone
			scrollimage2 = document.createElement("img");
			scrollimage2.src = scrollimage.src;
			scrollimage2.height = scrollimage.height;
			scrollimage2.width = scrollimage.width;
			scrollimage2.id = "secondimage"+imagecounter;
			imagecounter++;
			scrollimage.parentNode.insertBefore(scrollimage2, scrollimage);
			
			if (speed<0){var direction = -1;}else{var direction = 1;}
 			var randomposition = -1*Math.randomMax(scrollwidth-185);
			
			//set original scrollimage
			scrollimage.position = 0;
			scrollimage.style.position = "absolute";
			scrollimage.style.zIndex  = 1;
			scrollimage.position = randomposition;
			scrollimage.style.left = scrollimage.position + "px";
			scrollimage.style.top = 0 + "px";	

			//set scrollimage clone
  		scrollimage2.position = direction*(scrollwidth-scrolloverlap);
			scrollimage2.style.position = "absolute";
			scrollimage2.style.zIndex  = 1;
			scrollimage2.position = randomposition+direction*(scrollwidth-scrolloverlap);
			scrollimage2.style.left = scrollimage2.position + "px";
			scrollimage2.style.top = 0 + "px";	
  		setInterval("move("+speed+","+scrolloverlap+",'"+scrollimage.id+"','"+scrollimage2.id+"');",30);
}
function move(imagespeed,overlap,imageid,secondimageid){

	var image = document.getElementById(''+imageid);
	var image2 = document.getElementById(''+secondimageid);
	var width=image.width;	
	
	image.position += imagespeed;
	image2.position += imagespeed;
	image.style.left = image.position + "px";
	image2.style.left = image2.position + "px";
	if (imagespeed<0)//scroll left
	{
  	if(image.position < (-1 * width))
  	{image.position += 2 * (width-overlap);}
  	if(image2.position < (-1 * width))
  	{image2.position += 2 * (width-overlap);}
	}
	else						 //scroll right
	{
	  if(image.position > (width))
  	{image.position += -2 * (width-overlap);}
  	if(image2.position > (width))
  	{image2.position += -2 * (width-overlap);}
	}
}