var eventsImageCounter = 0;

function event_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, event_getItemHTML(event_itemList[i],event_itemList[i+6],event_itemList[i+12]));
		
	}
   
    carousel.size(6);

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

var event_itemList = [
    {url: 'events-1.jpg', title: 'Events 1'},
    {url: 'events-2.jpg', title: 'Events 1'},
	{url: 'events-3.jpg', title: 'Events 1'},
    {url: 'events-4.jpg', title: 'Events 1'},
    {url: 'events-5.jpg', title: 'Events 1'},
    {url: 'events-6.jpg', title: 'Events 1'},
	{url: 'events-7.jpg', title: 'Events 1'},
    {url: 'events-8.jpg', title: 'Events 1'},
    {url: 'events-9.jpg', title: 'Events 1'},
    {url: 'events-10.jpg', title: 'Events 1'},
	{url: 'events-11.jpg', title: 'Events 1'},
    {url: 'events-12.jpg', title: 'Events 1'},
    {url: 'events-13.jpg', title: 'Events 1'},
    {url: 'events-14.jpg', title: 'Events 1'},
	{url: 'events-15.jpg', title: 'Events 1'},
    {url: 'events-16.jpg', title: 'Events 1'},
	{url: 'events-17.jpg', title: 'Events 1'},
    {url: 'events-18.jpg', title: 'Events 1'}

];


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