$(document).ready(function() {
	$.getJSON("json_data.js", function(data) {
		$("ul#company_list li").each(function (index, elem) {
			var divTemplate = '<div class="company_info"></div>';

			$(elem).append(divTemplate);
			var companyDivs = $(elem).find("div.company_info");
			
			var jsonData = data;
			
			companyDivs.each(function(index, elem) {
			
				var appTemplate = '<div><img class="app_icon" />';
				appTemplate += '<a class="app_name" target="_blank"></a>';
				appTemplate += '<p class="app_description"></p></div>';
				
				var companyEntry = $(this).parent("li");
				var jsonDataKey = companyEntry.attr("id");

				if (jsonDataKey)
				{
					var companyData = jsonData[jsonDataKey];

					if (companyData)
					{
					
						// Remove the existing contents of the li item, we'll replace it all with dynamic markup
						// from the JSON data
						companyEntry.children("a").remove();
						companyEntry.children("p").remove();
						
						// Make the extra app info visible by default 
						// Set them to visible by default ... the jerkiness of hiding showing isn't great 
						$(elem).css('display', 'block');
						
						
						var mainListingMarkup = '<a href="' + companyData.webStoreURL + '">' + companyData.companyName + '</a>';
						mainListingMarkup += '<p>' + companyData.shortDescription + '</p>';
						companyEntry.prepend(mainListingMarkup);
						
						$.each(companyData.apps, function(idx, app) {
							$(elem).append(appTemplate);
							var newAppTemplate = $(elem).find("div:last");

							newAppTemplate.find("a.app_name").attr("href", app.appPageURL).text(app.appName);
							newAppTemplate.find("p.app_description").text(app.shortDescription);
							newAppTemplate.find("img.app_icon").attr("src", app.appIcon);
						});
					}
				}
			});
			
			/*
			// only show flyovers if there's company info to show
			if ($(elem).find("div.company_info > div").length > 0)
			{
				$(elem).bind("mouseenter", function(event) {
					$(this).find("div.company_info").slideDown("fast");

				});

				$(elem).bind("mouseleave", function(event) {
					$(this).find("div.company_info").slideUp("fast");
				});
			}
			*/
		});
	});
});