var currentFeatureLink = 1;
var featureKids;
var featureKid;
var previousKid;
var featureSwitchSeconds = 3;
var featureTimer;
var runTimer = true;

$(document).ready(function(){ 
  featureKids = $('#feature_links .link');
	featureKids.click(function(){
    	currentFeatureLink = $(this).attr("rel");
		runTimer = false;
		clearTimeout(featureTimer);
  		featureSwitch();

	});
	if (runTimer) {
  		setTimeout("featureSwitch()", featureSwitchSeconds * 1000);
	}
});

function featureSwitch() {
  featureKid = featureKids[currentFeatureLink];
  previousKid = featureKids[currentFeatureLink-1];

  //remove selected class (borders) from all links, then add to current selection
  $('#feature_links .link').removeClass("selected");
  $(featureKid).addClass("selected");
  
  //but if current selection is the 4th feature, kill the bottom border (which is a background img)
  if(featureKid == featureKids[3])
  	$(featureKid).css("background", "none");
  
  //prev_selected adds a bottom border to element before current one (simulating top border)
  featureKids.removeClass("prev_selected");
  $(previousKid).addClass("prev_selected");

  l_nIndex = currentFeatureLink;
  l_sHtml = $('#feature_copy_hidden_'+ l_nIndex).html();
  l_sImageHtml = $('#feature_image_hidden_'+ l_nIndex).html();

  //set explicit height/width on feature_wrapper so it holds it's ground when hidden below
  l_nFeatureHeight = $('#feature_wrapper').height();
  $('#feature_wrapper').height(l_nFeatureHeight);
  
  //hide feature wrapper, change the content, then fade it back in
  $('#feature_copy_holder, #feature_image_holder').hide();
  $('#feature_copy_holder').html(l_sHtml);
  $('#feature_image_holder').html(l_sImageHtml);
  $('#feature_copy_holder, #feature_image_holder').fadeIn(450);
  
  
  if (++currentFeatureLink > 3) {
    currentFeatureLink = 0;
  }

	if (runTimer) {
  		clearTimeout(featureTimer);
  		featureTimer = setTimeout("featureSwitch(true)", featureSwitchSeconds * 1000);
	}
}