HTMLSelect = function(selector, callback) {
	var __this = this;
	$('BODY').bind('click',function(e){
		var t = e.target;
		if(t.className != 'HTMLselect') __this.selectCloseAll();
	})
	$(window).resize(function(){__this.selectCloseAll();});
	$(selector).each(function(){
		if(!this.id.length) return;
		var _this = this;
		var id = '__select_' + this.id;
		var s = document.createElement('div');
		s.id = id + '_value';
		//s.style.display = 'inline';
		s.style.whiteSpace = 'nowrap';
		s.className = 'HTMLselect';
		var t = document.createTextNode(this.options[this.selectedIndex].text);
		s.appendChild(t);
		$(s).click(function(){__this.toggleSelectOptions(id)});
		this.parentNode.insertBefore(s,this);
		var so = document.createElement('div');
		so.id = id + '_options';
		so.style.position = 'absolute';
		//so.style.left = '-1000px';
		so.style.left = '1px';
		//so.style.top = '0px';
		so.style.display = 'none';
		so.className = 'HTMLselectO';
		for (var i=0; i<this.options.length; i++) if(this.options[i].tagName.toLowerCase() == 'option') {
			var o = document.createElement('span');
			o.id = id + '_value_' + this.options[i].value;
			var v = this.options[i].value;
			var t = document.createTextNode(this.options[i].text);
			o.appendChild(t);
			$(o).click(function(){
				__this.selectSelectValue(_this.id,s.id,id,this.id.replace(id + '_value_',''),this.innerHTML);
				if(typeof(_this.onchange)=='function') _this.onchange();
			});
			$(o).mouseover(function(){this.className = 'HTMLselectOM';})
			$(o).mouseout(function(){this.className = '';})
			so.appendChild(o);
		}
		this.parentNode.insertBefore(so,this);
		var h = document.createElement('input');
		h.type = 'hidden';
		h.id = this.id;
		h.name = this.name;
		h.value = this.options[this.selectedIndex].value;
		var p = this.parentNode;
		p.removeChild(this);
		p.insertBefore(h,s);

		//Call-back function when select changes
		if (typeof(callback) !== 'undefined')
			__this.change_callback = callback;
	});
}

HTMLSelect.prototype.selectOffset = function(el) {
	var el_orig = el;
	if (el.offsetParent) {
		curleft = parseInt(el.offsetLeft)
		curtop = parseInt(el.offsetTop)
		left_txt = curleft;
		top_txt = curtop;
		while (el = el.offsetParent) {
			if(el.style.position == 'absolute'){
				break;
			}
			left_txt += ' + ' + parseInt(el.offsetLeft);
			top_txt += ' + ' + parseInt(el.offsetTop);
			curleft += parseInt(el.offsetLeft);
			curtop += parseInt(el.offsetTop);
		}
	}

	//Is our box inside JScroll container? If no, do not apply patch
	var yep = false;
    el = el_orig;
	while (el = el.parentNode) {

			if($(el).hasClass('jScrollPaneContainer'))
			{
				yep = true;
				break;
			}
	}

    if (yep) //Yep, inside - apply patch
	{
		var scroll = $('.jScrollPaneContainer');
        var rr_left, rr_top;

		if(typeof (scroll[0].getClientRects) == 'function')
		{
			var rr = scroll[0].getClientRects();

	        rr_left = rr[0].left;
	        rr_top = rr[0].top;
		}
		else
		{
	        rr_left = scroll[0].offsetLeft;
	        rr_top = scroll[0].offsetTop;
		}

		if (scroll[0].Jscroll == 'no_scroll')
		{
	    	curtop -= rr_top;
	    	curleft -= rr_left;
		}


	}

	return {'t':curtop,'l':curleft};
}

HTMLSelect.prototype.toggleSelectOptions = function(id) {
	var el = $('#'+id+'_options')[0];
	var open = (el.style.display == 'block');
	if(open) $(el).fadeOut('fast');
	else {
		//el.style.left = '-1000px';
		el.style.left = '1px';
		el.style.display = 'block';
		if (!$.browser.msie)
			el.style.width = '';
		var v = $('#'+id+'_value')[0];
		var tl = this.selectOffset(v);
		var l = tl.l;
		var t = tl.t + v.offsetHeight + 1;
		var b = $('BODY')[0];
		var w = b.scrollWidth;
		var h = b.clientHeight;
		if(el.offsetHeight > 100) {
			el.style.width = el.offsetWidth + 20 + 'px';
			el.style.height = '100px';
			el.style.overflow = 'auto';
		}
		if(l + el.offsetWidth >= w) l = w - el.offsetWidth;
		if(t + el.offsetHeight >= h) t = h - el.offsetHeight;
		el.style.display = 'none';
//		el.style.left = l;
//		el.style.top = t;
		$(el).fadeIn('fast');
	}
}

HTMLSelect.prototype.selectSelectValue = function(id,iid,sid,value,text) {
	$("#" + id)[0].value = value;
	var t = document.createTextNode(text);
	var v = $("#" + iid)[0];
	while (c = v.lastChild) v.removeChild(c);
	v.appendChild(t);
	this.toggleSelectOptions(sid);

	if (typeof(this.change_callback) !== 'undefined')
	{
			this.change_callback(value);
	}


}

HTMLSelect.prototype.selectCloseAll = function() {
	$("DIV.HTMLselectO").each(function(){ $(this).fadeOut('fast'); });
}