var ProductsGrid = function(parent, config) {
	var settings = {
		id: "productCategoriesGrid",
		imageDirectory: "images/",
		maxShowProducts: 15,
		noCols: 5
	};
	$.extend(settings, config);
	var masterTemplate = function(data) {
		if (data.length === 0) {
			return "<span>No Products in this category</span>";
		}
		var rows = [];
		var noCols = settings.noCols;
		var rowIndex = 0;
		for (var i=0, len=data.length; i < len; i++) {
			if ((i % noCols) === 0) {
				rowIndex = rows.length;
				rows[rowIndex] = [];
			}
			rows[rowIndex].push(data[i]);
		}
		var html = "<table id='" + settings.id + "' class='productGrid'>";
		html += rowsTemplate(rows);
		html += "</table>";
		return html;
	};
	var rowsTemplate = function(rows) {
		var html = "";
		var noOfCells = 0;
		for (var i=0, len=rows.length; i < len; i++) {
			var cells = rows[i];
			html += "<tr>";
			$.map(cells, function(cell) {
				if (noOfCells >= settings.maxShowProducts) {
					return;
				}
				html += cellTemplate(cell);
				noOfCells++;
			});
			html += "</tr>";
		}
		return html;
	}
	var cellTemplate = function(cell) {
		var html = "";
		html += "<td productid='" + cell.productId + "' valign='top'>";
		html +=   "<center>";
		html +=     "<div class='gridProductContainer roundBox'>";
		html +=       "<div class='gridProductContainer_header'>" + cell.name + "</div>";
		html +=       "<a href='#'>";
		html +=         "<img class='productImage' src='" + settings.imageDirectory + cell.image + "' />";
		html +=       "</a>";
		html +=       "<br/>";
		html +=       "<div class='gridProductContainer_details'>"
		html +=         "Price/Item: <span class='price'>" + cell.pricePerItem + "</span>";
		html +=         "<br/>";
		html +=         "Item/Pack: " + cell.itemPerPack;
		html +=         "<br/>";
		html +=         "Total Pack Price: <span class='total_price'>" + cell.totalPackPrice + "</span>";
		html +=       "</div>";
		html +=       "<div class='gridProductContainer_button'>";
		html +=         "<a href='#' class='button'>View Details</a>";
		html +=       "</div>";
		html +=     "</div>";
		html +=   "</center>";
		html += "</td>";
		return html;
	}
	$(parent).html(masterTemplate(settings.data));
	$("#" + settings.id + " td a").lightBox({ infoTag: "td" });
};