/**
	*	param cId: container id of the scroll content
	*	param scrollerId: the content id to be scroll
	*/
	function ZDMarquee(cId, scrollerId) {
		var c = document.getElementById(cId);
		var scroller = document.getElementById(scrollerId);
		var tempMq = document.getElementById('tempMq');
		tempMq.innerHTML = scroller.innerHTML;
		
		c.scrollLeft = -1;
		var   speed = 40;
		function   Marquee(){ 
			//alert(tempMq.offsetWidth - c.scrollLeft + ', ' + c.clientWidth);
		  if (tempMq.offsetWidth - c.scrollLeft <= c.clientWidth) {
			c.scrollLeft = -1;//c.clientWidth - c.scrollWidth;//c.scrollLeft - tempMq.offsetWidth; // c.clientWidth - c.scrollWidth + 1;  // 
		  } else {   
			c.scrollLeft++   
		  }   
		}  
		var  MyMar = setInterval(Marquee,speed);   
		//alert(MyMar.toString());
		c.onmouseover=function()   {clearInterval(MyMar)}   
		c.onmouseout=function()   {MyMar=setInterval(Marquee,speed)}
		
	}

	//ZDMarquee2('demo', 'demo1');