document.observe("dom:loaded", function() {
	$("designReloader").hide();

	$("wrapperID").observe("change", function(e) {
		changeDisplay($("designID").value, e.element().value);
	});

	$("designID").observe("change", function(e) {
		changeDisplay(e.element().value, $("wrapperID").value);
	});

	function displayDesignImage(designID) {
		var image = new Element("img", {
			src: "./pictures/catalog/designs/fullSize/f" + designID + ".jpg",
			alt: "Image " + designID
		});
		$("designImageContainer").update(image);
	}

	function changeDisplay(designID, wrapperID) {
		if(wrapperID == "" && designID == "") {
			$("designImageContainer").update("");
			$("finalize").hide();
		} else if(wrapperID == "" || designID == "") {
			$("finalize").hide();
			if(designID != "") { displayDesignImage(designID); }
		} else {
			displayDesignImage(designID);
			$("finalize").show();
			$("finalizeWrapperID").value = wrapperID;
			$("finalizeDesignID").value = designID;
		}
	}
});