var popup;
var cover;
function addPopup() {

	var body = document.getElementsByTagName("body")[0];

	cover = document.createElement("div");
	cover.id = "basket-cover";
	cover.style.height = body.offsetHeight + "px";
	Element.extend(cover);

	popup = document.createElement("div");
	popup.id = "basket-popup";
	popup.innerHTML = "<p>Adding your item...</p>";
	Element.extend(popup);

	hidePopup();

	body.appendChild(cover);
	body.appendChild(popup);

}
Event.observe(window, "load", addPopup);

function hidePopup() {
	popup.hide();
	cover.hide();
	setTimeout(function() {
		popup.innerHTML = "<p>Adding your item...</p>";
	}, 1000);
}

function showPopup() {
	window.scrollTo(0, 0);
	popup.show();
	cover.show();
}

function handleSubmission(e) {

	showPopup();

	var form = Event.element(e);

	var qtyFields = form.getInputs("text", "data[qty]");
	var qty = parseInt($F(qtyFields[0]));
	var maxFields = form.getInputs("hidden", "data[max]");
	var max = parseInt($F(maxFields[0]));

	var msg = "Sorry, there is a limit of " + max + " per order for this item";

	if (max > 0 && qty > max) {

		alert(msg);
		hidePopup();

	} else {

		Event.element(e).request({
			onComplete: function(response) {

				if (response.responseText == "ERR_TOO_MANY") {

					alert(msg);
					hidePopup();

				} else {

					popup.innerHTML = "<p>Item added</p>";
					popup.innerHTML += "<p><a href='" + basketUrl + "'>View basket</a> | <a href='javascript:hidePopup()'>Continue shopping</a></p>";
	
					$("basket").innerHTML = response.responseText;
	
				}

			}
		});

	}

	Event.stop(e);

}
var basketforms = $$(".addtobasketform");
for (var i = 0, m = basketforms.length; i < m; i++) {
	Event.observe(basketforms[i], "submit", handleSubmission);
}