function seleciona_produto(tipo)
{
  $("#01").css("border-color", "#bfbfbf");
  $("#02").css("border-color", "#bfbfbf");
  $("#03").css("border-color", "#bfbfbf");
  $("#04").css("border-color", "#bfbfbf");

  $("#" + tipo).css("border-color", "#ed1c24");
  $('#hdnProduto').val(tipo);
}

var mycarousel_itemList = [
    {url: '01.jpg', produto: '1'},
    {url: '02.jpg', produto: '2'},
    {url: '03.jpg', produto: '3'},
	{url: '04.jpg', produto: '4'},
	{url: '05.jpg', produto: '5'},
	{url: '06.jpg', produto: '6'},
	{url: '07.jpg', produto: '7'},
	{url: '08.jpg', produto: '8'},
	{url: '09.jpg', produto: '9'},
	{url: '10.jpg', produto: '10'},
	{url: '11.jpg', produto: '11'}    
];

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);
    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 '<a href="interna.php"><img src="jcarousel/' + item.url + '" width="127" height="127" class="borda_produtos" id="' + item.produto + '" alt="" /></a>';
};

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