/*

	Lost Boys 2006.
	
	De inhoud van dit bestand is in opdracht vervaardigd en eigendom van onze opdrachtgever.
	Niet hergebruiken zonder toestemming.
	Neem voor vragen contact op met Lost Boys, www.lostboys.nl.

	The contents of this file have been produced for and are the property of our client.
	Do not reuse without permission.
	Any questions? Please contact Lost Boys, www.lostboys.nl.

 */
EventListener.addEvent(window, 'load', function() {
	new DesignControls()
});

function DesignControls() {
	$('#gwtapp input, .gwtapp input').addClass('noreplace');
	var inputs = document.getElementsByTagName("input");
	var groupNames = "";
	for ( var i = 0; i < inputs.length; i++) {
		if (ClassName.contains(inputs[i], "(noreplace)|(replaced)"))
			continue;
		switch (inputs[i].type) {
		case "checkbox":
			new DesignCheckBox(inputs[i]);
			break;
		case "radio":
			if (groupNames.indexOf("*" + inputs[i].name + "*") == -1) {
				new DesignRadioGroup(document.getElementsByName(inputs[i].name));
				groupNames = groupNames + "*" + inputs[i].name + "*";
			}
			break;
		case "submit":
			new DesignSubmit(inputs[i]);
			break;
		}
	}
	var selects = document.getElementsByTagName("select");
	for ( var i = 0; i < selects.length; i++) {
		if (!selects[i].multiple
				&& !ClassName.contains(selects[i], "(noreplace)|(replaced)")) {
			new DesignSelect(selects[i]);
		}
	}
}
/*** DESIGNCONTROL **************************************************************************************************/
function DesignControl() {
	var sRE = /safari/i;
	this.safari = sRE.test(navigator.userAgent);
}

DesignControl.prototype.transform = function(inputElement) {
	var designElement = this.create(inputElement);
	if (!inputElement.disabled) {
		/* Reflect original input changes (made by keyboard) back to the design control */
		EventListener.addEvent(inputElement, "focus", this.focus, this);
		EventListener.addEvent(inputElement, "blur", this.blur, this);

		if (inputElement.tagName == "SELECT") {
			EventListener.addEvent(inputElement, "keyup", this.updateGUI, this);
		}
		if (document.all
				&& (inputElement.type == "radio" || inputElement.type == "checkbox")) {
			EventListener.addEvent(inputElement, "click", this.updateGUI, this);
		} else {
			EventListener
					.addEvent(inputElement, "change", this.updateGUI, this);
		}
	} else {
		ClassName.add(designElement, "disabled");
		if (inputElement.checked) {
			if (inputElement.type == "radio")
				ClassName.add(designElement, "DCradiodisabledchecked");
			if (inputElement.type == "checkbox")
				ClassName.add(designElement, "DCcheckboxdisabledchecked");
		} else {
			if (inputElement.type == "radio")
				ClassName.add(designElement, "DCradiodisabled");
			if (inputElement.type == "checkbox")
				ClassName.add(designElement, "DCcheckboxdisabled");
		}
	}

	if (inputElement.className != "")
		ClassName.add(designElement, inputElement.className);
	ClassName.add(designElement, "DCblur");

	inputElement.DC = this;
	inputElement.parentNode.insertBefore(designElement, inputElement);

	ClassName.add(inputElement, "replaced");
	if (this.safari) {
		ClassName.add(inputElement, "safari");
	}

	return designElement;
}
DesignControl.prototype.focus = function() {
	ClassName.swap(this.GUI, "DCblur", "DCfocus");
}
DesignControl.prototype.blur = function() {
	ClassName.swap(this.GUI, "DCfocus", "DCblur");
}
DesignControl.prototype.setDisabledState = function(input, gui) {
	if (!input || !gui)
		return;
	this.disabled = input.disabled;
	if (this.disabled) {
		ClassName.add(gui, "disabled");
		switch (input.type) {
		case 'radio':
			ClassName.add(gui, input.checked ? "DCradiodisabledchecked"
					: "DCradiodisabled");
			break;
		case 'checkbox':
			ClassName.add(gui, input.checked ? "DCcheckboxdisabledchecked"
					: "DCcheckboxdisabled");
			break;
		}
	} else {
		ClassName.remove(gui, "disabled");
		gui.className = gui.className.replace(
				/(^|\s)DC(checkbox|radio)disabled(checked)?(\s|$)/, ' '); // 4 in
		// 1
	}
	this.updateGUI();
}
DesignControl.prototype.method = function(method) {
	var context = this;
	return function() {
		return method.apply(context, arguments);
	}
}
DesignControl.prototype.forwardClick = function(input) {
	if (document.all) {
		var fake = document.createEventObject();
		if (!(/radio/i.test(this.input.type) && this.input.checked)) // prevent
			// click
			// on
			// checked
			// radio
			// from
			// unchecking
			// it
			this.input.checked = !this.input.checked;
		input.fireEvent("onclick", fake);
	} else {
		var fake = document.createEvent('MouseEvents');
		fake.initEvent("click", true, true);
		this.input.dispatchEvent(fake);
	}
}

