$(function () {
			//the loading image
			var $loader = $('#st_loading');
			//the ul element 
			var $list = $('#st_nav');
			//the current image being shown
			var $currImage = $('#st_main a').children('img:first');
	
			var actual = 0;
			var maxBanner = $("div.st_thumbs img").size();
	
	
			//let's load the current image 
			//and just then display the navigation menu
			$('<img>').load(function () {
					$loader.hide();
					$currImage.fadeIn(3000);
					//slide out the menu
					setTimeout(function () {
							$list.animate({
									'top': '0px'
							}, 500);
					}, 1000);
			}).attr('src', $currImage.attr('src'));
	
			//clicking on a thumb, replaces the large image
			$list.find('.st_thumbs img').bind('click', function () {
					var $this = $(this);
					$("#st_main a.link").attr("href", $this.attr("rel"))
					$loader.show();
					$('<img class="st_preview"/>').load(function () {
							var $this = $(this);
							var $currImage = $('#st_main a').children('img:first');
							$this.insertBefore($currImage);
							$loader.hide();
							$currImage.fadeOut(2000, function () {
									$(this).remove();
							});
					}).attr('src', $this.attr('alt'));
			}).bind('mouseenter', function () {
					$(this).stop().animate({
							'opacity': '1'
					});
			}).bind('mouseleave', function () {
					$(this).stop().animate({
							'opacity': '0.7'
					});
			});
	
			$.timer(15000, function () {
					if (actual == (maxBanner - 1)) {
							actual = -1;
					}
					actual++;
					$list.find('.st_thumbs img').eq(actual).trigger("click");
	
			})
	});