var weddingImageCounter = 0;

function mycarousel_initCallback(carousel, state)
{
    // Lock until all items are loaded. That prevents jCarousel from
    // setup correctly and we have to do that in the ajax callback
    // function with carousel.setup().
    // We're doing that because we don't know the exact height of each
    // items until they are added to the list.
    carousel.lock();

    for(var i = 0; i < 6; i++){  

	    carousel.add(i + 1, mycarousel_getItemHTML(mycarousel_itemList[i],mycarousel_itemList[i+6],mycarousel_itemList[i+12]));
		
	}
   
    carousel.size(6);

    // Unlock and setup.
    carousel.unlock();
    carousel.setup();
};

var mycarousel_itemList = [
    {url: 'photo-1.jpg', title: 'Wedding 1'},
    {url: 'photo-2.jpg', title: 'Wedding 2'},
	{url: 'photo-3.jpg', title: 'Wedding 3'},
    {url: 'photo-4.jpg', title: 'Wedding 4'},
    {url: 'photo-5.jpg', title: 'Wedding 5'},
    {url: 'photo-6.jpg', title: 'Wedding 6'},
	{url: 'photo-7.jpg', title: 'Wedding 7'},
    {url: 'photo-8.jpg', title: 'Wedding 8'},
    {url: 'photo-9.jpg', title: 'Wedding 9'},
    {url: 'photo-10.jpg', title: 'Wedding 10'},
	{url: 'photo-11.jpg', title: 'Wedding 11'},
    {url: 'photo-12.jpg', title: 'Wedding 12'},
	{url: 'photo-13.jpg', title: 'Wedding 13'},
    {url: 'photo-14.jpg', title: 'Wedding 14'},
	{url: 'photo-15.jpg', title: 'Wedding 15'},
    {url: 'photo-16.jpg', title: 'Wedding 16'},
    {url: 'photo-17.jpg', title: 'Wedding 17'},
    {url: 'photo-18.jpg', title: 'Wedding 18'}			
];


/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(item1, item2, item3)
{
	
	var imageOneOnClick   = "changeWeddingImage('images/wedding/" + item1.url + "', "+weddingImageCounter+")";
	loadImages("images/wedding/" + item1.url, weddingImageCounter++ , 1 );
	
	var imageTwoOnClick   = "changeWeddingImage('images/wedding/" + item2.url + "', "+weddingImageCounter+")";
	loadImages("images/wedding/" + item2.url, weddingImageCounter++ , 1);
	
	var imageThreeOnClick = "changeWeddingImage('images/wedding/" + item3.url + "', "+weddingImageCounter+")";
	loadImages("images/wedding/" + item3.url, weddingImageCounter++ , 1);
	
	
	
	return '<img onclick="' + imageOneOnClick   + '" src="images/wedding/thumbs/' + item1.url + '" width="80" height="80" alt="' + item1.title + '" />' +
		   '<img onclick="' + imageTwoOnClick   + '" src="images/wedding/thumbs/' + item2.url + '" width="80" height="80" alt="' + item2.title + '" />' + 
		   '<img onclick="' + imageThreeOnClick + '" src="images/wedding/thumbs/' + item3.url + '" width="80" height="80" alt="' + item3.title + '" />';
};