DesignControl.prototype.updateGUI = function() {
	// dummy: override in specific classes
}

DesignControl.prototype.reset = function() {
	EventListener.removeEvents(this.input, "focus");
	EventListener.removeEvents(this.input, "blur");
	EventListener.removeEvents(this.input, "click");
	EventListener.removeEvents(this.input.DC.GUI, "click");
	EventListener.addEvent(this.input, "focus", this.input.DC.focus,
			this.input.DC);
	EventListener.addEvent(this.input, "blur", this.input.DC.blur,
			this.input.DC);
	EventListener.addEvent(this.input, "click", this.input.DC.updateGUI,
			this.input.DC);
	EventListener.addEvent(this.input.DC.GUI, "click", this.input.DC.onclick,
			this.input.DC);
	this.updateGUI();
}
/********************************************************************************************************************/
/**
 * * DESIGNCHECKBOX
 * ************************************************************************************************
 */
DesignCheckBox.prototype = new DesignControl;
DesignCheckBox.prototype.constructor = DesignCheckBox;
DesignCheckBox.superclass = DesignControl.prototype;

function DesignCheckBox() {
	if (arguments.length > 0)
		this._constructor.apply(this, arguments);
}
DesignCheckBox.prototype._constructor = function(inputElement) {
	this.input = inputElement;
	this.GUI = this.transform(inputElement);

	if (inputElement.parentNode.tagName.toUpperCase() != "LABEL"
			|| document.all || this.safari) {
		//Firefox is covered by the clicks on the label, no need for an extra handler
		if (!inputElement.disabled)
			EventListener.addEvent(this.GUI, "click", this.onclick, this);
	}
}
DesignCheckBox.prototype.onclick = function(e) {
	this.input.focus();
	this.forwardClick(this.input);// Emulate click on original input to
	// support other scripts
	this.updateGUI();
}
DesignCheckBox.prototype.updateGUI = function() {
	ClassName.remove(this.GUI, "DCcheckboxdisabledchecked");
	ClassName.remove(this.GUI, "DCcheckboxchecked");
	ClassName.remove(this.GUI, "DCcheckboxdisabled");
	if (this.input.checked) {
		if (this.input.disabled) {
			ClassName.add(this.GUI, "DCcheckboxdisabledchecked");
		} else {
			ClassName.add(this.GUI, "DCcheckboxchecked");
		}
	} else {
		if (this.input.disabled) {
			ClassName.add(this.GUI, "DCcheckboxdisabled");
		}
	}
}
DesignCheckBox.prototype.create = function(inputElement) {
	/*
	 <span class="DCcheckbox [checked]"></span>
	 */
	var GUI = document.createElement("span");
	GUI.className = "DCcheckbox";
	if (this.input.checked)
		ClassName.add(GUI, "DCcheckboxchecked");
	return (GUI);
}
/********************************************************************************************************************/
/**
 * * DESIGNRADIOGROUP
 * **********************************************************************************************
 */
