$(document).ready(function(){

			function getPic() {

				// first stop autoplaying

				var autoplay = $('#fTiles').data('autoplay');

				clearInterval(autoplay);

				
				// grab current and all slides

				var current = $('#fTiles').data('current');

				var slides = $('#fTiles li img');

				
				// lets handle nextslide

				nextslide = arguments[0];

				
				// we need to make sure that nextslide is within bounds

				if (nextslide >= slides.length) {

					nextslide = 0;

				} else if (nextslide < 0) {

					nextslide = slides.length -1;

				}

				
				// we only want to transition the topmost slide, so lets figure out which slides are top and bottom

				var top =  0;

				var bottom = 0;

				if (current != nextslide) {

					top = Math.max(current,nextslide);

					bottom = Math.min(current,nextslide);

				} else {

					top = bottom = nextslide;

				}

				
				// now lets do the fade and set the new current

				if (top == bottom) {

					slides.eq(top).fadeIn('slow');

					slides.data('current',top);

				} else if (top == nextslide) {

					slides.eq(top).fadeIn('slow',function(){ slides.eq(bottom).css('display','none'); });

					$('#fTiles').data('current',top);

				} else {

					slides.eq(bottom).css('display','block');

					slides.eq(top).fadeOut('slow');

					$('#fTiles').data('current',bottom);

				}

				
				// figure out the next slide to transition to

				nextslide = (nextslide + 1) % $("#fTabs li a").length;

				
				$('#fTiles').data('autoplay',setTimeout(function(){selectAndTransition({target:$("#fTabs li a").get(nextslide)});},4500));

				
				// Cancel autoplay if the cursor is over the tile
				autoplay = $("#fTiles").data("autoplay");

				if (cursorin===true) clearInterval(autoplay);

			}

			function selectAndTransition(obj) {

				var obj = obj.target;

				var nextView = $("#fTabs li").index(obj.parentNode);

				$("#fTabs li.selected").removeClass("selected");

				$(obj.parentNode).addClass("selected");

				getPic(nextView);

				return false;

			}

			// detect if the cursor is inside the slideshow

			var cursorin = false;

			$("#so_featured").hover(function(){
 
				cursorin=true;

				var autoplay = $("#fTiles").data("autoplay");

				clearInterval(autoplay);

			}, function(){
 
				cursorin=false;

				getPic($("#fTiles").data("current"));

			});

			$("#fTabs li a").click(selectAndTransition);


			
			// establish the current slide

			$('#fTiles').data('current',0);

			$('#fTiles').data('autoplay',0);


			
			// kick off the first frame/autoplay

			getPic(0);

		});