impress/app/assets/javascripts/pets/bulk.js

var DEBUG = document.location.search.substr(0, 6) == "?debug";

function petThumbnailUrl(pet_name) {
	// if first character is "@", use the hash url
	if (pet_name[0] == "@") {
		return "https://pets.neopets.com/cp/" + pet_name.substr(1) + "/1/1.png";
	}

	return "https://pets.neopets.com/cpn/" + pet_name + "/1/1.png";
}

/* Needed items form */
(function () {
	var UI = {};
	UI.form = $("#needed-items-form");
	UI.alert = $("#needed-items-alert");
	UI.pet_name_field = $("#needed-items-pet-name-field");
	UI.pet_thumbnail = $("#needed-items-pet-thumbnail");
	UI.pet_header = $("#needed-items-pet-header");
	UI.reload = $("#needed-items-reload");
	UI.pet_items = $("#needed-items-pet-items");
	UI.item_template = $("#item-template");

	var current_request = { abort: function () {} };
	function sendRequest(options) {
		current_request = $.ajax(options);
	}

	function cancelRequest() {
		if (DEBUG) console.log("Canceling request", current_request);
		current_request.abort();
	}

	/* Pet */

	var last_successful_pet_name = null;

	function loadPet(pet_name) {
		// If there is a request in progress, kill it. Our new pet request takes
		// priority, and, if I submit a name while the previous name is loading, I
		// don't want to process both responses.
		cancelRequest();

		sendRequest({
			url: UI.form.attr("action") + ".json",
			dataType: "json",
			data: { name: pet_name },
			error: petError,
			success: function (data) {
				petSuccess(data, pet_name);
			},
			complete: petComplete,
		});

		UI.form.removeClass("failed").addClass("loading-pet");
	}

	function petComplete() {
		UI.form.removeClass("loading-pet");
	}

	function petError(xhr) {
		UI.alert.text(xhr.responseText);
		UI.form.addClass("failed");
	}

	function petSuccess(data, pet_name) {
		last_successful_pet_name = pet_name;
		UI.pet_thumbnail.attr("src", petThumbnailUrl(pet_name));
		UI.pet_header.empty();
		$("#needed-items-pet-header-template")
			.tmpl({ pet_name: pet_name })
			.appendTo(UI.pet_header);
		loadItems(data.query);
	}

	/* Items */

	function loadItems(query) {
		UI.form.addClass("loading-items");
		sendRequest({
			url: "/items/needed.json",
			dataType: "json",
			data: query,
			success: itemsSuccess,
		});
	}

	function itemsSuccess(items) {
		if (DEBUG) {
			// The dev server is missing lots of data, so sends me 2000+ needed
			// items. We don't need that many for styling, so limit it to 100 to make
			// my browser happier.
			items = items.slice(0, 100);
		}

		UI.pet_items.empty();
		UI.item_template.tmpl(items).appendTo(UI.pet_items);

		UI.form.removeClass("loading-items").addClass("loaded");
	}

	UI.form.submit(function (e) {
		e.preventDefault();
		loadPet(UI.pet_name_field.val());
	});

	UI.reload.click(function (e) {
		e.preventDefault();
		loadPet(last_successful_pet_name);
	});
})();

/* Bulk pets form */
(function () {
	var form = $("#bulk-pets-form"),
		queue_el = form.find("ul"),
		names_el = form.find("textarea"),
		add_el = $("#bulk-pets-form-add"),
		clear_el = $("#bulk-pets-form-clear"),
		bulk_load_queue;

	$(document.body).addClass("js");

	bulk_load_queue = new (function BulkLoadQueue() {
		var RECENTLY_SENT_INTERVAL_IN_SECONDS = 30;
		var RECENTLY_SENT_MAX = 3;
		var pets = [],
			url = form.attr("action") + ".json",
			recently_sent_count = 0,
			loading = false;

		function Pet(name) {
			var el = $("#bulk-pets-submission-template")
				.tmpl({ pet_name: name, pet_thumbnail: petThumbnailUrl(name) })
				.appendTo(queue_el);

			this.load = function () {
				el.removeClass("waiting").addClass("loading");
				var response_el = el.find("span.response");
				pets.shift();
				loading = true;
				$.ajax({
					complete: function (data) {
						loading = false;
						loadNextIfReady();
					},
					data: { name: name },
					dataType: "json",
					error: function (xhr) {
						el.removeClass("loading").addClass("failed");
						response_el.text(xhr.responseText);
					},
					success: function (data) {
						var points = data.points;
						el.removeClass("loading").addClass("loaded");
						$("#bulk-pets-submission-success-template")
							.tmpl({ points: points })
							.appendTo(response_el);
					},
					type: "post",
					url: url,
				});

				recently_sent_count++;
				setTimeout(function () {
					recently_sent_count--;
					loadNextIfReady();
				}, RECENTLY_SENT_INTERVAL_IN_SECONDS * 1000);
			};
		}

		this.add = function (name) {
			name = name.replace(/^\s+|\s+$/g, "");
			if (name.length) {
				var pet = new Pet(name);
				pets.push(pet);
				if (pets.length == 1) loadNextIfReady();
			}
		};

		function loadNextIfReady() {
			if (!loading && recently_sent_count < RECENTLY_SENT_MAX && pets.length) {
				pets[0].load();
			}
		}
	})();

	names_el.keyup(function () {
		var names = this.value.split("\n"),
			x = names.length - 1,
			i,
			name;
		for (i = 0; i < x; i++) {
			bulk_load_queue.add(names[i]);
		}
		this.value = x >= 0 ? names[x] : "";
	});

	add_el.click(function () {
		bulk_load_queue.add(names_el.val());
		names_el.val("");
	});

	clear_el.click(function () {
		queue_el.children("li.loaded, li.failed").remove();
	});
})();