var intervalID;    

function slideSwitch(num)
{ 
    //get the active slide       
    var $active = $("#slider div.active");
    var activeNav = $($active).attr('id');
    
    //if user clicks on any of the other slides we pass a num value to take the user to that slide
    if(num != undefined) {
    
        //get the child divs of the slider
        var selector = "#slider div:nth-child(" + (num) + ")";
        //the $next var is now equal to the one user selected
        var $next = $(selector);
        //stop the time
        clearInterval(intervalID);
    }
    else
    {
        //set the $next to the next slide
        var $next = $active.next();
    }
    
    if($next.length > 0) {
    
        var currentIndex = $("#slider > div").index($(".active"));
        
        var changeSlide = currentIndex != (num - 1);
        
        //if there is a next slide then animate
        if(changeSlide) {
            //reset the navigation buttons
            $("div#slider-buttons img").attr("src", "/images/home/slide-inactive-nav.gif");
           
            $active.addClass("last-active");
            
            $next.css("opacity", "0")
                 .addClass("active")
                 .animate({opacity: 1.0}, 1000, function() {
                   $active.removeClass("active last-active")}
                 );
                activeNav = $($next).attr('id');
            //set navigation
            var prevNav = "div#slider-buttons img#" + (activeNav-1);
            var nextNav = "div#slider-buttons img#" + activeNav;
            $(nextNav).attr("src", "/images/home/slide-active-nav.gif");
            $(prevNav).attr("src", "/images/home/slide-inactive-nav.gif");
        }
    }
    else //if no more slides then clear the timer
    {
        clearInterval(intervalID);
    }
}        

$(document).ready(function(){
    //set the timer on page load
    intervalID = setInterval("slideSwitch()", 5000);
});

function showSlide(nr)
{  
   clearInterval(intervalID);
   slideSwitch(nr);
}