$(document).ready( function()
			{
				$("#ui-scroller").each( function (i) {
					
					var autoScrollTimer
					var index = 0;
					var scroller = $(this).css({position: "relative", overflow: "hidden" })
					var controlWidth = 740; //scroller.innerWidth()
						var items = scroller.children().css({"width": controlWidth, "float": "left", "display": "block"})
					var scrollPane = $("<div class=\"scroller\"></div>").append( items ).appendTo( this ).css({width: (controlWidth*items.length), position: "relative" })

					if (items.length>1)
					{
						items.each( function (i) 
						{
							//alert(i)
							$("<a href='#' class=\"page\">" + (i+1) + "</a>").appendTo( scroller ).bind("click", function(e) { scrollTo( i ); return false })
						} ) 
						
					}
					
					scroller.bind("mouseover", function() { pause() } )
					scroller.bind("mouseout", function() { play() }  )
					
					play()

					function pause()
					{
						if (autoScrollTimer) autoScrollTimer = clearInterval( autoScrollTimer ) 
					}
					
					function play()
					{
						pause()
						autoScrollTimer = setInterval( function() { scrollTo(++index)}, 7000+i*500 )
					}

					function scrollTo( newIndex )
					{						
						switch (newIndex)
						{
							case -1: index = items.length-1; break;
							case items.length: index = 0; break;
							default: index = newIndex; break;
						}
						
						var end = index * controlWidth
												
						scrollPane.stop();
						scrollPane.animate({left: -end +"px"},350)
					}

				} )
			}
		)