(function() {
	$$("p.fancy-select-replace select").each(function(select) {
		select.fancied = false;
		select.applyFancySelect = function() {
			if (this.fancied) {
				Element.infanticide(this.dropdown.firstChild);
			} else {
				this.box = Builder.node("div", { className: "fancy-select" }, 'Some text')
				this.dropdown = Builder.node("div", { className: "fancy-select-dropdown" },[
				   Builder.node("ul")
				]);
				this.dropdown.hide();
				this.animating = false;
				this.box.observe("click", function(ev) {
					if (this.animating) return;
					this.animating = true;
					$$("p.fancy-select-replace select").each(function(el) {
						if (el.dropdown.visible()) {
							el.animating = true;
							el.dropdown.slideUp({duration: 0.5, afterFinish:function() { el.animating = false }.bind(el)});
						}
					});
					if (this.dropdown.visible())
						this.dropdown.slideUp({duration: 0.2, afterFinish:function() { this.animating = false }.bind(this)});
					else
						this.dropdown.slideDown({duration: 0.2, afterFinish:function() { this.animating = false }.bind(this)});
					this.box.removeClassName("active");
					$(ev).stop();
				}.bind(this));
				this.box.observe("mouseover", function() {
					this.box.addClassName("active");
				}.bind(this));
				this.box.observe("mouseout", function() {
					if (!this.dropdown.visible())
						this.box.removeClassName("active");
				}.bind(this));
				Event.observe(document.body, "click", function() {
					if (this.animating) return;
					if (this.dropdown.visible()) {
						this.animating = true;
						this.dropdown.slideUp({duration: 0.5, afterFinish:function() { this.animating = false }.bind(this)});
					}
					this.box.removeClassName("active");
				}.bind(this));
				this.dropdown.style.position = "absolute";

				this.insert({after:this.dropdown});
				this.insert({after:this.box});
				this.hide();
			}

			this.fancied = true;
			this.box.firstChild.nodeValue = (this.selectedIndex == -1 ? '' : String(this.options[this.selectedIndex].text));
			var ul = this.dropdown.firstChild;
			for (var n = 0; n < this.options.length; n++) {
				var o = this.options[n];
				var li = Builder.node("li", o.text);
				ul.appendChild(li);

				li.index = n;
				li.observe("click", function(o, i) {
					this.box.firstChild.nodeValue = String(o.text);
					this.selectedIndex = i;
					this.removeClassName("active");
				}.bind(this, o, li.index));
				li.observe("mouseover", function() {
					this.addClassName("active");
				}.bind(li));
				li.observe("mouseout", function() {
					this.removeClassName("active");
				}.bind(li));
			}

			/* Needs proper click trigger support http://stackoverflow.com/questions/460644/trigger-an-event-with-prototype
			this.onchange = function() {
				var li = this.dropdown.firstChild.childNodes[this.selectedIndex];
				$(li).click();
			}.bind(this);
			*/

		}.bind(select);
		select.applyFancySelect();
	});

	var applyFancySelectCallback = function(parameters) {
		if (typeof parameters.minprice.applyFancySelect == "function")
			parameters.minprice.applyFancySelect();
		if (typeof parameters.maxprice.applyFancySelect == "function")
			parameters.maxprice.applyFancySelect();
	};

	Plugin.register('select_instruction_type', applyFancySelectCallback);
	Plugin.register('select_instruction_type_radio', applyFancySelectCallback);
}).onLoad();