//generates HTML for the actual comparison tables (where the phones and their features are lined up)
function generateComparisonHtml()
{
	var result = "";

	var comparisonTemplate = document.getElementById("comparisonTemplate").innerHTML.replace(/&gt;/g, ">").replace(/&lt;/g, "<");
	var comparisonFeatureCategoryRowTemplate = document.getElementById("comparisonFeatureCategoryRowTemplate").innerHTML.replace(/&gt;/g, ">").replace(/&lt;/g, "<");
	var comparisonFeatureRowTemplate = document.getElementById("comparisonFeatureRowTemplate").innerHTML.replace(/&gt;/g, ">").replace(/&lt;/g, "<");


	var featureListHtml = "";
	var finalHtml = "";

	var product = null;

	//draw feature list
		var featuresForCategory = null;
		for (var i = 0; i < allFeatureCategories.featureCategories.length; i++)
		{
			//the first feature category headline is rendered along with the phone list in the top
			if (i > 0)
			{
				featureListHtml += comparisonFeatureCategoryRowTemplate.replace("#CATEGORYNAME#", allFeatureCategories.featureCategories[i].label);
			}

			//get the features for this category
				featuresForCategory = allFeatures.getFeaturesForCategory(allFeatureCategories.featureCategories[i].ID);

				var featureToRender = null;
				var featureValueForPhone = null;
				var featureHtml = "";
				for (var j = 0; j < featuresForCategory.features.length; j++)
				{
					featureToRender = featuresForCategory.features[j];
					featureHtml = comparisonFeatureRowTemplate;
					featureHtml = featureHtml.replace("#FEATURENAME#", featureToRender.label);

					for (var k = 0; k < comparisonContainers.containers.length; k++)
					{
						product = comparisonContainers.containers[k].currentProduct;
						if (product == null)
						{
							featureHtml = featureHtml.replace("#PHONEVALUE_" + k + "#", "");
						}
						else
						{
							featureValueForPhone = product.getFeatureValueByID(featureToRender.ID);

							if (featureValueForPhone == "false")
							{
								featureValueForPhone = "-";
							}
							else if (featureValueForPhone == "true")
							{
								featureValueForPhone = "Ja";
							}
							featureHtml = featureHtml.replace("#PHONEVALUE_" + k + "#", featureValueForPhone);
						}
					}

					featureListHtml += featureHtml;
				}
		}

		finalHtml = comparisonTemplate;

		//Phone images and names in the top
			for (var i = 0; i < comparisonContainers.containers.length; i++)
			{
				product = comparisonContainers.containers[i].currentProduct;
				if (product == null)
				{
					finalHtml = finalHtml.replace("#PHONEIMAGE_" + i + "#", "<img src=\"/mobileadvisor/images/clear.gif\"/>");
					finalHtml = finalHtml.replace("#PHONENAME_" + i + "#", " ");
					finalHtml = finalHtml.replace("#PHONEPRICE_" + i + "#", " ");
					finalHtml = finalHtml.replace("#PHONEURL_" + i + "#", " ");
				}
				else
				{
					finalHtml = finalHtml.replace("#PHONEIMAGE_" + i + "#", "<img alt='test2' src=\"" + product.imageUrlThumbnail + "\"/>");
					finalHtml = finalHtml.replace("#PHONENAME_" + i + "#", product.name);
					finalHtml = finalHtml.replace("#PHONEPRICE_" + i + "#", "Fra " + product.price + " kr.");
					finalHtml = finalHtml.replace("#PHONEURL_" + i + "#", "<img src=\"/mobileadvisor/images/link_arrow_featlist.gif\"> <a href=\"" + product.shopUrl + "\" style=\"color: #0099FF\";><b>Vis mobil</b></a>");
				}
			}
			finalHtml = finalHtml.replace("#FEATUREROWS#", featureListHtml);
			//First feature category is on same line as the phone names
			finalHtml = finalHtml.replace("#FEATURENAME#", allFeatureCategories.featureCategories[0].label);

	return finalHtml;
}