var portraitsImageCounter = 0;

function portraits_initCallback(carousel, state)
{
    // Lock until all items are loaded. That prportraitss 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 < 5; i++){  

	    carousel.add(i + 1, portraits_getItemHTML(portraits_itemList[i],portraits_itemList[i+5],portraits_itemList[i+10]));
		
	}
   
    carousel.size(5);

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

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


/**
 * Item html creation helper.
 */
function portraits_getItemHTML(item1, item2, item3)
{
	var imageOneOnClick   = "changePortraitsImage('images/portraits/" + item1.url + "', "+portraitsImageCounter+")";
	loadImages("images/portraits/" + item1.url, portraitsImageCounter++, 2 );
	
	var imageTwoOnClick   = "changePortraitsImage('images/portraits/" + item2.url + "', "+portraitsImageCounter+")";
	loadImages("images/portraits/" + item2.url, portraitsImageCounter++, 2 );
	
	var imageThreeOnClick = "changePortraitsImage('images/portraits/" + item3.url + "', "+portraitsImageCounter+")";	
	loadImages("images/portraits/" + item3.url, portraitsImageCounter++, 2 );



	
	return '<img onclick="' + imageOneOnClick   + '" src="images/portraits/thumbs/' + item1.url + '" width="80" height="80" alt="' + item1.title + '" />' +
		   '<img onclick="' + imageTwoOnClick   + '" src="images/portraits/thumbs/' + item2.url + '" width="80" height="80" alt="' + item2.title + '" />' + 
		   '<img onclick="' + imageThreeOnClick + '" src="images/portraits/thumbs/' + item3.url + '" width="80" height="80" alt="' + item3.title + '" />';
};