function DesignRadioGroup(inputElements) {
	this.designRadios = new Array();
	for ( var i = 0; i < inputElements.length; i++) {
		if (inputElements[i].type == "radio")
			this.designRadios[this.designRadios.length] = new DesignRadio(
					inputElements[i], this, i);
	}
}
DesignRadioGroup.prototype.updateGUI = function() {
	for ( var i = 0; i < this.designRadios.length; i++) {
		if (this.designRadios[i].input.checked) {
			ClassName.add(this.designRadios[i].GUI, "DCradiochecked");
		} else {
			ClassName.remove(this.designRadios[i].GUI, "DCradiochecked");
		}
	}
}

DesignRadio.prototype = new DesignControl;
DesignRadio.prototype.constructor = DesignRadio;
DesignRadio.superclass = DesignControl.prototype;

function DesignRadio() {
	if (arguments.length > 0)
		this._constructor.apply(this, arguments);
}
DesignRadio.prototype._constructor = function(inputElement, group, index) {
	this.input = inputElement;
	this.group = group;
	this.index = index;
	this.GUI = this.transform(inputElement);
	if (inputElement.parentNode.tagName.toUpperCase() != "LABEL"
			|| document.all || this.safari) {
		//Firefox is covered by the clicks on the label, no need for an extra handler
		if (!inputElement.disabled)
			EventListener.addEvent(this.GUI, "click", this.onclick, this);
	}
}
DesignRadio.prototype.onclick = function(e) {
	this.input.focus();
	this.forwardClick(this.input);// Emulate click on original input to
	// support other scripts
	this.updateGUI();
}
DesignRadio.prototype.updateGUI = function() {
	this.group.updateGUI();
}
DesignRadio.prototype.create = function(inputElement) {
	/*
	 <span class="DCradio [checked]"></span>
	 */
	var GUI = document.createElement("span");
	GUI.className = "DCradio";
	if (this.input.checked)
		ClassName.add(GUI, "DCradiochecked");
	return (GUI);
}
/********************************************************************************************************************/
/**
 * * DESIGNSELECT
 * **************************************************************************************************
 */
/*
 * Design choices:
 * 
 * Firefox has a bug where it isn't possible to suppress the default behaviour
 * on cursor up/down. This makes it impossible to use the old strategy of
 * focussing the (hidden) select and rely on it to change the selection because
 * it has to skip filtered options.
 * 
 * Instead, in all cases, a textfield is added, which takes the place in the
 * tabsequence of the select. There it is possible to catch those keys and imply
 * the up/down functionality ourselves.
 * 
 * In order to be in the tabsequence, the text input has to be visible. So
 * display:none or visibility:hidden cannot be used. Instead, the text-input is
 * hidden by moving it very far to the left.
 */
function DesignSelect() {
}

DesignSelect.prototype = new DesignControl;
DesignSelect.prototype.constructor = DesignSelect;
DesignSelect.superclass = DesignControl.prototype;

function DesignSelect() {
	if (arguments.length > 0)
		this._constructor.apply(this, arguments);
}

DesignSelect.prototype._constructor = function(inputElement) {
	this.input = inputElement;
	this.GUI = this.transform(inputElement);
	if (!inputElement.disabled) {
		if (this.onclick)
			EventListener.addEvent(this.GUI, "click", this.onclick, this);
	}
}

DesignSelect.prototype.log = function(text) {
//	if (console)	 console.log(text);
	// enable the previous line for debugging
}

// common part of makeActiveOpen and makeActiveClosed
DesignSelect.prototype.makeActive = function() {
	this.log("makeActive");
	var that = this;
	this.createTextInput();
	this.inputElement.tabIndex = -1;
	this.inputElement.onkeypress = function(e) {
		if (e.keyCode == 27) // escape
			that.makeActiveClosed()
		that.updateGUI();
	}
}

DesignSelect.prototype.makeActiveClosed = function() {
	this.log("makeActiveClosed");
	this.makeActive();
	var that = this;
	this.GUI.onclick = function() {
		that.makeActiveOpen();
	}
	this.setOptionsVisible(false);
	this.textInput.style.left = "";
	this.GUI.style.zIndex = 0;
}

