var slideDelay = 5000;
var slideDelayOnClick = 10000;

var nextSlide = 1;
var maxSlides = 4;

var timer = 0;

// Home Page Carousel
$(document).ready(function() {
    // Load the initial image & button
    $("#homeCarouselItem_Image1").attr('src', '/assets/images/carousel/home page/carousel_images_homepage_hardwood.jpg');
    $("#homeCarouselItem1").fadeTo('slow', 1).show();
    $("#homeCarouselItem_Button1").show();
    
    timer = setTimeout("loadNextSlide()", slideDelay);
    
    // Load the rest of the images
    $("#homeCarouselItem_Image2").attr('src', '/assets/images/carousel/home page/carousel_images_homepage_metal.jpg');
    $("#homeCarouselItem_Image2").show();
    $("#homeCarouselItem_Image3").attr('src', '/assets/images/carousel/home page/carousel_images_homepage_italia.jpg');
    $("#homeCarouselItem_Image3").show();
    $("#homeCarouselItem_Image4").attr('src', '/assets/images/carousel/home page/carousel_images_homepage_infant.jpg');
    $("#homeCarouselItem_Image4").show();
});

function loadNextSlide() {
    
    // Get the current slide nav name
    var currentSlideNavName = "#slide" + nextSlide;
    var currentSlideName = "#homeCarouselItem" + nextSlide;
    
    // Increment the slide counter
    nextSlide++;
    if(nextSlide > maxSlides) {
        nextSlide = 1;
    }
    
    // Get the next slide nav name
    var nextSlideNavName = "#slide" + nextSlide;
    var nextSlideName = "#homeCarouselItem" + nextSlide;
    
    // Set the Nav to the next item
    $(currentSlideNavName).removeClass('selectedSlide');
    $(nextSlideNavName).addClass('selectedSlide');
    
    $(currentSlideName).fadeTo('slow',0).hide();
    $(nextSlideName).fadeTo('slow',1).show();
    
    timer = setTimeout("loadNextSlide()", slideDelay);
}

function moveToSlide(slideNumber) {

    // stop the timer
    clearTimeout(timer);

    // Get the current slide nav name
    var currentSlideNavName = "#slide" + nextSlide;
    var currentSlideName = "#homeCarouselItem" + nextSlide;
    
    // Increment the slide counter
    nextSlide = slideNumber;
    if(nextSlide > maxSlides) {
        nextSlide = 1;
    }
    
    // Get the next slide nav name
    var nextSlideNavName = "#slide" + nextSlide;
    var nextSlideName = "#homeCarouselItem" + nextSlide;
    
    // Set the Nav to the next item
    $(currentSlideNavName).removeClass('selectedSlide');
    $(nextSlideNavName).addClass('selectedSlide');
    
    $(currentSlideName).fadeTo('slow',0).hide();
    $(nextSlideName).fadeTo('slow',1).show();
    
    // Reset the timer - with an additional delay
    timer = setTimeout("loadNextSlide()", slideDelayOnClick);
}