$(function() {
    $("#highlight-slideshow-previous").click(showPreviousSlide);
    $("#highlight-slideshow-next").click(showNextSlide);

    var totalWidth = 0;
    contentSlides = $(".highlight-slideshow-content");
    contentSlides.each(function(i) {
        totalWidth += this.clientWidth;
        totalSlides++;
    });
    $("#highlight-slideshow-holder").width(totalWidth);
    $("#highlight-slideshow-scroller").attr({ scrollLeft: 0 });
    updateButtons();

    $("#kat-slideshow-previous").show();
    $("#kat-slideshow-next").show();
});


function SlideShop() {
    this.height;
    this.width;
}
var totalSlides = 0;
var currentSlide = 1;
var contentSlides = "";
var clicked = false;
var delay = 12000;


function showPreviousSlide() {
    currentSlide--;
    updateContentHolder();
    clicked = true;
    updateButtons();
}

function showNextSlide() {
    currentSlide++;
    updateContentHolder();
    clicked = true;
    updateButtons();
}
function showSlide(x) {
    currentSlide = x;
    updateContentHolder();
    clicked = true;
    updateButtons();
}
function showfirstSlide(x) {
    currentSlide = 1;
    updateContentHolderfast();
    clicked = true;
    updateButtons();
}
function updateContentHolder() {
    var scrollAmount = 0;
    contentSlides.each(function(i) {
        if (currentSlide - 1 > i) {
            scrollAmount += this.clientWidth;
        }
    });
    $("#highlight-slideshow-scroller").animate({ scrollLeft: scrollAmount }, 6000);
}
function updateContentHolderfast() {
    var scrollAmount = 0;
    contentSlides.each(function(i) {
        if (currentSlide - 1 > i) {
            scrollAmount += this.clientWidth;
        }
    });
    $("#highlight-slideshow-scroller").animate({ scrollLeft: scrollAmount },0);
}
function updateButtons() {
    if (currentSlide < totalSlides) {
        $("#highlight-slideshow-next").show();
    } else {
        $("#highlight-slideshow-next").hide();
    }
    if (currentSlide > 1) {
        $("#highlight-slideshow-previous").show();
    } else {
        $("#highlight-slideshow-previous").hide();
    }
    updateSlideNav();
}

function loopShowSlide(way_right) {
    if (clicked == true)
        return;

    if (way_right == 1 && currentSlide < totalSlides) {
        showNextSlide();
        setTimeout("loopShowSlide(1)", delay);
        clicked = false;
    }
    else if (currentSlide > 1) {
        showfirstSlide();
        setTimeout("loopShowSlide(1)", delay);
        clicked = false;
    }
    else {
        showNextSlide();
        setTimeout("loopShowSlide(1)", delay);
        clicked = false;
    }
}
setTimeout("loopShowSlide(1)", delay);



/*http://net.tutsplus.com/tutorials/javascript-ajax/building-an-auto-scrolling-slideshow-that-works-with-and-without-javascript/*/
function updateSlideNav() {
    $('.slidenav').html('');
    var str = '<ul>';

    for (var x = 1; x <= totalSlides; x++) {
        str += '<li' + (x == currentSlide ? ' class="active"' : '') + '><a href="#" onclick="showSlide(\'' + x + '\'); return false;">' + x + '</a></li>';
    }

    str += '</ul>';

    $('.slidenav').html(str);
}