$(function() {

    //$('.bannerImg').css({ position: 'relative' });
    $('#slideshowNav').find('a').each(function(intIndex) {

        // Bind the onclick event to simply alert the
        // iteration index value.
        image = intIndex + 1;
        $(this).css({ backgroundImage: 'url(English/FlashPromotion/Thumbnail/' + image + '/Image.ashx)' });
    });


    var current = 0;
    $('#slideshowNav').find('a[name="#feature' + current + '"]').addClass('featureHover');
    var timed = setTimeout(function() { automate() }, 5000);

    $('#slideshowNav').find('a').click(function() {
        clearTimeout(timed);
        
        number = $(this).attr('name');
        
        $('#slideshow').stop();
        $('#slideshow').scrollTo(number, 300, { axis: 'x' });
        current = $('#slideshowNav').find('a').index(this);

        $('#slideshowNav').find('a').removeClass('featureHover');
        $(this).addClass('featureHover');
        timed = setTimeout(function() { automate() }, 5000);

    });

    function automate() {

        var lis = $('#slideshowNav li').size();

        if (current < lis - 1) {
            current = current + 1;
        } else { current = 0; }
        $('#slideshow').scrollTo('#feature' + current, 300, { axis: 'x' });
        $('#slideshowNav').find('a').removeClass('featureHover');
        $('#slideshowNav').find('a[name="#feature' + current + '"]').addClass('featureHover');

        timed = setTimeout(function() { automate() }, 5000);
    }
});