var intervalID;
var activeSlideImageUrl = "/static/images/homepage/feature_dot_selected.jpg";
var inactiveSlideImageUrl = "/static/images/homepage/feature_dot.jpg";
var navImgSelector = "div#slide_indicator img.";
var slideSelector = "div#feature_items div#";


function animateSlide(currentSlide) {
    var totalSlides = 3;
    var nextSlide = currentSlide+1;

    if (nextSlide <= totalSlides) { //only animate once
        $(slideSelector + currentSlide).css("display", "none")   //or display:none;
            .removeClass("active_slide");

        $(navImgSelector + currentSlide).attr('src', inactiveSlideImageUrl);

        $(slideSelector + nextSlide).fadeIn("slow")
                .addClass("active_slide");

       $(navImgSelector + nextSlide).attr('src', activeSlideImageUrl);
   }
    else {
       
        var nextSlide = 1;
        $(slideSelector + currentSlide).css("display", "none")   //or display:none;
             .removeClass("active_slide");

        $(navImgSelector + currentSlide).attr('src', inactiveSlideImageUrl);

        $(slideSelector + nextSlide).fadeIn("slow")
                 .addClass("active_slide");

        $(navImgSelector + nextSlide).attr('src', activeSlideImageUrl);

        nextSlide = totalSlides + 1;
    }

   

         clearInterval(intervalID); //clear the previous interval and set it with the new slide to show
         intervalID = setInterval("animateSlide(" + nextSlide + ")", 10000);
     
    
   
}

function showSlide(slideToShow) {

    clearInterval(intervalID); //clear timer
    
    var currentSlide = $("div.active_slide").attr('id'); //get current active slide
    $(slideSelector + currentSlide).css("display", "none")   //hide active slide
            .removeClass("active_slide");
    
    $(slideSelector + slideToShow).fadeIn("slow")//set new active slide
        .addClass("active_slide");

    //set navigation
    $(navImgSelector + currentSlide).attr('src', inactiveSlideImageUrl);
    $(navImgSelector + slideToShow).attr('src', activeSlideImageUrl);
}
$(document).ready(function() {
    intervalID = setInterval("animateSlide(1)", 10000);

    $("div#slide_indicator img").click(function() { //on click navigate to the next slide
        var myID = $(this).attr('class');
        showSlide(myID);
    });
});