// Set thickbox loading image
tb_pathToImage = "js/jquery/thickbox/loadingAnimation.gif";

var mycarousel_itemList = [{url: "images/showcase/032708A_s.jpg", title: ""},{url: "images/showcase/032708B_s.jpg", title: ""},{url: "images/showcase/032708D_s.jpg", title: ""},{url: "images/showcase/032708F_s.jpg", title: ""},{url: "images/showcase/032708G_s.jpg", title: ""},{url: "images/showcase/032708J_s.jpg", title: ""},{url: "images/showcase/032708N_s.jpg", title: ""},{url: "images/showcase/032708O_s.jpg", title: ""},{url: "images/showcase/032708P_s.jpg", title: ""},{url: "images/showcase/032708R_s.jpg", title: ""},{url: "images/showcase/032808A_s.jpg", title: ""},{url: "images/showcase/032808D_s.jpg", title: ""},{url: "images/showcase/032808F_s.jpg", title: ""},{url: "images/showcase/032808H_s.jpg", title: ""},{url: "images/showcase/032808K_s.jpg", title: ""},{url: "images/showcase/032808L_s.jpg", title: ""},{url: "images/showcase/032808P_s.jpg", title: ""},{url: "images/showcase/032808R_s.jpg", title: ""},{url: "images/showcase/032808U_s.jpg", title: ""},{url: "images/showcase/DSC04090_s.jpg", title: ""},{url: "images/showcase/DSC04091_s.jpg", title: ""},{url: "images/showcase/DSC04100_s.jpg", title: ""},{url: "images/showcase/DSC04101_s.jpg", title: ""},{url: "images/showcase/DSC04111_s.jpg", title: ""},{url: "images/showcase/DSC04112_s.jpg", title: ""},{url: "images/showcase/062008L_s.jpg", title: ""},{url: "images/showcase/DSC04113_s.jpg", title: ""},{url: "images/showcase/062008N_s.jpg", title: ""},{url: "images/showcase/DSC04114_s.jpg", title: ""},{url: "images/showcase/DSC04115_s.jpg", title: ""},{url: "images/showcase/EX081305C_s.jpg", title: ""},{url: "images/showcase/EX081305G_s.jpg", title: ""}];


/**
 * We use the initCallback callback
 * to assign functionality to the controls
 */
function mycarousel_initCallback(carousel) {

    jQuery('#mycarousel-next').bind('click', function() {
        carousel.next();
        return false;
    });

    jQuery('#mycarousel-prev').bind('click', function() {
        carousel.prev();
        return false;
    });
};

function mycarousel_itemLoadCallback(carousel, state)
{
    //for (var i = carousel.first; i <= carousel.last; i++) {
    for (var i = carousel.first; i <= mycarousel_itemList.length; i++) {
        var idx = i;
        
        // Check if we need to reindex
        if((i < 1) || (i > mycarousel_itemList.length)){
            // Calculates the index from a given index who is out of range.
            idx = carousel.index(i, mycarousel_itemList.length);
        }
    
        if (carousel.has(i)) {continue;}

        // Create an object from HTML
        var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[idx-1])).get(0);

        // Apply thickbox
        tb_init(item);
        carousel.add(i, item);
    }
};

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)
{
    var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
    //rel="showcase"
    return '<a href="' + url_m + '" title="' + item.title + '" rel="showcase"><img src="' + item.url + '" width="200" height="150" border="0" alt="' + item.title + '" /></a>';
};

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
	    auto:0,
	    vertical: true,
        scroll: 3,
		animation:3000,
		buttonNextHTML: null,
        buttonPrevHTML: null,
        size: mycarousel_itemList.length,
		wrap: 'circular',
		initCallback: mycarousel_initCallback,
        itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
    });
    
    $('#mycarousel-next').bind('mouseover', function() {$('#mycarousel-next').css('cursor','pointer');});
    $('#mycarousel-prev').bind('mouseover', function() {$('#mycarousel-prev').css('cursor','pointer');});
	$('#mycarousel-next2').bind('mouseover', function() {$('#mycarousel-next2').css('cursor','pointer');});
    $('#mycarousel-prev2').bind('mouseover', function() {$('#mycarousel-prev2').css('cursor','pointer');});
});