// JavaScript Document

function SelectWidget (options, selectedKey, name, form) {
	this.defaultWidth = 160;
	
	if (form && name) {
		this.attachToForm(name, form);
	}
	
	this.createPane();
	this.pullin();	
	Event.bindDom(this.pusher, "click", this, this.onClickPusher);
	Event.bindDom(this.valueCell, "click", this, this.onClickPusher);
	Event.bindDom(document.body, "click", this, this.onClickHtmlBody);
//	Event.bindDom(document.body, "scroll", this, this.pullin);
//	Event.bindDom(window, "scroll", this, this.pullin);

	this.setOptions(options, selectedKey);
}

SelectWidget.prototype.setOptions = function (aOptions, aSelectedKey) {
	var selectedKey = aSelectedKey || "0";
	
	this.optionKeys = [];
	this.optionValues = [];
	
	for (k in aOptions) {
		this.optionKeys.push(k);
		this.optionValues.push(aOptions[k]);		
	}
	
	this.selectedKey = selectedKey;
	this.selectedIndex = this.optionKeys.indexOf(selectedKey);
	Log.write("this.selectedIndex: " + this.selectedIndex);
	
	if (this.selectedIndex == -1) {
		for (var p in aOptions) {
			this.selectedIndex = p;
			break;
		}
	}
	this.updateUI();	
}

SelectWidget.prototype.setWidth = function (w) {
	this.defaultWidth = w;
	this.optionsPane.style.width = px(w);
	this.selectPane.style.width = px(w);
	this.updateUI();
}

SelectWidget.prototype.createPane = function () {
	this.source = document.createElement("div");
	
	var pane = document.createElement("div");
	pane.style.position = "absolute";
	pane.style.left = px(0);
	pane.style.top = px(0);
	pane.style.width = this.defaultWidth;
	pane.id = "optionsPane";
	this.optionsPane = pane;
	
	
	var pane = document.createElement("table");
	pane.width = this.defaultWidth;
	pane.cellPadding = 0;
	pane.cellSpacing = 0;
	pane.border = 0;
	this.selectPane = pane;
	
	var row = pane.insertRow(-1);
	var image = createImage("images/startfld.gif", 4, 22);
	var c = row.insertCell(-1).appendChild(image);
	c.style.verticalAlign = "top";

	var valueCell = row.insertCell(-1);
	valueCell.width = "100%";
	valueCell.style.backgroundImage = "url(images/bgselect.gif)";
	valueCell.style.textAlign = "left";
	valueCell.style.overflow = "hidden";
	valueCell.noWrap = true;
//valueCell.style.margin = px(0);
//valueCell.style.padding = px(0);
	cursor(valueCell, "default");
	noUserSelect(valueCell);
	this.valueCell = valueCell;
	
	var pusher = createImage("images/down.gif", 19, 22);
	var c = row.insertCell(-1).appendChild(pusher);
	c.valign = "top";
	cursor(pusher, "pointer");
	this.pusher = pusher;
	
	this.source.appendChild(this.selectPane);
	this.source.appendChild(this.optionsPane);
}

SelectWidget.prototype.selectValue = function (selectedIndex) {
	var oldIndex = this.selectedIndex;
	this.selectedIndex = selectedIndex;
	if (this.selectedIndex >= 0) { 
		this.selectedKey = this.optionKeys[selectedIndex];
		var value = this.optionValues[selectedIndex];
	}
	else {
		this.selectedKey = "";
		var value = "";
	}
	
	if (this.formInput) {
		this.formInput.value = this.selectedKey;
	}
	
	this.valueCell.innerHTML = value.length > 0 ? value : " ";
	
	if (oldIndex != this.selectedIndex) {
		Event.trigger(this, "change");
	}
}

SelectWidget.prototype.toSource = function () {
	return this.source;
}

SelectWidget.prototype.onClickPusher = function (ev) {
	this.pulled ? this.pullin() : this.pullout();
}

SelectWidget.prototype.getSelectOffset = function () {
	var r = nd(this.selectPane, document.body);
	return r;
}

SelectWidget.prototype.repaintOptionsPane = function () {
	var size = this.getSelectOffset();
	var optionsPane = this.optionsPane;
	this.optionsPane.style.left = px(size["x"]);
	this.optionsPane.style.top = px(size["y"] + 24);
}

SelectWidget.prototype.pullout = function () {
	this.repaintOptionsPane();
	this.optionsPane.style.display = "";
	this.pulled = true;
}

SelectWidget.prototype.pullin = function () {
	this.optionsPane.style.display = "none";
	this.pulled = false;	
}

SelectWidget.prototype.updateUI = function () {
	var optionsPane = this.optionsPane;
	optionsPane.innerHTML = "";

	var list = document.createElement("ul");
	list.style.width = this.defaultWidth;
	for (var i=0; i<this.optionValues.length; i++) {
		var opt = document.createElement("li");
		setUserData(opt, "index", i);
//		opt.style.width = $browser.type == 1 ? px(this.defaultWidth - 8) : px(this.defaultWidth - 10);
		opt.style.width = px(this.defaultWidth - 8);
		opt.innerHTML = this.optionValues[i];
		if ($browser.type == 1) {
			Event.bindDom(opt, "mouseover", this, this.onMouseOverOption);
			Event.bindDom(opt, "mouseout", this, this.onMouseOutOption);
		}
		Event.bindDom(opt, "click", this, this.onClickOption);
		cursor(opt, "pointer");
		list.appendChild(opt);
	}
	optionsPane.appendChild(list);
	this.repaintOptionsPane();
	
	Log.write("selectValue : " + this.selectedIndex);
	this.selectValue(this.selectedIndex);
}

SelectWidget.prototype.onMouseOverOption = function (ev) {
	var target = ev.target;
	target.className = "hover";
}

SelectWidget.prototype.onMouseOutOption = function (ev) {
	var target = ev.target;
	target.className = "";
}

SelectWidget.prototype.onClickOption = function (ev) {
	var li = ev.target;
	var index = getUserData(li, "index");
	this.selectValue(index);
	this.pullin();
}

SelectWidget.prototype.onClickHtmlBody = function (ev) {
	if (! hasAncestor(ev.target, this.source)) {
		this.pullin();
	}
}

SelectWidget.prototype.attachToForm = function (name, form) {
	var input = document.createElement("input");
	input.type = "hidden";
	input.name = name;
	form.appendChild(input);
	this.formInput = input;
	
/*	
	Log.write(input.name + " : " + input.value);
	for (var i=0; i<form.elements.length; i++) {
		var e = form.elements[i];
		Log.write(e.name + " : " + e.value);
	}
*/	
}