DesignSelect.prototype.makeActiveOpen = function() {
	this.log("makeActiveOpen");
	this.makeActive();
	var that = this;
	this.GUI.onclick = null;
	this.setOptionsVisible(true);
	if (this.isSearch) {
		this.textInput.style.left = "0px";
		this.log(this.textInput.style.left);
		this.log(this.textInput.style.zIndex);
	}
	this.textInput.focus();
	this.GUI.style.zIndex = 1000;
}

// Open the select when it contains the focus. This means that the focus is either on the textInput or the scrollable option list.
DesignSelect.prototype.updateFocusDelayed = function() {
	this.log("updateFocusDelayed");
	if (this.textInputFocused || this.optionsFocused) {
		if (!this.isOptionsVisible())
			this.makeActiveOpen();
	} else {
		if (this.isOptionsVisible())
			this.makeActiveClosed();
	}
}

// When the focus changes, the select may have to be opened or closed. Use a short delay to make sure all events are in.
DesignSelect.prototype.updateFocus = function() {
	var that = this;
	window.setTimeout( function() {
		that.updateFocusDelayed();
	}, 200);
}

// If no textInput is available yet, create one.
DesignSelect.prototype.createTextInput = function() {
	this.log("createTextInput");
	this.log(this.textInput);
	if (!this.textInput) {
		var that = this;
		this.textInput = document.createElement("input");
		this.log("created textInput");
		this.textInput.type = "text";
		this.textInput.className = "choiceSearchStatus";
		this.textInput.value = this.pattern;
		this.textInput.ds = this; // reference back to DesignSelect instance
		// cursor up/down, escape events
		this.textInput.onkeydown = function(e) {
			if (!e)
				e = window.event;
			that.log("DOWN key: " + e.keyCode + "  | char: " + e.charCode);
			// forward escape, cursor up and cursor down
			if (e.keyCode == 13) {
				// avoid enter to submit
				that.textInput.blur();
				return EventListener.cancelEvent(e);
			}
			if (e.keyCode == 27)
				that.makeActiveClosed(); // escape -> close
			if (e.keyCode == 38)
				that.selectOffset(-1, e); // up -> select previous
			if (e.keyCode == 40)
				that.selectOffset(1, e); // down -> select next
		}
		this.textInput.onkeyup = function(e) {
			if (!e)
				e = window.event;
			that.log("UP key: " + e.keyCode + "  | char: " + e.charCode);
			that.pattern = that.isSearch ? that.textInput.value : "";
			if (e.keyCode != 27 && e.keyCode != 38 && e.keyCode != 40) {
				that.updateOptions(); // pattern might have changed
			}
		}
		this.textInput.onfocus = function() {
			that.log("focus textInput");
			that.textInputFocused = true;
			that.updateFocus();
		}
		this.textInput.onblur = function() {
			that.log("blur textInput");
			that.textInputFocused = false;
			that.updateFocus();
		}
		this.GUI.appendChild(this.textInput);
	}
	// IE needs a reminder that we actually want to see the textInput...
	this.textInput.style.display = "none";
	this.textInput.style.display = "block";
	this.textInput.style.display = "inline";
	this.log("this.textInput.style");
	this.log(this.textInput.style.left);
	this.log(this.textInput.style.zIndex);
	this.log(this.textInput.style.display);
}

// remove textInput and clean up event handlers to avoid memory leaks
// DesignSelect.prototype.removeTextInput = function() {
// if (this.textInput && this.textInput.parentNode) {
// this.textInput.parentNode.removeChild(this.textInput);
// this.textInput.onkeypress = null;
// this.textInput.onkeyup = null;
// this.textInput.onblur = null;
// }
// this.textInput = null;
// }

// DesignSelect.prototype.restoreSelectTabindex = function() {
// this.inputElement.tabIndex = this.originalTabIndex;
// }

DesignSelect.prototype.isOptionsVisible = function() {
	return this.options.style.display == "block";
}

