var XBControls = {};
	
XBControls.DDList = function (controlId)
{
	var self = this;
	
	self.input = null;
	self.text = null;
	self.label = null;
	self.listCell = null;
	self.sub = null;
	self.ul = null;
	
	var container = $(controlId);
	
	this.data = {};

	/*
	This is for IE.
	When mouse clicks somewhere on scrollbar of the overflowed UL, IE blurs text input field (while FF does not).
	That's why we have to monitor mouse whether it is over or out the UL to deny hide while its over and to
	allow and refocus input when its out.
	*/
	var denyHide = false;
	
	/*
	But, when mouse clicks on an anchor to make his legal selection the mouseout is also fired. And text input field
	is refocused. That's why whe should deny refocus in that case and allow it just after trigger event to make all
	this work.
	*/
	var denyRefocus = true;
	
	var enabled = true;
	
	var selectHandler = null;
	

	var focus = function ()
	{
		self.text.focus();
	}

	var blur = function ()
	{
		self.text.blur();
	}
	
	var hideListRaw = function ()
	{
		self.listCell.removeClassName('hover');
	}

	var showList = function ()
	{
		self.listCell.addClassName('hover');

		focus();
	}

	var hideList = function ()
	{
		if (! denyHide) hideListRaw();
	}

	var toggleList = function ()
	{
		if (self.listCell.hasClassName('hover'))
		{
			hideList();
		}
		else
		{
			showList();
		}
	}
	
	var setTitle = function (title)
	{
		self.label.update(title);
	}
	
	var setValue = function (value)
	{
		self.input.value = value;
	}


	var onTrigger = function (event)
	{
		allowRefocus = true;
		
		toggleList();
		
		return true;
	}
	
	var onSelect = function (event)
	{
		var el = Event.element(event);
		
		setTitle(el.innerHTML);
		setValue(el.value);
		
		denyHide = false;
		allowRefocus = false;

		blur(); // ensure blur; side-effect: hideList through onBlur
		hideListRaw();
		
		if (selectHandler) selectHandler(el.value);
		
		return false;
	}
	
	var onBlur = function (event)
	{
		hideList.delay(0.1);
		
		return true;
	}
	
	var onOverUL = function (event)
	{
		denyHide = true;
		
		return true;
	}

	var onOutUL = function (event)
	{
		denyHide = false;
		
		if (allowRefocus) self.text.focus();
		
		return true;
	}
	
	
	var setItemHandlers = function (item)
	{
		item.observe('click', onSelect.bindAsEventListener(self));
	}

	this.isEnabled = function ()
	{
		return enabled;
	}
	
	this.enable = function ()
	{
		container.removeClassName('disabled');
		self.input.disabled = false;
		enabled = true;
	}
	
	this.disable = function ()
	{
		enabled = false;
		container.addClassName('disabled');
		self.input.disabled = true;
	}
	
	this.removeAll = function ()
	{
		self.ul.childElements().each( function (i) {i.remove();} );
		
		self.data = {};
	}

	this.loadData = function (data, append)
	{
		if (! append) self.removeAll();

		var fragment = document.createDocumentFragment();
		
		for (var value in data)
		{
			var title = data[value];
			
			var li = Element.extend(document.createElement('LI'));
			
			var a = Element.extend(document.createElement('A'));
			a.href = 'javascript:void(0);';
			a.title = title;
			a.update(title);
			a.value = value;
			
			self.data[value] = {title: title, a: a};
			
			setItemHandlers(a);
			
			li.appendChild(a);
			//self.ul.appendChild(li);
			fragment.appendChild(li);
		}
		
		self.ul.appendChild(fragment);
	}
	
	this.setSelectHandler = function (handler)
	{
		selectHandler = handler;
	}
	
	this.select = function (value)
	{
		var r = false;
		
		if (self.data[value])
		{
			setTitle(self.data[value].title);
			setValue(value);
			
			r = true;
		}
		
		return r;
	}


	var init = function ()
	{
		self.input = container.select('input[type=hidden]')[0];
		self.text = container.select('input[type=text]')[0];
		self.label = container.select('div.ddLabel span')[0];
		self.listCell = container.select('TD')[0];
		self.sub = container.select('div.sub')[0];
		self.ul = container.select('UL')[0];

		container.select('A').each(setItemHandlers);
		
		container.select('div.ddTrigger')[0].observe('click', onTrigger.bindAsEventListener(self));

		self.text.observe('blur', onBlur.bindAsEventListener(self));
		
		self.ul.observe('mouseover', onOverUL);
		self.ul.observe('mouseout', onOutUL);
		
		
		self.text.blur();
	}
	

	init();
}


XBControls.Checkbox = function (controlId)
{
	var self = this;
	
	
	var container = $(controlId);
	var input = null;
	

	this.check = function ()
	{
		input.checked = true;
		container.addClassName('checked');
	}

	this.uncheck = function ()
	{
		input.checked = false;
		container.removeClassName('checked');
	}
	
	this.isChecked = function ()
	{
		return input.checked;
	}


	var onClick = function ()
	{
		if (self.isChecked()) self.uncheck();
		else self.check();
	}
	

	var init = function ()
	{
		input = container.select('input')[0];
		
		if (input.checked) self.check();

		container.observe('click', onClick.bindAsEventListener(self));
	};

	init();
}

XBControls.File = function (controlId)
{
	var self = this;
	
	this.file = null;
	this.text = null;
	this.button = null;
	
	var container = $(controlId);

	
	var onChange = function ()
	{
		self.text.value = self.file.value;
	}

	var init = function ()
	{
		self.file = container.select('input[type=file]')[0];
		self.text = container.select('input[type=text]')[0];
		self.button = container.select('div.button')[0];
		
		var cDim = container.getDimensions();
		var bDim = self.button.getDimensions();

		var tWidth = cDim.width - bDim.width - 3;
		self.text.setStyle({width: tWidth + 'px'});
		
		self.file.observe('change', onChange.bindAsEventListener(self));
	};

	init();
}

XBControls.CaptchaImage = function (controlId, triggerControlId, url)
{
	var self = this;
	
	self.url = url;
	
	var image = $(controlId);

	
	this.reload = function ()
	{
		var anticache = new Date().valueOf();
		var newUrl = self.url + '&anticache=' + anticache;

		image.src = newUrl;
	}
	
	var onClick = function ()
	{
		self.reload();
		
		return false;
	}

	var init = function ()
	{
		var trigger = $(triggerControlId);
		trigger.observe('click', onClick.bindAsEventListener(self));

		self.reload();
	};

	init();
}