$(document).ready(function() {
		$("#thumbs span").eq(0).find("img").attr("src", "/images/ban_btn1_2.jpg");//default
			// Save  the jQuery objects for later use.
			var outer		= $("#preview_outer");
			var arrow		= $("#arrow");
			var thumbs		= $("#thumbs span");
 
			var preview_pos;
			var preview_els	= $("#preview_inner div.banid");
			var image_width	= preview_els.eq(0).width(); // Get width of imaages
			
			// Hook up the click event
			thumbs.click(function() {
			hasclick=1;
			var now = new Date();
		clicktime=now.getSeconds();
				// Get position of current image
				preview_pos = preview_els.eq( thumbs.index( this) ).position();
				
				clickindex=thumbs.index( this)+1
					$("#thumbs span").each(function() {
					thisspanindex=$("#thumbs span").index(this)+1;
					
							$(this).find("img").attr("src","/images/ban_btn"+thisspanindex+"_1.jpg");
						});
						thisindexs=clickindex;//save index
                $(this).find("img").attr("src","/images/ban_btn"+clickindex+"_2.jpg");
				// Animate them!
				outer.stop().animate( {'scrollLeft' : preview_pos.left},	500 );
				//arrow.stop().animate( {'left' : $(this).position().left },	500 );
			});

			// Reset positions on load
			//arrow.css( {'left' : thumbs.eq(0).position().left } ).show();
			outer.animate( {'scrollLeft' : 0}, 0 );

			// Set initial width
			$("#preview_inner").css('width', preview_els.length * image_width);
		});
		
		
		function allup(){
		var now = new Date();
//alert(now.getTime()% 60000)
		if(hasclick==1){
		if(now.getSeconds()-clicktime<11&&now.getSeconds()-clicktime>=0){
		return ;
		}
		if(now.getSeconds()-clicktime<-49){
		return;
		}
		}
		hasclick=0;
		thisindex=thisindexs
		thisindexs=thisindexs+1
		if(thisindexs>$("#thumbs span").length){
		thisindexs=1;
		}
		
                   $("#thumbs span").each(function() {
					thisspanindex=$("#thumbs span").index(this)+1;
					
							$(this).find("img").attr("src","/images/ban_btn"+thisspanindex+"_1.jpg");
						});
		//alert($("#thumbs span").length);
		// Save  the jQuery objects for later use.
			var outer		= $("#preview_outer");
			var thumbs		= $("#thumbs span");
			var preview_els	= $("#preview_inner div.banid");
            preview_pos = preview_els.eq( thumbs.index( $("#thumbs span").eq(thisindex-1)) ).position();
                $("#thumbs span").eq(thisindex-1).find("img").attr("src","/images/ban_btn"+thisindex+"_2.jpg");
				// Animate them!
				outer.stop().animate( {'scrollLeft' : preview_pos.left},	500 );
				//arrow.stop().animate( {'left' : $(this).position().left },	500 );
		}
		var thisindexs=2;
		var hasclick=0;
		clicktime=0;
		 
		setInterval("allup()",5000);