DesignSelect.prototype.setOptionsVisible = function(b) {
	this.log("visible: " + b);
	var css = this.options.style;
	css.display = b ? "block" : "none";
	css.marginTop = this.status.parentNode.offsetHeight + 'px';
	this.GUI.style.left = b ? "0pt" : "";
	if (b) {
		this.setDimensions();
		if (!this.safari) {
			var win = (window.innerHeight || document.documentElement.clientHeight)
					+ (window.pageYOffset || document.documentElement.scrollTop);
			var top = Utils.calculateTop(this.options);
			var h = this.options.offsetHeight;
			var css = this.options.style;

			if (win - top - h < 0) {
				css.marginTop = -(h + 1) + 'px';
			} else {
				css.marginTop = this.status.parentNode.offsetHeight + 'px';
			}
		}
		//cc_on window.focus(); // "unscrollable scrollbar in IE" fix
	}
}

DesignSelect.prototype.selectOffset = function(offset, e) {
	var i = this.selectOffsetImpl(offset, e);
	if (i == undefined)
		i = this.selectOffsetImpl(offset, e);
	this.selectIndex(i, e);
}

DesignSelect.prototype.selectOffsetImpl = function(offset, e) {
	var len = this.scroller.childNodes.length;
	if (len <= 0)
		return;
	if (!this.filteredSelectedIndex)
		this.filteredSelectedIndex = 0;
	this.filteredSelectedIndex += offset;
	if (this.filteredSelectedIndex < 0)
		this.filteredSelectedIndex = len - 1;
	if (this.filteredSelectedIndex >= len)
		this.filteredSelectedIndex = 0;

	return this.scroller.childNodes[this.filteredSelectedIndex].index;
}

//DesignSelect.prototype.xonclick = function(e) {
//	var srcClass = window.event ? window.event.srcElement.className
// : e.target.className;
//
// // if (window.event) var srcClass = window.event.srcElement.className; else
// // var srcClass = e.target.className;
//
// // Ignore scrollbar clicks
// if (srcClass != "options") {
// this.makeActiveOpen();
// // if(this.isSearch)
// // this.textInput.focus()
// // else
// // this.input.focus();
// // this.setOptionsVisible(!this.isOptionsVisible()); // toggle
// // visibility
//
// }
//
// EventListener.cancelEvent(e);
// }

// Forward a select event from the original select element to the design select.
DesignSelect.prototype.onselect = function(e) {
	this.log("onselect");
	var option = (e) ? e.target : window.event.srcElement;
	if (option.nodeType != 1)
		option = option.parentNode; // safari
	if (!e)
		e = window.event;
	this.selectIndex(option.index, e);
	this.makeActiveClosed();
	EventListener.cancelEvent(e);
}

// Select the option with the given index, forwarding the event to the event handlers set on the original select element.
DesignSelect.prototype.selectIndex = function(i, e) {
	if (this.input.selectedIndex != i) {
		this.input.selectedIndex = i;
		// this.input.value = this.input.options[option.index].value;
		if (this.input.onchange)
			this.input.onchange.call(this.input, e);
		if (this.input.onselect)
			this.input.onselect.call(this.input, e);
	}
	this.updateGUI();
}

// JavaScript's lame excuse for inheritance...
// DesignSelect.prototype.superFocus = DesignControl.prototype.focus;

// Does this even happen?
// DesignSelect.prototype.focus = function(e) {
// this.log("focus");
// if (this.isSearch)
// this.textInput.focus(e);
// else
// this.superFocus(e);
// }

// Does this even happen?
// DesignSelect.prototype.focus = function(e) {
// this.log("focus");
// if (this.isSearch)
// this.textInput.focus(e);
// else
// this.superFocus(e);
// }

