

function DropDown$Class(name, targ, scroll, sel, data)
{
	this.el = document.getElementById(targ);
	if (this.el == null) throw new Error("Target element '"+targ+"' not found!");
	this.data = data;
	this.selected = sel;
	this.reallySelected = sel;
	this.name = name;
	var html = [];
	var w = parseInt(this.el.style.width);
	var h = parseInt(this.el.style.height);
	var overflow;
	var itemH = h-4;
	var listH;
	this.listpaneClass=name+"_dd_listpane dd_listpane";
	this.selectedClass=name+"_dd_selected dd_selected";
	this.unselectedClass=name+"_dd_unselected dd_unselected";
	this.topClass=name+"_dd_top dd_top";

	if (scroll > 0 && scroll < this.data.length)
	{
		overflow = "auto";
		listH = scroll*itemH;
		itemW = w-getScrollerWidth()-2;
	}
	else
	{
		listH = itemH*this.data.length+2;
		itemW = w-2;
		overflow="hidden";
	}

	html.push("<span id='"+targ+"_list' class='"+this.listpaneClass+"' onMouseOver='"+name+".stopCountdown();' onMouseOut='"+name+".startCountdown()'");
	html.push("style='overflow:hidden; visibility:hidden; position:absolute; left:0; top:"+h+"; width:"+w+"; height:"+listH+";'>");

	html.push("<span id='"+targ+"_list_inner' onMouseOver='"+name+".stopCountdown();' onMouseOut='"+name+".startCountdown()'");
	html.push("style='overflow:auto;overflow-y:"+overflow+"; overflow-x:hidden;background-color:white; position:absolute;z-index:3; left:1; top:0; width:"+(w-2)+"; height:0px; yp:"+(listH-1)+";'>");

	for (var i=0, Y=0; i<this.data.length; i++, Y+=itemH)
	{
		this.data[i].ID = targ+"_li_"+i;
		this.data[i].txt = "&nbsp;"+this.data[i].txt;
		html.push("<span id='"+this.data[i].ID+"' class='"+this.unselectedClass+"' onMouseOver='"+name+".highlightSelection("+i+")' onClick='"+name+".toggleListPane("+i+")'");
		html.push(" style='position:absolute; left:0; top:+"+Y+"; width:"+itemW+"; height:"+itemH+";cursor:pointer'>"+this.data[i].txt+"</span>");
		html.push("<span onMouseOver='"+name+".highlightSelection("+i+")'onClick='"+name+".toggleListPane("+i+")'");
		html.push(" style='position:absolute; left:0; top:+"+Y+"; width:"+itemW+"; height:"+itemH+";cursor:pointer'></span>");
	}
	html.push("</span></span><span id='"+targ+"_top' class='"+this.topClass+"' onClick='"+name+".toggleListPane(-1)'");
	html.push(" style='position:absolute; left:0; top:0; width:"+w+"; height:"+h+";cursor:pointer'>"+this.data[this.selected].txt+"</span>");
	html.push("<span onClick='"+name+".toggleListPane(-1)' onMouseOver='"+name+".stopCountdown();' onMouseOut='"+name+".startCountdown()'");
	html.push(" style='position:absolute; left:0; top:0; width:"+w+"; height:"+h+"; cursor:pointer'></span>");

	this.el.innerHTML = html.join('');

	this.listPaneEl = document.getElementById(targ+"_list");
	this.listPaneInnerEl = document.getElementById(targ+"_list_inner");
	this.topEl = document.getElementById(targ+"_top");
	this.innerH = (listH-1);
	for (i=0; i<this.data.length; i++) this.data[i].el = document.getElementById(this.data[i].ID);

	DropDown$Class.prototype.setRadioHolder = function(rh) { this.radioHolder = rh; rh.addControl(this); };
	DropDown$Class.prototype.startCountdown = function() { this.radioHolder.startCountdown(this.name); };
	DropDown$Class.prototype.stopCountdown = function() { this.radioHolder.stopCountdown(this.name); };

	DropDown$Class.prototype.highlightSelection = function(idx)
	{
		if (this.selected != null) this.data[this.selected].el.className = this.unselectedClass;
		this.selected = idx;
		this.data[idx].el.className = this.selectedClass;
	};

	DropDown$Class.prototype.toggleListPane = function(idx)
	{
		if (this.listPaneEl.style.visibility == "visible")
		{
			this.hide();
			if (idx > -1) // ie a click on a list item rather than the top selected item again
			{
				this.reallySelected = idx;
				this.topEl.innerHTML = this.data[idx].txt;
				this.data[idx].func(this.data[idx].param, this.name);
			}
			this.radioHolder.setSelected(null);
		}
		else
		{
			this.show();
		 	this.radioHolder.setSelected(this);
			this.data[this.selected].el.className = this.unselectedClass;
			this.data[this.reallySelected].el.className = this.selectedClass;
		}
	};

	DropDown$Class.prototype.hide = function()
	{
		this.listPaneInnerEl.style.height = "0px";
		this.listPaneEl.style.visibility = "hidden";
		this.el.style.zIndex = 2;
	};
	DropDown$Class.prototype.show = function()
	{
		this.listPaneInnerEl.style.height = this.innerH+"px";
		this.listPaneEl.style.visibility = "visible";
		this.el.style.zIndex = 3;
	};

}

function RadioHolder$Class()
{
	this.selected = null;
	this.hideDelay=0;
	this.controls = [];

	RadioHolder$Class.prototype.addControl = function(c) { this.controls.push(c); };
	RadioHolder$Class.prototype.startCountdown = function(name) { this.hideDelay = 10; };
	RadioHolder$Class.prototype.stopCountdown = function(name) { this.hideDelay = 0; };

	RadioHolder$Class.prototype.setSelected = function(c)
	{
		if (this.selected != null) this.selected.hide();
		this.selected = c ;
	};

	RadioHolder$Class.prototype.hideAll = function()
	{
		for (i in this.controls) this.controls[i].hide();
		this.selected = null;
	};

	RadioHolder$Class.prototype.checkHide = function()
	{
		switch(this.hideDelay)
		{
			case 0: break;
			case 1:	this.hideAll();	this.hideDelay = 0;	break;
			default: --this.hideDelay; break;
		}
		var _this = this;
		setTimeout(function() { _this.checkHide(); }, 100);
	};
	this.checkHide();
}

function getScrollerWidth()
{
    var scr = null;
    var inn = null;
    var wNoScroll = 0;
    var wScroll = 0;

    scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';
    scr.style.overflow = 'hidden';

    inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';

    scr.appendChild(inn);
    document.body.appendChild(scr);

    wNoScroll = inn.offsetWidth;
    scr.style.overflow = 'auto';

    wScroll = inn.offsetWidth;
	if (wScroll == wNoScroll)
	{
    	scr.style.overflow = 'scroll';
    	wScroll = inn.offsetWidth;
	}

    document.body.removeChild(document.body.lastChild);

	if (wScroll == wNoScroll) return 17;
    return (wNoScroll - wScroll);
}

