var activeSelectElement = null;

function elSelect(id, selectZindex) {
	selectControls.push(this); 
	this.init(id, selectZindex);
}

elSelect.id = null;
elSelect.div = null; 

elSelect.prototype.init = function(id, selectZindex) {
	this.id = id;
	this.createUl(selectZindex);
	
};

function __onclick(name) {
	if ( activeSelectElement != null ) {
		if ( name != activeSelectElement && document.getElementById("ul_"+activeSelectElement).style.display != "none" ) {
			document.getElementById("ul_text_"+activeSelectElement).onclick();
		}
	}
	var ul = document.getElementById("ul_" + name);
	if ( ul.style.display == "block" ) {
		ul.style.display = "none";
	}
	else {
		ul.style.display = "block";
		activeSelectElement = name;
		document.getElementById("ul_text_"+activeSelectElement).focus();
	}
	//ul.childNodes[ul._active].className = "activeLI";
	ul.childNodes[ul._active].onclick(true);
}

elSelect.prototype.calculatePosition = function() {
	var obj   = document.getElementById(this.id);
	var width = parseInt(obj.offsetWidth)-25;
	
	function offsetPosition(element) {
	    var offsetLeft = 0, offsetTop = 0;
	    do {
	        offsetLeft += element.offsetLeft;
	        offsetTop  += element.offsetTop;
	    } while (element = element.offsetParent);
	    return [offsetLeft, offsetTop];
	}
	
	var positionObj = offsetPosition(obj);
	var top = 0;
	if ( obj.getAttribute("top") ) {
		top = parseInt(obj.getAttribute("top"));
	}
	this.div.style.top  = positionObj[1] + parseInt(obj.offsetTop) + top;
	this.div.style.left = positionObj[0];
	this.div.style.width = width + 30 + "px";
}; 