// Update the display when the selection was changed.
DesignSelect.prototype.updateGUI = function() {
	this.log("updateGUI");
	if(this.input.options.length > this.input.selectedIndex) {
		this.status.innerHTML = this.input.options[this.input.selectedIndex].innerHTML;
		if (ClassName.contains(this.input.options[this.input.selectedIndex], "active")) {
			ClassName.add(this.status, "active");
		} else {
			ClassName.remove(this.status, "active");
		}
	}
	for ( var i = 0; i < this.scroller.childNodes.length; i++) {
		var cn = this.scroller.childNodes[i];
		var isSel = cn.index == this.input.selectedIndex;
		if (isSel) {
			ClassName.add(cn, "selected");
			this.filteredSelectedIndex = i;
			this.scrollIntoView(cn);
		} else {
			ClassName.remove(cn, "selected");
		}
	}
}

// Turn a normal select element into a designselect.
// When the element contains class "choiceSearch", make it a searchable one
// (flag isSearch).
// When the element contains class "active" , make the option bold
DesignSelect.prototype.create = function(inputElement) {
	/*
	 <span class="DCselect">
	 <span class="status">option1</span>
	 <span class="options">
	 <div class="DCscroller">
	 <span class="group">label1</span>
	 <span [class="hover"|class="selected"]>option1</span>
	 <span [class="hover"|class="selected"]>option2</span>
	 <span class="group">label2</span>
	 <span [class="hover"|class="selected"]>option3</span>
	 </div>
	 </span>
	 </span>
	 */
	this.originalTabIndex = inputElement.tabIndex;

	this.GUI = document.createElement("span");
	this.GUI.className = "DCselect";
	this.GUI.style.zIndex = 100;

	this.isSearch = /choiceSearch/.test(inputElement.className);
	this.pattern = ""; // filter for options
	var dc = this;
	this.inputElement = inputElement;

	this.status = document.createElement("span");
	this.status.className = "status";

	this.options = document.createElement("span");
	this.options.className = "options";
	this.options.tabIndex = -1;

	this.scroller = document.createElement("div");
	this.scroller.className = "DCscroller";
	this.options.appendChild(this.scroller);
	this.scroller.tabIndex = -1;

	this.textInputFocused = false;
	this.optionsFocused = false;
	this.options.onfocus = function() {
		that.log("options focus");
		that.optionsFocused = true;
		that.updateFocus();
	};
	this.options.onblur = function() {
		that.log("options blur");
		that.optionsFocused = false;
		that.updateFocus();
	};

	EventListener.removeEvents(this.inputElement, "keyup");

	var that = this;
	this.inputElement.onkeypress = function(e) {
		if (!e)
			e = window.event;
		this.log("press" + e.keyCode); // forward escape, cursor up and
		return EventListener.cancelEvent(e);
	}

	this.inputElement.onkeydown = function(e) {
		if (!e)
			e = window.event;
		this.log("down" + e.keyCode);
		if (e.keyCode == 38)
			that.selectOffset(-1, e);
		if (e.keyCode == 40)
			that.selectOffset(1, e);
		return EventListener.cancelEvent(e);
	}

	this.inputElement.onkeydown = function(e) {
		if (!e)
			e = window.event;
		this.log("down" + e.keyCode);
		if (e.keyCode == 38)
			that.selectOffset(-1, e);
		if (e.keyCode == 40)
			that.selectOffset(1, e);
		return EventListener.cancelEvent(e);
	}

	this.inputElement.onkeyup = function(e) {
		if (!e)
			e = window.event;
		this.log("up" + e.keyCode);
		return EventListener.cancelEvent(e);
	}

	this.GUI.appendChild(this.status);
	this.GUI.appendChild(this.options);

	this.updateOptions();
	// this.updateGUI();
	this.makeActiveClosed();

	return (this.GUI);
}

// Re-render the options after the filter has been changed.
DesignSelect.prototype.updateOptions = function() {
	this.log("updateOptions");
	var oldDisplay = this.scroller.style.left;
	this.scroller.style.left = -10000;

	this.scroller.innerHTML = "";
	var groups = this.input.getElementsByTagName("optgroup");
	if (0 == groups.length) {
		var elements = this.input.getElementsByTagName("option");
		for ( var i = 0; i < elements.length; i++) {
			this.renderOption(i, elements[i]);
		}
	} else {
		var optionCount = 0;
		for ( var j = 0; j < groups.length; j++) {
			this.renderGroup(groups[j]);
			var elements = groups[j].getElementsByTagName("option");
			for ( var i = 0; i < elements.length; i++) {
				this.renderOption(optionCount, elements[i]);
				optionCount = optionCount + 1;
			}
		}
	}
	this.updateGUI();
	//this.setOptionsVisible(true);

	this.scroller.style.left = oldDisplay;
}

