var commercialsImageCounter = 0;

function commercials_initCallback(carousel, state)
{
    // Lock until all items are loaded. That prcommercialss 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, commercials_getItemHTML(commercials_itemList[i],commercials_itemList[i+6],commercials_itemList[i+12]));
		
	}
   
    carousel.size(6);

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

var commercials_itemList = [
    {url: 'photo-0424.jpg', title: 'photo 1'},
    {url: 'photo-2.jpg', title: 'photo 1'},
	{url: 'photo-0425.jpg', title: 'photo 1'},
    {url: 'photo-1289.jpg', title: 'photo 1'},
    {url: 'photo-1298.jpg', title: 'photo 1'},
    {url: 'photo-1300.jpg', title: 'photo 1'},
	{url: 'photo-1810.jpg', title: 'photo 1'},
    {url: 'photo-1831.jpg', title: 'photo 1'},
    {url: 'photo-1832.jpg', title: 'photo 1'},
    {url: 'photo-1833.jpg', title: 'photo 1'},
	{url: 'photo-1834.jpg', title: 'photo 1'},
    {url: 'photo-1842.jpg', title: 'photo 1'},
    {url: 'photo-1843.jpg', title: 'photo 1'},
    {url: 'photo-1843.jpg', title: 'photo 1'},
	{url: 'photo-1844.jpg', title: 'photo 1'},
    {url: 'photo-1845.jpg', title: 'photo 1'},
	{url: 'photo-1846.jpg', title: 'photo 1'},
    {url: 'photo-1848.jpg', title: 'photo 1'}

];


/**
 * Item html creation helper.
 */
function commercials_getItemHTML(item1, item2, item3)
{

	var imageOneOnClick   = "changeCommercialsImage('images/commercials/" + item1.url + "', "+commercialsImageCounter+")"; 
	loadImages("images/commercials/" + item1.url, commercialsImageCounter++, 4 );	

	var imageTwoOnClick   = "changeCommercialsImage('images/commercials/" + item2.url + "', "+commercialsImageCounter+")";
	loadImages("images/commercials/" + item2.url, commercialsImageCounter++, 4 );	

	var imageThreeOnClick = "changeCommercialsImage('images/commercials/" + item3.url + "', "+commercialsImageCounter+")";
	loadImages("images/commercials/" + item3.url, commercialsImageCounter++, 4 );


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