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;
	};

	$.vgquotes = {
		refresh: function() { }
	};

	(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;
	}());

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

				return false;
			};

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

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

		var getQuoteId = function($container) {
			return $container.find("input.quote-id").val();
		};

		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 = getQuoteId($container);
			$.ajax("/vote", {
				type: "POST",
				data: {
					QuoteId: quoteId,
					Direction: direction
				},

				success: function(data, status, $xhr) {
					if (data.Error !== null) {
						alert(data.Error);
						return;
					}

					$container
						.find(".quote-score")
						.attr("title", "+" + data.Data.upVotes + ", -" + data.Data.downVotes)
						.text(data.Data.netVotes);

					//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; }
			});

			return false;
		});

		//report link
		$(".quote-report-link").click(function() {
			if ($(".report-dialog").length > 0) {
				return false;
			}
			var $link = $(this);
			var $container = $link.parents(".quote-container");
			var quoteId = getQuoteId($container);

			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;
		});

		//login stuff
		(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;
			};

			$("#login-link").click(showLoginForm);
		}());
	});
}(jQuery, window));