// Mouseover event handler for option span. this = span 
DesignSelect.prototype.optionMouseOver = function() {
	if (!ClassName.contains(this, "selected")) {
		ClassName.add(this, "hover");
	}
}

//Mouseout event handler for option span. this = span 
DesignSelect.prototype.optionMouseOut = function() {
	if (!ClassName.contains(this, "selected")) {
		ClassName.remove(this, "hover");
	}
}

// Add one span corresponding to the option element.
// When the element contains class "active" , make the option bold
DesignSelect.prototype.renderOption = function(i, element) {
	if (!element.innerHTML.match(new RegExp(this.pattern, "i")))
		return;
	var span = document.createElement("span");
	var makeBold = ClassName.contains(element, "active");
	span.innerHTML = element.innerHTML;
	span.tabIndex = -1;
	if (!element.disabled) {
		span.index = i;
		var that = this;
		if (makeBold) {
			ClassName.add(span, "active");
		}
		span.onclick = function(e) {
			that.log("renderOption:onclick, parm="+e);
			//if (!e) var e = window.event; // IE
			that.onselect(e);
						
			// log click in webstatistics
			var clickinfo = $(that.inputElement).attr("nuonwa:clickinfo");			
			if (typeof(clickinfo) != "undefined" && clickinfo != "") {
				sc_logDropdownClick(that.inputElement, span);
			}
		}
		span.onmouseover = this.optionMouseOver;
		span.onmouseout = this.optionMouseOut;
	}
	this.scroller.appendChild(span);
}

// Render a group header
DesignSelect.prototype.renderGroup = function(optgroup) {
	var span = document.createElement("span");
	span.innerHTML = optgroup.label;
	span.className = "group";
	this.scroller.appendChild(span);
}

// Calculate the size of the scrollable area to display a maximum of 10 options.
DesignSelect.prototype.setDimensions = function() {
	this.options.style.overflow = "visible";
	this.options.style.height = "auto";
	this.options.style.width = "auto";
	var width = Math.max(this.scroller.offsetWidth, this.status.offsetWidth) - 1;
	this.options.style.overflow = "";

	if (this.scroller.childNodes.length > 10) {
		var optionHeight = this.scroller.childNodes[0].offsetHeight;
		this.options.style.height = (10 * optionHeight) + "px";
		this.options.style.width = (width + 18) + "px";
		this.options.style.overflow = "auto";
	} else {
		if (width > 0)
			this.options.style.width = width + "px";
	}

	this.scroller.tabIndex = -1; // don't focus the scroller
}

/**
 * Scrolls the given element into view.
 * 
 * <p>
 * This method crawls up the DOM hierarchy, adjusting the scrollLeft and
 * scrollTop properties of each scrollable element to ensure that the
 * specified element is completely in view. It adjusts each scroll position by
 * the minimum amount necessary.
 * </p>
 * 
 * Stolen from com.google.gwt.user.client.DOM.scrollIntoView(Element)
 * 
 * @param elem the element to be made visible
 */
DesignSelect.prototype.scrollIntoView = function(/*Element*/elem) {
	var left = elem.offsetLeft, top = elem.offsetTop;
	var width = elem.offsetWidth, height = elem.offsetHeight;

	if (elem.parentNode != elem.offsetParent) {
		left -= elem.parentNode.offsetLeft;
		top -= elem.parentNode.offsetTop;
	}

	var cur = elem.parentNode;
	while (cur && (cur.nodeType == 1)) {
		if (left < cur.scrollLeft) {
			cur.scrollLeft = left;
		}
		if (left + width > cur.scrollLeft + cur.clientWidth) {
			cur.scrollLeft = (left + width) - cur.clientWidth;
		}
		if (top < cur.scrollTop) {
			cur.scrollTop = top;
		}
		if (top + height > cur.scrollTop + cur.clientHeight) {
			cur.scrollTop = (top + height) - cur.clientHeight;
		}

		var offsetLeft = cur.offsetLeft, offsetTop = cur.offsetTop;
		if (cur.parentNode != cur.offsetParent) {
			offsetLeft -= cur.parentNode.offsetLeft;
			offsetTop -= cur.parentNode.offsetTop;
		}

		left += offsetLeft - cur.scrollLeft;
		top += offsetTop - cur.scrollTop;
		cur = cur.parentNode;
	}
}

