$(document).ready(function(){
  
  
  
  var current_feature = 0;
  var timer = 5000;
  var feature_arr = [0, 1, 2];
  var box_width = 640;

  $('#features').css("overflow", "hidden");
  $("#feature-tabs").css("display", "block");
  $("#feature-tabs a").removeAttr("href");
  $("#feature-tabs a").css("cursor","pointer");
  $("#feature-0").addClass("selected")
  $(".frame").css({
    float: "left"
  });
  
  $("#frames").css({
    width: box_width*3,
    overflow: "hidden"
  });
  
  //Pause on Hover
  $('#features').hover(function() {
    clearInterval(feature_interval);
      }, function() {feature_interval = setInterval(feature_rotate, timer);});

  jQuery.each(feature_arr, function(current_feature) {
    $("#feature-"+current_feature).click(function(){
      animate_feature(current_feature);
      $(this).addClass("selected");
      clearInterval(feature_interval);
    });
  });

  var feature_rotate = function() {
    current_feature++;
    if (current_feature == 3) {
      current_feature = 0;
    }
    animate_feature(current_feature);
    $("#feature-"+current_feature).addClass("selected");
  }

  var animate_feature = function(current_feature) {
    $("#frames").fadeOut( 500, function() {
      $('#frames').css( "left","-" + box_width * current_feature + "px" );
      $('#frames').fadeIn( 500 );
    });
    $("#feature-tabs li a").removeClass("selected")
  };

  feature_interval = setInterval(feature_rotate, timer);
});