function backsplash_itemLoadCallback(carousel, state)
{
 	// Check if the requested items already exist
 	if (carousel.has(carousel.first, carousel.last)) {
 		return;
 	}

 	jQuery.getJSON(
 		'virtualKitchen.php?type=backsplash', { first: carousel.first, last: carousel.last },
 		function(json) {
 			mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, json, 'backsplash-layer');
 		}
 	);
};

function mycarousel_itemLoadCallback(carousel, state)
{
 	// Check if the requested items already exist
 	if (carousel.has(carousel.first, carousel.last)) {
 		return;
 	}

 	jQuery.getJSON(
 		'virtualKitchen.php', { first: carousel.first, last: carousel.last },
 		function(json) {
 			mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, json, 'granite-layer');
 		}
 	);
};

function flooring_itemLoadCallback(carousel, state)
{
 	// Check if the requested items already exist
 	if (carousel.has(carousel.first, carousel.last)) {
 		return;
 	}

 	jQuery.getJSON(
 		'virtualKitchen.php?type=floor', { first: carousel.first, last: carousel.last },
 		function(json) {
 			mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, json, 'floor-layer');
 		}
 	);
};

function cabinet_itemLoadCallback(carousel, state)
{
 	// Check if the requested items already exist
 	if (carousel.has(carousel.first, carousel.last)) {
 		return;
 	}

 	jQuery.getJSON(
 		'virtualKitchen.php?type=cabinet', { first: carousel.first, last: carousel.last },
 		function(json) {
 			mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, json, 'cabinet-layer');
 		}
 	);
};

function mycarousel_itemAddCallback(carousel, first, last, json, layer)
{
	// Set the size of the carousel
 	carousel.size(json.total);

	$.each(json.items, function(i,item){

		// create link
		$link = $('<a href="javascript://"/>');
		
		// create thumb
		$img = $("<img/>").attr("src", item.thumb).attr("width", 34).attr("height", 34).appendTo($link);
		
		$link.click(function() {
			// update granite layer on virtual kitchen
		  	$("#" + layer).empty();
			$("#" + layer).append($("<img/>").attr("src", item.image).attr("width", 574).attr("height", 398));
		});
		
		$container = $("<div/>").append($link).append($link).append($("<span>" + item.name + "</span>"));
		
		carousel.add(first + i, $container);
	});
};

$(document).ready(function() {
	// initialize carousel
	$('#granite-carousel').jcarousel({
		scroll: 5,
		itemLoadCallback: mycarousel_itemLoadCallback
	});
	
	$('#floor-carousel').jcarousel({
		itemLoadCallback: flooring_itemLoadCallback
	});
	
	$('#cabinet-carousel').jcarousel({
		itemLoadCallback: cabinet_itemLoadCallback
	});
	
	$('#backsplash-carousel').jcarousel({
		itemLoadCallback: backsplash_itemLoadCallback
	});
});