/********************************************************************************************************************/
/**
 * * DESIGNSUBMIT
 * **************************************************************************************************
 */
DesignSubmit.prototype = new DesignControl;
DesignSubmit.prototype.constructor = DesignCheckBox;
DesignSubmit.superclass = DesignControl.prototype;

function DesignSubmit() {
	if (arguments.length > 0)
		this._constructor.apply(this, arguments);
}
DesignSubmit.prototype._constructor = function(inputElement) {
	this.input = inputElement;
	this.GUI = this.transform(inputElement);
	if (!inputElement.disabled)
		EventListener.addEvent(this.GUI, "click", this.onclick, this);
}
DesignSubmit.prototype.transform = function(inputElement) {
	var designElement = document.createElement("span");
	var innerElement = this.create(inputElement);

	designElement.id = inputElement.id;
	inputElement.id = inputElement.id + "_replaced";

	EventListener.addEvent(inputElement, "focus", this.focus, this);
	EventListener.addEvent(inputElement, "blur", this.blur, this);

	ClassName.add(innerElement, "DCblur");
	ClassName.add(innerElement, inputElement.className);

	designElement.appendChild(innerElement);
	inputElement.DC = this;
	inputElement.parentNode.insertBefore(designElement, inputElement);
	ClassName.add(inputElement, "replaced");

	designElement.onfocus = function() {
		inputElement.focus()
	}

	return designElement;
}
DesignSubmit.prototype.create = function(inputElement) {
	/*
	 <a class="DCsubmit">
	 <span>value</span>
	 </a>
	 */
	if (inputElement.disabled) {
		var GUI = document.createElement("div");
		GUI.className = "DCsubmitDisabled";
		GUI.href = "#";
	} else {
		var GUI = document.createElement("a");
		GUI.className = "DCsubmit";
		GUI.href = "#";
	}

	GUI.onclick = function() {
		return false;
	}; // do nothing
	var span1 = document.createElement("span");
	GUI.appendChild(span1);

	var span2 = document.createElement("span");
	span1.appendChild(span2);

	var span3 = document.createElement("span");
	span2.appendChild(span3);

	span3.innerHTML = inputElement.value;

	return (GUI);
}
DesignSubmit.prototype.onclick = function(e) {
	this.input.focus();
	if (this.input.onclick) {
		var onclickcall = this.input.onclick.call(this.input, e);
		if (onclickcall) {
			this.input.click();
		}
	} else {
		this.input.click();
	}
	EventListener.cancelEvent(e);
}
DesignSubmit.prototype.focus = function() {
	ClassName.swap(this.GUI, "DCblur", "DCfocus");
}
DesignSubmit.prototype.blur = function() {
	ClassName.swap(this.GUI, "DCfocus", "DCblur");
}

DesignSubmit.prototype.updateGUI = function() {
	replacingInString = this.input.id.slice(0, -9); // cut off last 9 characters
	// (i.e. "_replaced")
	replacingInput = document.getElementById(replacingInString);
	inner = replacingInput.firstChild;
	while (inner) {
		next = inner.nextSibling;
		replacingInput.removeChild(inner);
		inner = next;
	}
	child = this.create(this.input);
	inputclasses = this.input.className;
	ClassName.add(child, inputclasses.replace(/replaced/, "")); // remove class
	// "replaced" as
	// that is not
	// the case
	ClassName.add(child, "DCblur");
	replacingInput.appendChild(child);
}
/********************************************************************************************************************/