vgquotes/Src/VideoGameQuotes.Web/Views/Quote/DefaultBrowse.aspx

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage" MasterPageFile="~/Views/Shared/Site.Master" %>
<asp:Content runat="server" ID="Title" ContentPlaceHolderID="TitleContent">Browse</asp:Content>
<asp:Content runat="server" ID="Main" ContentPlaceHolderID="MainContent">
	<p>
		Browse by:
	</p>

	<div id="browse-default-menu">
		<ul>
			<li><a href="#" id="browse-game">Game</a></li>
			<li><a href="#" id="browse-system">System</a></li>
			<li><a href="#" id="browse-category">Category</a></li>
			<li><a href="#" id="browse-publisher">Publisher</a></li>
		</ul>
	</div>

	<div id="browse-default-container">
		<p>
			<a href="#" id="show-default-menu">Back</a>
		</p>

		<div id="browse-default-content"></div>
	</div>
</asp:Content>

<asp:Content ContentPlaceHolderID="DeferrableScripts" runat="server">
	<script type="text/javascript">//<![CDATA[
		$(document).ready(function() {
			var $browseMenu = $("#browse-default-menu");
			var $container = $("#browse-default-container");
			var $content = $("#browse-default-content");

			var games = [], systems = [], publishers = [], categories = [];

			var renderData = function(data, cellRenderer, cellsPerRow) {
				var $table = $("<table/>"), $row = $("<tr/>");
				for (var i = 0, len = data.length; i < len; i++) {
					if (i % cellsPerRow === 0) {
						if (i > 0) {
							$table.append($row);
						}

						$row = $("<tr/>");
					}

					$row.append($("<td/>").html(cellRenderer(data[i], i)));
				}

				if (data.length > 0) {
					$table.append($row);
				}

				$content.append($table);
			};

			var gameCellRenderer = function() {
				var $template = $("<a/>");
				return function(game, count) {
					return $template
						.clone()
						.attr("href", "/browse/game/" + game.Id)
						.text(game.Name);
				};
			}();

			var systemCellRenderer = function() {
				var $template = $("<a/>");
				return function(system, count) {
					return $template
						.clone()
						.attr("href", "/browse/system/" + system.Id)
						.attr("title", system.Name)
						.text(system.Abbreviation);
				};
			}();

			$("#show-default-menu").click(function() {
				$content.empty();
				$container.hide();
				$browseMenu.show();
				return false;
			});

			$("#browse-game").click(function() {
				$browseMenu.hide();
				$container.show();
				var cellsPerRow = 8;

				if (games.length === 0) {
					$.ajax("/api/game/all", {
						data: { sort: "alphabetical" },
						success: function(data, status, $xhr) {
							if (data.Error !== null) {
								alert(data.Error);
								return;
							}

							games = data.Data.games;
							renderData(games, gameCellRenderer, cellsPerRow);
						}
					});
				} else {
					renderData(games, gameCellRenderer, cellsPerRow);
				}

				return false;
			});

			$("#browse-system").click(function() {
				$browseMenu.hide();
				$container.show();
				var cellsPerRow = 12;

				if (systems.length === 0) {
					$.ajax("/api/system/all", {
						data: { sort: "alphabetical" },
						success: function(data, status, $xhr) {
							if (data.Error !== null) {
								alert(data.Error);
								return;
							}

							systems = data.Data.systems;
							renderData(systems, systemCellRenderer, cellsPerRow);
						}
					});
				} else {
					renderData(systems, systemCellRenderer, cellsPerRow);
				}

				return false;
			});
		});
	//]]></script>
</asp:Content>