$(function(){
	var $this=$(".scrollableArea");
	var leftBut=$(".scrollingHotSpotLeft");
	var rightBut=$(".scrollingHotSpotRight");
	var scrollTimer;
	
	leftBut.click(function(){
		scrollDom($this);
	});
	
	rightBut.click(function(){
		scrollDom($this,true);
	});
	
	leftBut.hover(function(){
		clearInterval(scrollTimer);
	},function(){
		   scrollTimer=setInterval(function(){
						 scrollDom( $this );
					}, 3000 );
		});
	rightBut.hover(function(){
		clearInterval(scrollTimer);
	},function(){
		   scrollTimer=setInterval(function(){
						 scrollDom( $this );
					}, 3000 );
		});
	$this.hover(function(){
			  clearInterval(scrollTimer);
		 },function(){
		   scrollTimer=setInterval(function(){
						 scrollDom( $this );
					}, 3000 );
		}).trigger("mouseleave");
});
var isScroll=0;
function scrollDom(obj,isRight){
	var $self=$(obj);
	var nowWidth=$self.find("a:first").width();
	if(isScroll==0){
		isScroll=1;
		if(isRight!=true){
		$self.animate({ "marginLeft" : -nowWidth +"px" }, 600 , function(){
			 $self.css({marginLeft:0}).find("a:first").appendTo($self);
			 isScroll=0;
			});
		}else{ 
		$self.find("a:last").prependTo($self);
		$self.css({marginLeft:-(nowWidth*1)+"px"});
		$self.animate({ "marginLeft" : "0" }, 1200 , function(){
			 $self.css({marginLeft:0});
			 isScroll=0;
			});
		}
	}
}