function getposOffset(overlay, offsettype) {
    var totaloffset = (offsettype == "left") ? overlay.offsetLeft : overlay.offsetTop;
    var parentEl = overlay.offsetParent;
    while (parentEl != null) {
        totaloffset = (offsettype == "left") ? totaloffset + parentEl.offsetLeft : totaloffset + parentEl.offsetTop;
        parentEl = parentEl.offsetParent;
    }
    return totaloffset;
}				
function overlay(curobj, subobjstr, opt_position) {
    if (document.getElementById) {
        var subobj = document.getElementById(subobjstr);
        //subobj.style.display = (subobj.style.display != "block") ? "block" : "none";
        var xpos = getposOffset(curobj, "left") + ((typeof opt_position != "undefined" && opt_position.indexOf("right") != -1)? - (subobj.offsetWidth-curobj.offsetWidth) : 0);
        var ypos = getposOffset(curobj, "top") + ((typeof opt_position != "undefined" && opt_position.indexOf("bottom") != -1)? curobj.offsetHeight : 0);
        subobj.style.left = xpos + "px";
        subobj.style.top = ypos + "px";
        return false
    } else
        return true
}

function overlayclose(subobj) {
    document.getElementById(subobj).style.display = "none";
    document.onclick=display = "none";
}


var Keys = {
	DOWN: 40,
	LEFT: 37,
	RIGHT: 39,
	UP: 38,
	TAB: 9,
	ESCAPE: 27,
	ENTER: 13,
	PAGE_UP: 33,
	PAGE_DOWN: 34
	
}
var AutoComplete = Class.create();
AutoComplete.prototype = {
	initialize: function (idCajaTexto, idCapaResultados, idSiguienteFocus) {
		this.pageJump = 10;
		this.timer = null;
		this.count = 10;
		this.pos = -1;
		this.waitAfterInput = 230;
		this.minChars = 1;
		this.children = null;
		this.ele = $(idCajaTexto);
		this.div = $(idCapaResultados);
		this.idCapaResultados = idCapaResultados;
		Event.observe(this.ele, 'keydown', this.onKeyDown.bindAsEventListener(this));
		Event.observe(this.ele, 'keyup', this.onKeyUp.bindAsEventListener(this));
		//Event.observe(this.div, 'click', this.onclick.bindAsEventListener(this));
		this.selectedData = null;
		this.showing = false;
		this.data = null;
		this.selectedListeners = [];
		this.template = new Template('<div  id="#{IDLINK}" class="navenlace arial11"><a  class="special" href="javascript:void(0);" title="#{ISIN} - #{NOMBRE}"><strong>#{ISIN}</strong> #{NOMBRE}</a></div>');
		this.idSiguienteFocus = idSiguienteFocus;

		
	},
	setTemplateExpression: function(exp) {
		this.templateExpression = new Template(exp);
	},
	reset: function() {
		this.ele.value = "";
		this.pos = -1;
		this.data = null;
		this.hide();
	},
	getValue: function() {
		if (!this.ele.value)
			return "";
		return this.ele.value;
	},
	onmouseover: function (ev,id) {
			//alert(id);
			this.pos = id;
			this.highlight(this.pos);
		
	},
	postSelect: function() {
		
		return;
	},
	highlight: function(id) {
		if (!this.data)
			return;
		var i;
		for (i = 0; i < this.data.length; i++) {
			if (i != id) {
				Element.removeClassName ($('list_' + i),"solonavenlace");
				Element.addClassName ($('list_' + i),"navenlace");
			} else {
				Element.removeClassName ($('list_' + i),"navenlace");
				Element.addClassName ($('list_' + i),"solonavenlace");
			}
		}
	},

	
	onKeyDown: function (e) {
		switch (e.keyCode) {
			case Keys.DOWN:
				if(this.pos < this.getLength() -1) {
					this.pos++;
					this.highlight(this.pos);
					this.div.scrollTop = this.div.scrollHeight/ this.getLength() * this.pos;
					if (this.pos < this.getLength() -5) 
						this.div.scrollTop -= 30;
					
					
					//this.paint();
				}
				break;
			case Keys.PAGE_DOWN:
					this.pos += this.pageJump;
					if (this.pos >= this.getLength()) {
						this.pos = this.getLength()-1;
					}
					this.highlight(this.pos);
					this.div.scrollTop = this.div.scrollHeight/ this.getLength() * this.pos;
					if (this.pos < this.getLength() -5) 
						this.div.scrollTop -= 30;
					
					
					//this.paint();
				
				break;
			case Keys.UP:
				if(this.pos > 0) {
					this.pos--;
					this.highlight(this.pos);
					this.div.scrollTop = this.div.scrollHeight/ this.getLength() * this.pos;
					if (this.pos < this.getLength() -5) 
						this.div.scrollTop -= 30;
					//this.paint();
				}
				break;
			case Keys.PAGE_UP:
					this.pos -= this.pageJump;
					if (this.pos < 0) {
						this.pos = 0;
					}
					this.highlight(this.pos);
					this.div.scrollTop = this.div.scrollHeight/ this.getLength() * this.pos;
					if (this.pos < this.getLength() -5) 
						this.div.scrollTop -= 30;
					break;
			case Keys.ENTER:
					if (this.pos >= 0) {
						this.select();
						//Event.stop(e);
						this.hide();
						
						return true;
					}
				


				break;
			case Keys.TAB:
				if (this.pos >= 0) {
					this.select('TAB');
					Event.stop(e);
					this.hide();
					return false;
				}
				break;
			case Keys.ESCAPE:
				this.hide();
				break;
			case 219:
				//alert("AKI");
				Event.stop(e);
				break;
			default:
				//alert(e.keyCode);
				break;
				
		}
		
		//alert(e.keyCode);
		
	},
	onKeyUp: function (e) {
		//alert(e.keyCode);
		//this.getData();
		switch (e.keyCode) {
			case Keys.DOWN:
			case Keys.UP:
			case Keys.ENTER:
			case Keys.TAB:
			case Keys.ESCAPE:
			case Keys.LEFT: 
			case Keys.RIGHT:
			case Keys.PAGE_DOWN:
			case Keys.PAGE_UP:
				return true;
				break;
			default:
				if (this.getValue().length >= this.minChars) {
					if(this.timer != null) 
						clearTimeout(this.timer);
					Element.addClassName(this.ele,"autocomplete");
					this.timer = setTimeout(this.getData.bind(this), this.waitAfterInput);
				
					//this.getData();
				} else {
					this.hide();
				}
				break;
		}
		
	},
	getData: function() {
	},
	getItem: function(idx) {
		return this.data[idx];
	},
	getLength: function() {
		if (this.data)
			return this.data.length;
		return 0;
	},
	getDisplay: function(item) {
		return item.FundDescription;
	},
	
	
	paint: function () {
		if ((!this.data) || (this.data.length == 0)) {
			this.hide();
		} else
			this.show();
		
		html = "";
		
		
		for (i = 0; i < this.data.length; i++) {
			html += this.template.evaluate({IDLINK: "list_" + i, ISIN: this.data[i].FundISIN, NOMBRE:this.data[i].FundDescription});
		}
		this.div.innerHTML = html;
		for (i = 0; i < this.data.length; i++) {
			Event.observe($("list_"+i), 'mouseover', this.onmouseover.bindAsEventListener(this,i));
			Event.observe($("list_"+i), 'click', this.select.bindAsEventListener(this,i));
		}
		if (this.pos > 0)
			this.highlight(this.pos);
		
		
	},
	onData: function (resultado) {
		var i;
		if (resultado.request.args.fundSelected == this.ele.value) {
			// Solo si el resultado concuerda con lo que está
			// escrito en la caja
			this.data = resultado.value;
			this.pos = -1;
			Element.removeClassName(this.ele,"autocomplete");
			this.paint();
		} else if (this.getValue().length < this.minChars) {
			Element.removeClassName(this.ele,"autocomplete");
		}
		
	},
	
	hide: function() {
		if (this.showing) {
			overlay(this.ele,this.idCapaResultados,"leftbottom");
			$(this.idCapaResultados).hide();
		}
		this.showing = false;
	},
	
	show: function() {
		if (!this.showing) {
			overlay(this.ele,this.idCapaResultados,"leftbottom");
			$(this.idCapaResultados).show();
			this.showing = true;
		}
	},
	select: function(key) {
		if(this.pos > -1) {
			this.selectedData = this.getItem(this.pos);
			var v = this.getDisplay(this.getItem(this.pos));
			if(v != this.ele.value) {
				this.ele.value = v;
			}
		}
		this.fireSelect();
		this.postSelect();
		this.hide();
		//if (key == null) {	
			if (this.idSiguienteFocus != null) {
				$(this.idSiguienteFocus).focus();
			}
		//}
	},
	fireSelect: function() {
		var i;
		for (i = 0; i < this.selectedListeners.length; i++) {
			this.selectedListeners[i].call(this,this.getItem(this.pos));
		}
	},
	addEventListener: function (ev, listener) {
		if (ev == "selected") {
			this.selectedListeners.push(listener);
		}
	}
}