var mycarousel_itemList = [
    { html: '<a href="/snow/jackor-c-771-1.aspx"><img src="/Ridestore/controls/category/snow/img/GRENADE_ALT.jpg" width="820" height="500" border="0" alt=""></a>' },
    { html: '<a href="/snow/jackor-c-771-1.aspx"><img src="/Ridestore/controls/category/snow/img/OAKLEY_2.jpg" width="820" height="500" border="0" alt=""></a>' },
    { html: '<a href="/snow/jackor-c-771-1.aspx"><img src="/Ridestore/controls/category/snow/img/GRENADE_ALT.jpg" width="820" height="500" border="0" alt=""></a>' },
    { html: '<a href="/snow/jackor-c-771-1.aspx"><img src="/Ridestore/controls/category/snow/img/OAKLEY_2.jpg" width="820" height="500" border="0" alt=""></a>' }
];

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt) {
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, mycarousel_itemList.length);

    jQuery('#stylecontrol-pager a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        carousel.stopAuto();
        return false;
    });

    $("#stylecontrol-pager a").removeClass("selected");
    $("#stylecontrol-pager a:eq(" + (idx - 1) + ")").addClass("selected");

    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
};

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt) {
    carousel.remove(i);
};

/**
* Item html creation helper.
*/
function mycarousel_getItemHTML(item) {
    return item.html;
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        wrap: 'circular',
        itemVisibleInCallback: { onBeforeAnimation: mycarousel_itemVisibleInCallback },
        itemVisibleOutCallback: { onAfterAnimation: mycarousel_itemVisibleOutCallback },
        auto: 6,
        scroll: 1
    });

});