vgquotes/Src/VideoGameQuotes.Web/media/js/vgquotes.js

(function($, window, undefined){

	$.fn.center = function() {
		this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
		this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
		return this;
	};

	$.fn.applyModelErrors = function(errorMessage, errorData) {
		var $this = this;
		
		if (errorMessage !== null) {
			$this.find(".error-message").first().text(errorMessage).show();
		}
		
		$.each(errorData, function(inputFieldName, value) {
			var $input = $this.find("input[name='" + inputFieldName + "']");
			if ($input.length > 1) {
				$input = $("#" + inputFieldName);
			}
				
			if ($input.length) {
				$input.addClass("input-validation-error");
				$("<span/>")
					.addClass("field-validation-error")
					.text(value)
					.insertAfter($input);
			}
		});
	};
	
	$.fn.clearModelErrors = function() {
		this
			.find(".field-validation-error")
			.remove()
			.end()
			.find(".input-validation-error")
			.removeClass("input-validation-error")
			.end()
			.find(".error-message")
			.empty()
			.hide();
	};
	
	$.vgquotes = function() {
		var callApi = function(url, type, data, callback) {
			$.ajax(url, {
				type: type,
				data: data,
				success: callback,
				error: callback
			});
		};
		
		var cache = {
			game: { },
			system: { },
			category: { },
			publisher: { }
		};
		
		return {
			refresh: function() { },
			parseDate: function(jsonDate) { return new Date(parseInt(jsonDate.substr(6))); },
			formatDate: function(date) { return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate(); },
			parseAndFormatDate: function(jsonDate) { return $.vgquotes.formatDate($.vgquotes.parseDate(jsonDate)); },
			ajaxErrorHandler: function(xhr) {
				console.dir(xhr);
				alert("An error occurred (" + xhr.statusCode + ")");
			},
			preload: function(images) {
				//MM_preloadImages(lulz)
				$.each(images, function() {
					$('<img/>')[0].src = this;
				});
			},
			loadingGif: "/media/images/loading.gif",
			editIcon: "/media/images/pencil.png",
			getResourceById: function(type, id, callback) {
				id = id.toString();
				// if (typeof(cache[type][id]) !== "undefined") {
					// callback.call(null, cache[type][id]);
					// return;
				// }
				
				callApi("/api/" + type + "/" + id, "GET", null, function(data) {
					if (typeof(data) === "undefined" || typeof(data.Error) === "undefined" || data.Error !== null) {
						callback.call(null, null);
						return;
					}
					
					cache[type][id] = data.Data[type + "s"][0];
					callback.call(null, cache[type][id]);
				});
			}
		};
	}();

	(function(){
		var refreshCookie = "vgquotes.refreshFragment";

		var refresh = function() {
			var url = window.location.href;
			var fragmentPosition = url.lastIndexOf("#");
			if (fragmentPosition >= 0) {
				if (fragmentPosition !== url.length - 1) {
					$.cookie(refreshCookie, url.substring(fragmentPosition + 1)); //store the fragment in a cookie
				}	
				url = url.substring(0, fragmentPosition);
			}

			window.location.href = url;
		};

		var applyFragmentFromCookie = function() {
			var fragment = $.cookie(refreshCookie);
			if (fragment !== null) {
				window.location.href += "#" + fragment;
				$.cookie(refreshCookie, null); //delete cookie
			}
		};

		$(document).ready(applyFragmentFromCookie);
		$.vgquotes.refresh = refresh;
	}());

	var setupSearch = function() {
		var submitSearch = function() {
			var searchQuery = $.trim($("#search-query").val());
			if (searchQuery.length > 0) {
				window.location = "/search/" + searchQuery;
			}

			return false;
		};
		
		$(document).ready(function() {
			$("#search-query").keypress(function(e) {
				if (e.which === 13) {
					submitSearch();
				}
			});

			$("#search-submit").click(submitSearch);
		});
	};

	var setupVoting = function() {
		var voting = false;
		$(".vote-for, .vote-against").live("click", function() {
			if (voting) {
				alert("Please wait for the current vote to process before voting again");
				return false;
			}

			voting = true;
			var $votingLink = $(this);
			var $container = $votingLink.parents(".quote-container");
			var direction = $votingLink.hasClass("vote-for") ? 1 : 0;
			var quoteId = $container.find("input.quote-id").val();
			var $score = $container.find(".quote-score");
			var score = $score.text();
			
			$.ajax("/vote", {
				type: "POST",
				data: { QuoteId: quoteId, Direction: direction },
				beforeSend: function() {
					$score.empty().append($("<img/>").attr({ src: $.vgquotes.loadingGif, title: "submitting your vote" + String.fromCharCode(0x2026) }));
				},
				success: function(data, status, $xhr) {
					if (data.Error !== null) {
						window.alert(data.Error);
						return;
					}

					score = data.Data.score;
					$score.attr("title", "+" + data.Data.upVotes + ", -" + data.Data.downVotes);

					//remove the voting arrow, and add the other one if needed
					$votingLink.remove();
					if (direction === 1) {
						if ($container.find(".vote-against").length === 0) {
							$("<span/>")
								.addClass("vote-against")
								.attr("title", "I hate this quote")
								.text(String.fromCharCode(0x25BC))
								.appendTo($container.find(".vote-container:last"));
						}
					} else {
						if ($container.find(".vote-for").length === 0) {
							$("<span/>")
								.addClass("vote-for")
								.attr("title", "I like this quote")
								.text(String.fromCharCode(0x25B2))
								.appendTo($container.find(".vote-container:first"));
						}
					}
				},

				complete: function() { 
					voting = false;
					var $img = $score.find("img");
					if ($img.length) {
						$img.remove();
					}
					
					$score.text(score);
				}
			});

			return false;
		});
	};

	var setupReportLink = function() {
		$(".quote-report-link").click(function() {
			if ($(".report-dialog").length > 0) {
				return false;
			}
			var $link = $(this);
			var $container = $link.parents(".quote-container");
			var quoteId = $container.find("input.quote-id").val();

			var $row = $("<tr/>");
			var flagTypes = [ [1, "Inaccurate"], [2, "Duplicate"], [3, "Spam"], [4, "Fake"], [0, "Other"] ];
			for (var i = 0; i < flagTypes.length; i++) {
				var html = "<td><input type=\"radio\" name=\"flagType\" value=\"" 
					+ flagTypes[i][0] + "\" id=\"flag-type-" +flagTypes[i][0] + "\"/>"
					+ "<label for=\"flag-type-" + flagTypes[i][0] + "\">" + flagTypes[i][1] + "</label></td>";
				
				$row.append($(html));
			}

			var $dialog = $("<div/>").addClass("dialog report-dialog");

			var $submit = $("<input/>")
				.attr("type", "button")
				.attr("value", "Submit Report")
				.click(function() {
					$.ajax("/report", {
						type: "POST",
						data: { QuoteId: quoteId, Comment: $dialog.find("textarea").val(), FlagType: $dialog.find("input[name='flagType']:checked").val() },
						complete: function() { $dialog.remove(); },
						success: function(data, status, $xhr) {
							if (data.Error !== null) {
								alert(data.Error);
								return;
							}
						}
					});
				});

			var $cancel = $("<input/>")
				.attr("type", "button")
				.attr("value", "Cancel")
				.click(function() { $dialog.remove(); });

			$dialog
				.append($("<p/>").text("Flag as:"))
				.append($("<table/>").append($row))
				.append($("<p/>").text("Comment"))
				.append($("<textarea/>"))
				.append($("<div/>").css("text-align", "center").append($submit).append($cancel));

			//"other" should be checked by default
			$dialog.find("#flag-type-0").attr("checked", "checked");

			$("body").append($dialog);
			$dialog.center();

			return false;
		});
	};

	var setupLogin = function() {
		var showLoginForm = function() {
			var $dialog = $("#login-dialog");
			if ($dialog.length > 0) {
				$dialog.remove();
				return false;
			}

			var $usernameInput = $("<input/>").attr({ type: "text", id: "login-username" });
			var $passwordInput = $("<input/>").attr({ type: "password", id: "login-password" });
			var $submit = $("<input/>").attr("type", "submit").css("display", "none");

			var $form = $("<form/>").attr({ method: "post", action: "/login" }).submit(function() {
				$.ajax("/login", {
					type: "POST",
					data: { username: $usernameInput.val(), password: $passwordInput.val() },
					success: function(data, status, $xhr) {
						if (data.Error !== null) {
							alert(data.Error);
							return;
						}

						$.vgquotes.refresh();
					}
				});

				return false;
			});

			var $dialog = $("<div/>").addClass("dialog").attr("id", "login-dialog");

			$form.append($usernameInput).append($passwordInput).append($submit);
			$dialog.append($form);

			$("body").append($dialog);
			$dialog.center();
			$usernameInput.focus();

			return false;
		};

		$(document).ready(function() {
			$("#login-link").click(showLoginForm);
		});
	};

	var setupQuoteForm = function() {
		var toggleFormAndLink = function(type) {
			return function() {
				$("#create-" + type  + "-form")
					.find("input[type='text']").val("").end()
					.find("input[type='checkbox']").removeAttr("checked").end()
					.find("> .edit-mode").val(0).end()
					.find("> fieldset > legend").text("Create new " + type).end()
					.toggle();
				
				$("#" + type + "-select").toggle();
				return false;
			}
		};
		
		var addNewCheckbox = function($table, name, value, text, cellsPerRow) {
			var $row = $table.find("tr:last");
			if ($row.find("td").length === cellsPerRow) {
				$row = $("<tr/>");
				$table.append($row);
			}

			var $cell = $("<td/>").append($("<input/>").attr({ 
				type: "checkbox", 
				name: name, 
				value: value, 
				id: name + "_" + value, 
				checked: "checked" 
			})).append($("<label/>").attr("for", name + "_" + value).text(text));
			
			$row.append($cell);
			$table.append($row);
		};
		
		$("#create-game-link, #create-game-cancel").click(toggleFormAndLink("game"));
		$("#create-system-link, #create-system-cancel").click(toggleFormAndLink("system"));
		$("#create-publisher-link, #create-publisher-cancel").click(toggleFormAndLink("publisher"));
		
		$("#create-system-submit").click(function() {
			var $container = $("#create-system-form");
			var data = { SystemName: $("#SystemName").val(), SystemAbbreviation: $("#SystemAbbreviation").val(), SystemReleaseDate: $("#SystemReleaseDate").val() };
			var url = "/system/create";
			var systemId = $container.find("> .edit-mode").val();
			
			if (systemId > 0) {
				url = "/system/edit";
				data.SystemId = systemId;
			}
			
			$.ajax(url, {
				type: "POST",
				data: data,
				beforeSend: function() { $container.clearModelErrors(); },
				success: function(data, statux, $xhr) {
					if (data.Error !== null) {
						$container.applyModelErrors(data.Error, data.Data);
						return;
					}
					
					if (systemId <= 0) {
						//add checkbox to table
						addNewCheckbox($("#system-checkbox-table"), "SystemIds", data.Data.Id, data.Data.Abbreviation, 6);
					} else {
						//update checkbox's label with new abbreviation
						$("#system-checkbox-table").find("input[value='" + data.Data.Id +"'] + label").text(data.Data.Abbreviation);
					}
					toggleFormAndLink("system")();
				}
			});
			
			return false;
		});
		
		$("#create-publisher-submit").click(function() {
			var $container = $("#create-publisher-form");
			var data = { PublisherName: $("#PublisherName").val(), PublisherWebsite: $("#PublisherWebsite").val() };
			var url = "/publisher/create";
			var publisherId = $container.find("> .edit-mode").val();
			
			if (publisherId > 0) {
				url = "/publisher/edit";
				data.PublisherId = publisherId;
			}
			
			$.ajax(url, {
				type: "POST",
				data: data,
				beforeSend: function() { $container.clearModelErrors(); },
				success: function(data, statux, $xhr) {
					if (data.Error !== null) {
						$container.applyModelErrors(data.Error, data.Data);
						return;
					}
					
					if (publisherId <= 0) {
						addNewCheckbox($("#publisher-checkbox-table"), "PublisherIds", data.Data.Id, data.Data.Name, 4);
					} else {
						//update publisher name
						$("#publisher-checkbox-table").find("input[value='" + data.Data.Id +"'] + label").text(data.Data.Name);
					}
					
					toggleFormAndLink("publisher")();
				}
			});
			
			return false;
		});
		
		$("#create-game-submit").click(function() {
			var regions = [], publishers = [], systems = [], data = { GameName: $("#GameName").val(), GameWebsite: $("#GameWebsite").val() };
			$("input:checked[name='GameRegions']").each(function(index, input) { if (typeof(data.GameRegions) === "undefined") { data.GameRegions = []; } data.GameRegions.push(input.value); });
			$("input:checked[name='SystemIds']").each(function(index, input) { if (typeof(data.SystemIds) === "undefined") { data.SystemIds = []; } data.SystemIds.push(input.value); });
			$("input:checked[name='PublisherIds']").each(function(index, input) { if (typeof(data.PublisherIds) === "undefined") { data.PublisherIds = []; } data.PublisherIds.push(input.value); });
			var $container = $("#create-game-form");
			
			var url = "/game/create";
			var submittingAnEdit = $("#create-game-form > .edit-mode").val() == 1;
			if (submittingAnEdit) {
				url = "/game/edit";
				data.GameId = $("#GameId").val();
			}
			
			$.ajax(url, {
				type: "POST",
				data: data,
				traditional: true,
				beforeSend: function() { $container.clearModelErrors(); },
				success: function(data, status, $xhr) {
					if (data.Error !== null) {
						$container.applyModelErrors(data.Error, data.Data);
						return;
					}
					
					if (!submittingAnEdit) {
						$("#GameId")
							.append($("<option/>").attr({ value: data.Data.Id}).text(data.Data.Name))
							.val(data.Data.Id);
					} else {
						$("#GameId option[value='" + data.Data.Id + "']").text(data.Data.Name); //make sure the new name is up to date
					}
					
					toggleFormAndLink("game")();
				}
			});
			
			return false;
		});

		$(".dismiss-flag-link").click(function() {
			var $link = $(this);
			var $container = $link.parents(".quote-flag");
			var flagId = $container.find(".quote-flag-id").val();
			var quoteId = $("#quote-id").val();

			$.ajax("/dismiss-flag", {
				type: "POST",
				data: { quoteId: quoteId, flagId : flagId },
				success: function(data, status, $xhr) {
					if (data.Error !== null) {
						alert(data.Error);
						return;
					}

					$container.remove();
				}
			});

			return false;
		});

		$("#create-category-link").click(function() {
			var $table = $("#category-checkbox-table");
			var $row = $table.find("tr:last");
			if ($row.find("#new-category-name").length === 0) {
				var $cell = $("<td/>");
				if ($row.find("td").length === 8) {
					$row = $("<tr/>");
					$table.append($row);
				}

				$row.append($cell);

				var $input = $("<input/>").attr("id", "new-category-name").attr("type", "text").val("Category name");

				$input.bind("keypress", function(e) {
					if (e.which === 13) {
						e.preventDefault(); //make sure the parent form doesn't get submitted

						$input.attr("disabled", "disabled");
						$.ajax("/category/create", {
							data: { Name: $input.val() },
							type: "POST",
							success: function(data, status, $xhr) {
								if (data.Error !== null) {
									alert("An error occurred: " + data.Error);
									return;
								}

								//add category checkbox to table
								var $checkbox = $("<input/>")
									.attr({
										"id": "category_" + data.Data.categoryId,
										"type": "checkbox",
										"name": "CategoryIds",
										"checked": "checked"
									}).val(data.Data.categoryId);

								var $label = $("<label/>")
									.attr("for", $checkbox.attr("id"))
									.text(data.Data.categoryName);

								$input.before($checkbox).before($label);
							},
							error: function($xhr, status, error) {
								alert("An error occurred");
							},

							complete: function() {
								$input.remove();
							}
						});
					}
				});

				$cell.append($input);
				$input.select();
				$(this).text("Cancel new category");
			} else {
				$row.find("td:last").remove();
				$(this).text("Create new category");
			}

			return false;
		});
	
		$("#edit-game-link").click(function() {
			$("#edit-game-link").toggleClass("edit-link loading-link");
			
			var gameId = $("#GameId").val();
			$.vgquotes.getResourceById("game", gameId, function(game) {
				$("#edit-game-link").toggleClass("edit-link loading-link");
				
				if (game === null) {
					alert("Unable to fetch game " + gameId);
					return;
				}
				
				toggleFormAndLink("game")();
				$("#create-game-form > .edit-mode").val(1);
				$("#create-game-form > fieldset > legend").text("Edit Game");
				
				//populate game form with game data
				$("#GameName").val(game.Name);
				$("#GameWebsite").val(game.Website);
				$.each(game.Regions, function() {
					$("input[name='GameRegions'][value='" + this + "']").attr("checked", "checked");
				});
				$.each(game.Systems, function() {
					$("input[name='SystemIds'][value='" + this.Id + "']").attr("checked", "checked");
				});
				$.each(game.Publishers, function() {
					$("input[name='PublisherIds'][value='" + this.Id + "']").attr("checked", "checked");
				});
			});
			
			return false;
		});
		
		$("#delete-game-link").click(function() {
			var $link = $(this);
			$link.toggleClass("delete-link loading-link");
			var gameId = $("#GameId").val();
			
			$.ajax("/game/delete", {
				type: "POST",
				data: { id: gameId },
				success: function(data, status, $xhr) {
					if (data.Error !== null) {
						alert(data.Error);
						return;
					}
					
					//remove game from the dropdown
					$("#GameId option[value='" + gameId + "']").remove();
				},
				complete: function() { $link.toggleClass("delete-link loading-link"); }
			});
			
			return false;
		});
		
		$(".edit-system-link").click(function() {
			var $link = $(this);
			$link.toggleClass("edit-link loading-link");
			
			var systemId = $link.siblings("input[name='SystemIds']").val();
			
			$.vgquotes.getResourceById("system", systemId, function(system) {
				$link.toggleClass("edit-link loading-link");
				
				if (system === null) {
					alert("Unable to fetch system " + systemId);
					return;
				}
				
				toggleFormAndLink("system")();
				$("#create-system-form > .edit-mode").val(systemId);
				$("#create-system-form > fieldset > legend").text("Edit System");
				
				//populate system form with system data
				$("#SystemName").val(system.Name);
				$("#SystemAbbreviation").val(system.Abbreviation);
				$("#SystemReleaseDate").val($.vgquotes.parseAndFormatDate(system.ReleaseDate));
			});
			
			return false;
		});
		
		$(".delete-system-link").click(function() {
			var $link = $(this);
			$link.toggleClass("delete-link loading-link");
			var systemId = $link.siblings("input[name='SystemIds']").val();
			
			$.ajax("/system/delete", {
				type: "POST",
				data: { id: systemId },
				success: function(data, status, $xhr) {
					if (data.Error !== null) {
						alert(data.Error);
						return;
					}
					
					//remove checkbox for that system
					$link.parent().empty();
				},
				complete: function() { $link.toggleClass("delete-link loading-link"); }
			});
			
			return false;
		});
		
		$(".edit-publisher-link").click(function() {
			var $link = $(this);
			$link.toggleClass("edit-link loading-link");
			
			var publisherId = $link.siblings("input[name='PublisherIds']").val();
			
			$.vgquotes.getResourceById("publisher", publisherId, function(publisher) {
				$link.toggleClass("edit-link loading-link");
				
				if (publisher === null) {
					alert("Unable to fetch publisher " + publisherId);
					return;
				}
				
				toggleFormAndLink("publisher")();
				$("#create-publisher-form > .edit-mode").val(publisherId);
				$("#create-publisher-form > fieldset > legend").text("Edit Publisher");
				
				//populate publisher form with publisher data
				$("#PublisherName").val(publisher.Name);
				$("#PublisherWebsite").val(publisher.Website);
			});
			
			return false;
		});
		
		$(".delete-publisher-link").click(function() {
			var $link = $(this);
			$link.toggleClass("delete-link loading-link");
			
			$.ajax("/publisher/delete", {
				type: "POST",
				data: { id: $link.siblings("input[name='PublisherIds']").val() },
				success: function(data, status, $xhr) {
					if (data.Error !== null) {
						alert(data.Error);
						return;
					}
					
					//remove checkbox for that publisher
					$link.parent().empty();
				},
				complete: function() { $link.toggleClass("delete-link loading-link"); }
			});
			
			return false;
		});
	};

	(function(){
		setupLogin();
		setupSearch();
		
		$(document).ready(function() {
			$.vgquotes.preload([$.vgquotes.loadingGif]);
			setupReportLink();
			setupVoting();

			if ($("#edit-quote-form").length > 0) {
				setupQuoteForm();
			}
			
			$("body").ajaxError(function(e, xhr, options, error){
				$.vgquotes.ajaxErrorHandler.call(this, xhr);
			});
		});
	}());
	
}(jQuery, window));