// File: readRetrofitXML.js

function displayCategory(categoryID, categoryName){
  
  	var retrofitURL = "http://retrofit.me/item_types/items/" + categoryID + "?callback=?";
	
	// Our jQuery JSON function call 
	$.getJSON(retrofitURL, function displayImages(data){ 
		
		// Start putting together the HTML string 
		var htmlString = "<p>&nbsp;</p><p>"; 
		
		// Now start cycling through our array
		$.each(data, function(i,item){ 
		
			// Here's where we piece together the HTML 
			htmlString += '<div class="shopItemImage" style="margin: 0 0px;"><a href="' + item.item_url + '" target="_blank">'; 
			htmlString += '<img style="width:240px" src="' + item.image_url + '" alt="' + item.name + '" title="' + item.name + '"/></a></div>';
			htmlString += '<div class="shopItemPrice" style="margin: 0 0px;">$' + item.price + '</div>';
			htmlString += '<div class="shopItemTitle" style="margin: 0 0px;"><a href="' + item.item_url + '" target="_blank">' + item.name + '</a></div>';
			htmlString += '<div class="shopItemCreatedAt" style="margin: 0 0px;">Added ' + item.created_at + '</div>';
			htmlString += '<div class="shopItemEbay" style="margin: 0 0px;"><a href="' + item.item_url + '" target="_blank">See on Ebay</a></div>';
			htmlString += '<div class="shopItemRetrofit" style="margin: 0 0px;"><a href="http://www.retrofit.me/buyers/0/buyer_items/' + item.id + '" target="_blank">How will it fit?</a></div>';
			htmlString += '<br clear="all">'; 
			
		}); 
		
		// Pop our HTML in the DIV 
		$("#Content" + categoryName).html(htmlString + "</p>"); 
	
		// Hide samples
		$("#Sample" + categoryName).hide();
		
		// Replace show all link with hide link
		$("#Toggle" + categoryName).html('<a href="#" text="Hide Category" onclick="hideCategory(' + categoryID + ',\'' + categoryName + '\');return false;">hide all</a>');
	
	// Close down the JSON function call 
	});
	
}

function hideCategory(categoryID, categoryName){
		
		// Hide content
		$("#Content" + categoryName).hide();
	
		// Show samples again
		$("#Sample" + categoryName).show();
		
		// Replace hide link with show all link
		$("#Toggle" + categoryName).html('<a href="#" text="Show Category" onclick="displayCategory(' + categoryID + ',\'' + categoryName + '\');return false;">show all</a>');
	
}