$(document).ready(function() {
    var pagination_id = 'feature-select',
    page_prefix = 'carousel-page-',
    featured_class = 'feature',
    show_class = 'show',
    hide_class = 'hide',
    active_class = 'selected',
    $panels = $('#features .banner'),
    $pagination_bar = $('#'+pagination_id),
    featured_panel = $panels.filter('.'+featured_class)[0],
    featured_ndx = $.inArray(featured_panel, $panels),
    current_ndx = featured_ndx,
    ms_delay = 15000; //15 seconds is enough to read our current slider's content

    /* hide panels by default */
    $panels
    .not('.' + featured_class)
    .not('.' + show_class)
    .addClass(hide_class);

    /* create the pagination bar */
    var pagination_html = (function() {
        var page_links = [];
        for (var i = 1, l = $panels.length; i <= l; i++){
            page_links.push('<a id="' + page_prefix + i + '" href="" class="feature_nav carousel-page">' + i + '</a>');
        }

        return page_links.join(' | ');
    });
    $pagination_bar.html(pagination_html);

    var $pagination_links = $('#'+pagination_id + ' a'),
    $featured_link = $($pagination_links[featured_ndx]);

    $featured_link.addClass(active_class);
    $pagination_links.click(pagination_onclick);

    /* autoplay */
    var autoplay = setInterval(function() {
        if (current_ndx >= ($panels.length - 1)) {
            showPanel(current_ndx = 0);
        }
        else {
            showPanel(++current_ndx);
        }
    }, ms_delay)
    function pagination_onclick(e) {
        var page = e.target,
        ndx = parseInt(page.id.replace(page_prefix, '')) - 1;
        e.preventDefault();
        clearInterval(autoplay);
        showPanel(ndx);
    }
    function showPanel(index) {
        $panels.hide().eq(index).fadeIn();
        $pagination_links.filter('.' + active_class).removeClass(active_class);
        $pagination_links.eq(index).addClass(active_class);
    }
});