$(document).ready(function() {

    //Speed of the slideshow  
    var speed = 7000;
    
    //You have to specify width and height in .PromoCarousel CSS properties  
    //After that, the following script will set the width and height accordingly
    $('div.PromoCarousel ul li').width($('div.PromoCarousel').width());
    $('div.PromoCarousel ul').width($('div.PromoCarousel').width() * $('div.PromoCarousel ul li').length);
    $('div.PromoCarousel ul li').height($('div.PromoCarousel').height());

    //Assign a timer, so it will run periodically  
    var run = self.setInterval('promoslider(0)', speed);

    $('div.PromoCarousel ul li:first').addClass('selected');

    //Pause the slidershow with clearInterval  
    //$('#btn-pause').click(function() {
    //    clearInterval(run);
    //    return false;
    //});

    //Continue the slideshow with setInterval  
    //$('#btn-play').click(function() {
    //    run = setInterval('newsslider(0)', speed);
    //    return false;
    //});

    //Next Slide by calling the function
    $('a.CarouselLater').click(function() {
        self.clearInterval(run);
        promoslider(0);        
        return false;
    });

    //Previous slide by passing prev=1  
    $('a.CarouselEarlier').click(function() {
        self.clearInterval(run);
        promoslider(1);        
        return false;
    });

    //Mouse over, pause it, on mouse out, resume the slider show
    $('div.PromoCarousel ul li a').hover(

        function() {
            self.clearInterval(run);
        },
        function() {
            run = self.setInterval('promoslider(0)', speed);
        }
    );

});


function promoslider(prev) {

    //Get the current selected item (with selected class), if none was found, get the first item
    var current_image = $('div.PromoCarousel ul li.selected').length ? $('div.PromoCarousel ul li.selected') : $('div.PromoCarousel ul li:first');

    //if prev is set to 1 (previous item)  
    if (prev) {

        //Get previous sibling
        var next_image = (current_image.prev().length) ? current_image.prev() : $('div.PromoCarousel ul li:last');

        //if prev is set to 0 (next item)  
    } else {

        //Get next sibling
        var next_image = (current_image.next().length) ? current_image.next() : $('div.PromoCarousel ul li:first');
    }

    //clear the selected class
    $('div.PromoCarousel ul li').removeClass('selected');

    //reassign the selected class to current items  
    next_image.addClass('selected');

    //Scroll the items
    $('div.PromoCarousel').scrollTo(next_image, 1200, {axis:'x'});

}