function imageGalleryAjax(productID, page, totalPages)
{	

	var url = "thumbnailsAJAX.php?productID=" + productID + "&page=" + page + "&totalPages=" + totalPages;

//	alert(url);
	var request = new Request.JSON( {
		url: url,
		method: 'get', 
		onComplete: function (jsonObj) {	
			updateThumbnails(jsonObj);
//			$('productThumbWrap').fade(1);
		},
		onRequest: function (instance)	{
//			$('productThumbWrap').fade(0);
		},		
		onFailure: function (jsonObj) {
//			alert('failed');
		},		
		onException: function (e,e2) {
//			alert('exception');
		},
		onCancel: function() {
//			alert('it was canceled');
		}	
	}).send();	

}

function updateThumbnails(jsonObj)
{
	images = jsonObj.images;
	content = "";

	if(jsonObj.page > 1)
	{
		prevPage = jsonObj.page - 1;
		
		content += "<div id='productThumbRight'>\n";
			content += "<a href='details.php?id=" + jsonObj.productID + "&page=" + prevPage + "' onClick=\"imageGalleryAjax('" + jsonObj.productID + "', '$nextPage','$totalPages'); return false;\" <\n";
					content += "&lt; \n";
			content += "</a>\n";
		content += "</div>\n";						
	}

	if(jsonObj.page< (jsonObj.totalPages-1) )
	{
		nextPage = jsonObj.page + 2;
			
		content += "<div id='productThumbRight'>\n";
			content += "<a href='details.php?id=" + jsonObj.productID + "&page=" + nextPage + "' onClick=\"imageGalleryAjax('" + jsonObj.productID + "', '$nextPage','$totalPages'); return false;\" <\n";
					content += "&gt; \n";
			content += "</a>\n";
		content += "</div>\n";								

	}

	
	images.each(function(image) {
						   
		content+= getThumbnail(image);						   		
		
	});		

	
	document.getElementById('productThumbWrap').innerHTML = content;
}

function getThumbnail(image)
{
	content = "<div class=\"prodThumb\">\n";
content = "<table><tr><td>";
			content += "\t<a href=\"details.php?id=" + image['productID'] + "&imageID=" + image['ID'] + "&page=" + image['page'] + "\"" + 
					" onClick=\"ShowMainImage('" + image['filename'] + "','" + image['name'] + "'); return false;\"	>\n";
					
			content += "\t\t<img src=\"product_images/tiny/" + image['filename'] + "\" alt=\"" + image['name'] + "\" border=\"0\" width='45' height='45' />\n";
		content += "</a>\n";
		
		content = "</td></tr></table>";
	content += "</div>\n";
	
	return content;
}



function ShowMainImage(filename,name)
{
//	alert($('mainImage'));
	

/*
	$('mainImage').fade(0);	
	$('credits').fade(0);
*/

	$('mainImage').src = 'product_images/' + filename;
	$('credits').innerHTML = name;

/*
	$('mainImage').fade(1);
	$('credits').fade(1);
*/	

}