var anspeed = 500; //the speed of the fade in and fadeout. This is the time it takes to fade out and than the same time to fade inn.

function slideshow() {


    jQuery(".feature-story.active").animate({
        opacity: "0"
      }, anspeed, function() {
        
        
        var last = jQuery(".feature-story:last-child").attr("rel").split("-");
        var last = last[1];
        var rel = jQuery(this).attr("rel").split("-");
                
        relnumber = parseFloat(rel[1]) + 1;
        
        var button = "#features ul li a#feature-link-" + rel[1];
        
        rel = "[rel=" + rel[0] + "-" + relnumber + "]"; 
        
        jQuery(this).hide();
        jQuery(this).removeClass("active");
        jQuery(button).removeClass("active");
        
        var button = "#features ul li a#feature-link-" + relnumber;
        
        if (relnumber <= last) {
        
            jQuery(rel).show();
            jQuery(rel).addClass("active");
            jQuery(button).addClass("active");            
            jQuery(rel).animate({opacity: 1}, anspeed, function() {});
        
        }
        
        else {
        
         jQuery("[rel='feature-1']").show();
         jQuery("[rel='feature-1']").addClass("active");  
         jQuery("#feature-link-1").addClass("active");  
        
        jQuery("[rel='feature-1']").animate({opacity: 1}, anspeed, function() {});
        
        
        }
        
      });


}


jQuery(document).ready(function(jQuery) {
        
    jQuery(".feature-story").each(function(n) {
    
        jQuery("#features ul").append("<li><a id='feature-link-"+ (n+1) +"' class='feature-link' title='Image "+ (n+1) +"' href='#feature-"+ (n+1) +"'>"+ (n+1) +" </a> </li>");    
        
        jQuery(this).attr("rel", "feature-"+ (n+1));
        
        jQuery(this).css("opacity", "0");
        
        
        
    });

    jQuery("#features ul li:first-child a").addClass("active");
    jQuery(".feature-story.active").css("opacity", "1");


    jQuery("#features ul li a").click(function() {
    
        var href = jQuery(this).attr("href").split("#");
        href = href[1];
        href = "[rel='" + href + "']";
        
        //console.log(href);
        
        jQuery(".feature-story.active").animate({opacity: "0"}, anspeed, function() {
            
            jQuery(this).hide();
            jQuery(this).removeClass("active");
            jQuery(href).addClass("active");
            jQuery(href).show();
            
            jQuery(href).animate({opacity: 1}, anspeed, function() {});
            
            
          });
          
          jQuery("#features ul li a.active").removeClass("active");
          jQuery(this).addClass("active");
        
    
    
    });
    
    jQuery("#features").mouseover(function() {
    
        clearInterval(set_slideshow);
    
    }).mouseleave(function(){
    
    set_slideshow = setInterval(slideshow, 4000);
    
    
    });
    
    
   set_slideshow = setInterval(slideshow, 4000);

});