//
// This closure sets up a split-pane multiselector, a "switcheroo". It requires
// the MooTools core. Passes JSLint.
//
// @author Tom Ryder <tom@prodev.co.nz>
// @copyright 2009 CMS Command
//

// ES5 strict mode pragma.
"use strict";

// Declare Switcheroo class.
var Switcheroo = new Class({
	
	// Constructor.
	initialize: function (selected) {

		// Declare variables.
		var unselected, selectedLabel, unselectedLabel, clearer, swap, event;

		// Create a new MultiSelect box for the unselected items.
		unselected = new Element("select", {"multiple": true});
		unselected.setProperty("size", selected.getProperty("size"));
		unselected.setStyle("width", selected.getStyle("width"));

		// Float both elements so that they're next to each other.
		selected.setStyle("float", "left");
		unselected.setStyle("float", "left");

		// Create references for each box to the other.
		selected.swap = unselected;
		unselected.swap = selected;

		// Define the swap function that moves options from one pane to the other.
		swap = function () {
			var selected = this.getSelected();
			this.swap.adopt(selected);
			selected.each(function (element) {
				element.setProperty("selected", true);
				element.fireEvent("blur");
			});
			this.swap.selectedIndex = -1;
		};

		// Add events. IE6 is stupid and does the mouseup event wrong. This
		// works better, but still not perfectly.
		event = (Browser.Engine.trident) ? "click" : "mouseup";
		$$([selected, unselected]).addEvent(event, swap);

		// When the form is submitted, select all the appropriate options.
        $(selected.form).addEvent("submit", function () {
            selected.getElements("option").each(function (option) {
                option.setProperty("selected", true);
            });
        });

		// Move all initially unselected items into the unselected pane.
        selected.getElements("option").each(function (option) {
			if (!option.getProperty("selected")) {
				option.inject(unselected);
			}
        });

		// Unselect all the existing options.
		selected.getElements("option").each(function (option) {
			option.setProperty("selected", false);
		});

		// Create labels and clearer boxes.
		clearer = new Element("div", {styles: {"clear": "both"}});
        selectedLabel = new Element("span", {html: "Selected:", 
                                             styles: {"display": "block", 
                                                      "float": "left", 
                                                      "font-style": "italic", 
                                                      "width": selected.getStyle("width")}});
        unselectedLabel = new Element("span", {html: "Unselected:", 
                                               styles: {"display": "block", 
                                                        "float": "left", 
                                                        "font-style": "italic", 
                                                        "width": unselected.getStyle("width")}});

		// Insert the new nodes, and we're done.
		unselectedLabel.injectBefore(selected);
		selectedLabel.injectBefore(selected);
		clearer.injectBefore(selected);
		unselected.injectBefore(selected);
	}
});