elSelect.prototype.createUl = function(selectZindex) {
	var obj   = document.getElementById(this.id);
	var width = parseInt(obj.offsetWidth)-25;
	var ie    = /MSIE/.test(navigator.userAgent); 
	var opera = /Opera/.test(navigator.userAgent);
	
	this.div = document.createElement("div");
	this.div.className  = "elSelect";
	
	this.div.style.zIndex = selectZindex;
	document.body.appendChild(this.div);
	this.calculatePosition(); 
	
	var input = document.createElement("input");
	input.id = "ul_text_"+obj.name;
	input.type = "text";
	input.readOnly = true;
	input.className = "elSelectText";
	input.style.width = width;
	input._name= obj.name;
	input.onclick = function() {__onclick(this._name); };
	
	input.searchIndex = 0;
	
	input.onkeypress = function(e) {
		var keyCode = (window.event) ? window.event.keyCode : e.charCode;
		var obj     = document.getElementById("ul_"+this._name);
		var l 	    = obj.childNodes.length;
		if ( this.searchIndex >= l ) {
			this.searchIndex = 0;
		}
		
		var letter  = String.fromCharCode(keyCode);
		for ( this.searchIndex; this.searchIndex<l; this.searchIndex++ ) {
			if ( letter.toLowerCase()  == obj.childNodes[this.searchIndex].innerHTML.substr(0,1).toLowerCase() ) {
				obj.childNodes[obj._active].className = "";
				obj.childNodes[this.searchIndex].onclick(true);
				break;
			}
		}
	};
	
	input.onkeydown = function(e) {
		
		var keyCode = (window.event) ? window.event.keyCode : e.keyCode;
		var obj     = document.getElementById("ul_"+this._name);
		var l 	    = obj.childNodes.length;
		var index   = 0;
		var found   = false;
		
		for ( var i=0; i<l; i++ ) {
			if ( obj.childNodes[i].className.toLowerCase() == "activeli" ) {
				index = i;
				break;
			}
		}
		
		switch (keyCode) {
			case 38: // up
				if ( index > 0 ) {
					obj.childNodes[i].className = "";
					obj.childNodes[index-1].onclick(true);
					found = true;
				}
			break;

			case 40: // down
				if ( index+1 < l ) {
					obj.childNodes[i].className = "";
					obj.childNodes[index+1].onclick(true);
					found = true;
				}
			break;

			case 33: // Page Up
			case 36: // Home
				obj.childNodes[i].className = "";
				obj.childNodes[0].onclick(true);
				found = true;
			break;

			case 34: // Page Down
			case 35: // End
				obj.childNodes[i].className = "";
				obj.childNodes[l-1].onclick(true);
				found = true;
			break;
			
			case 13:
				obj.childNodes[index].onclick();
				found = true;
			break;
			
			case 27:
				obj.style.display = "none";
				found = true;
			break;
		}
		if ( is.ie && found == true ) {
			window.event.cancelBubble = true;
			window.event.returnValue = false;
		}

	};
	
	this.div.appendChild(input);
	
	var img = document.createElement("img");
	img.src = "./_images/select.bmp";
	img.className = "elSelecstImg";
	img.style.marginLeft = ie ? "-5px" : "-2px";
	img._name= obj.name;
	img.onclick = function () {__onclick(this._name); };
	this.div.appendChild(img);
	
	var ul = document.createElement("ul");
	ul.id = "ul_"+obj.name;
	ul.className = "elSelect";
	ul._name = obj.name;
	ul.style.width = width + ( ie ? 16 : 14) + "px";
	this.div.appendChild(ul);
	
	var l  = obj.options.length;
	var li = null;
	var option = null;
	var h = 0;
	for( var i=0; i<l; i++ ) {
		option = obj.options[i];
		li = document.createElement("li");
		if ( option.selected ) {
			li.className = "activeLI";
			document.getElementById("ul_text_"+obj.name).value = option.innerHTML;
			ul._active = i;
		}
		else {
			li.className = "elSelect";	
		}
		li.innerHTML = option.innerHTML;
		li._index = i;
		li._name = obj.name;
		li._selectId = obj.id;
		li.onclick = function(keypress) {
			var input  = document.getElementById("ul_text_"+this._name);
			var ul 	   = document.getElementById("ul_"+this._name);
			var select = document.getElementById(this._selectId);
			input.value = this.innerHTML;
			if ( keypress == true ) {
				this.onmouseover();
				ul.scrollTop = this.offsetHeight*this._index;
			}
			else {
				ul.style.display = "none";
			}
			document.getElementById("ul_text_"+this._name).searchIndex = this._index + 1;
			document.getElementById("ul_text_"+this._name).focus();
			select.selectedIndex = this._index;
			this.parentNode._active = this._index;
			if ( !ie ) {
				var evt = document.createEvent("Events");
				evt.initEvent("change", true, true);
				select.dispatchEvent(evt);
			} else {
				select.fireEvent("onchange");
			}

		};
		
		li.onmouseover = function(){
			this.parentNode.childNodes[this.parentNode._active].className = "";
			this.className = "activeLI";
		};
		li.onmouseout  = function(){
			if ( document.getElementById("ul_"+this._name).style.display != "none" )
				this.className = "";
		};
		//alert(is.ie8);
		if (is.ie8) {
			li.style.marginTop = "0px";
		} else if ( ie ) {
			li.style.marginTop = "-4px";
		} 
		
		ul.appendChild(li);
	}
	
	if ( ie || opera ) {
		h = i * 15;
	}
	else {
		h = i * 14;	
	}
	
	if ( i <= 20 ) {
		ul.style.height = h + "px";
		ul.style.overflow = "hidden";
	}

	obj.style.visibility = "hidden";
	input.tabIndex = obj.tabIndex;
};

function addEvent(obj, type, fn) { 
	if ( obj.addEventListener ) {
		obj.addEventListener(type, fn, false);
	}
	else if ( obj.attachEvent ) {
		obj.attachEvent( "on"+type, fn );
	}
}

addEvent(document, 'click', srOnDocumentClick);

function srOnDocumentClick(e) {
	var target = (window.event) ? window.event.srcElement : e.target;
	if ( typeof target._name != "undefined" && activeSelectElement != null ) {
		if ( target._name != activeSelectElement && document.getElementById("ul_"+target._name).style.display != "none" ) {
			document.getElementById("ul_text_"+activeSelectElement).onclick();
		}
	}
	else if ( typeof target._name == "undefined" && activeSelectElement != null ) {
		if ( document.getElementById("ul_"+activeSelectElement).style.display != "none" )
			document.getElementById("ul_text_"+activeSelectElement).onclick();
	}
}