function fadeMe( baseVar, travelVar )
{
	//still pretty rough, gotta find a nicer way of doing this
	
	//We only want to see this once
	var splash = $('.splash-image');
	
	//find out what number the active element is
	var slideNum = $('#showcase li').index($('.active'));
	var picArray = $('#showcase li').map(function(){return this;});
	
	if ( slideNum == (picArray.length - 1) ) { slideNum = 0; } else { slideNum = slideNum + 1; }
	
	//If there is a splash image, we need to fade it out and then remove it from the
	//list. We only want it shown once, so if it stays inside the UL element,
	//we wont be able to get a proper index to go off.
	if( splash !== [] )
	{
		splash.fadeOut('slow', function(){
			$('.info-overlay .info-mask').css({marginLeft:'297px'});
			splash.removeClass('active').next().fadeIn('slow',function(){ 
				$(this).addClass('active');
				$('.info-overlay .info-mask').animate({marginLeft:'0px'}, 500); 
				splash.remove();
				return;
			});
		});
		
	}
	
	var sImage = picArray[slideNum];
	
	var pointMarker = baseVar + ( slideNum * travelVar ) + 'px';
	
	$('#pointer-rail #left-bg').animate({ width: pointMarker }, 500, function(){
	
		$('li.active').fadeOut('slow', function(){
			$(this).removeClass('active');
			$('.info-overlay .info-mask').css({marginLeft:'297px'});
			$(sImage).fadeIn('slow',function(){
				
				$('.info-overlay .info-mask').animate({marginLeft:'0px'}, 500); 
				
			}).addClass('active');
		});
		
	});
	
}


$(function() {

	//use the array index to pin point which feature image belongs
	//to which image. Then load with ajax (build later) for a faster over-all loading time
	
	//Grab the featured images dom list
	var pics = $('#showcase li').map(function(){return this;});
	
	//store important elements
	var thumb = $('#picker a');
	var point = $('#pointer-rail #left-bg');
	var base = 80; //original distance the pointer is from the left
	var travel = 175; //distance between each element the pointer has to travel
	var featureImage = 0;
	
	//Start autoslider
	var autoFade = setInterval( 'fadeMe('+base+','+travel+')', 5000 );
	
	//fadey hovers
	thumb.hover(function(){ $('img', this).animate({opacity: 0.7}, 200); }, function(){ $('img', this).animate({opacity: 1.0}, 200); });
	
	//Selecting a new thumbnail
	thumb.click(function(){
		
		//stop auto slider
		clearInterval(autoFade);
		
		//We only want to see this once
		var splash = $('.splash-image');
		var tIndex = $('#picker li a').index(this);
		
		//Get the matching feature image
		if( splash ) { featureImage = pics[tIndex+1]; } else { featureImage = pics[tIndex]; }
		
		//Calculate the distance the pointer has to travel
		//Note: there is exactly 64px distance between the thumbnails
		//Note: Base distance from the left is 75px
		
		var marker = base + ( tIndex * travel ) + 'px';
		point.animate({ width: marker }, 500, function(){
			
			//Fade the current feature image out, then fade new one in
			//TODO: add this so it happens after the slider moves its course
			$('li.active').fadeOut('slow', function(){
				$(this).removeClass('active');
				$('.info-overlay .info-mask').css({marginLeft:'297px'});
				$(featureImage).fadeIn('slow',function(){
					
					if( splash ) { splash.remove(); }					
					
					$('.info-overlay .info-mask').animate({marginLeft:'0px'}, 500); 
					
				}).addClass('active');
			});
			
		});
		
		return false;
		
	});
	
});