function jsScrollbar (o, s, a, ev)
{
	var self = this;
	this.reset = function () {
		//Arguments that were passed
		this._parent = o;
		this._src    = s;
		this.auto    = a ? a : false;
		this.eventHandler = ev ? ev : function () {};
		//Component Objects
		this._up   = this._findComponent("scrollbar-up", this._parent);
		this._down = this._findComponent("scrollbar-down", this._parent);
		this._yTrack  = this._findComponent("scrollbar-track", this._parent);
		this._yHandle = this._findComponent("scrollbar-handle", this._yTrack);
		
		//Height and position properties
		this._trackTop = findOffsetTop(this._yTrack);
		this._trackHeight  = this._yTrack.offsetHeight;
		this._handleHeight = this._yHandle.offsetHeight;
		this._x = 0;
		this._y = 0;
		//Misc. variables		
		this._scrollDist  = 5;
		this._scrollTimer = null;
		this._selectFunc  = null;
		this._grabPoint   = null;
		this._tempTarget  = null;
		this._tempDistX   = 0;
		this._tempDistY   = 0;
		this._disabled    = false;		
		
		this._ratio = (this._src.totalHeight - this._src.viewableHeight)/(this._trackHeight - this._handleHeight);
		
		this._yHandle.ondragstart  = function () {return false;};
		this._yHandle.onmousedown = function () {return false;};
		this._addEvent(this._src.content, "mousewheel", this._scrollbarWheel);
		this._removeEvent(this._parent, "mousedown", this._scrollbarClick);
		this._addEvent(this._parent, "mousedown", this._scrollbarClick);				
		
		this._src.reset();

		with (this._yHandle.style) {
			top  = "0px";
			left = "0px";
		}
		this._moveContent();
		if (this._src.totalHeight < this._src.viewableHeight) {
			this._disabled = true;
			this._yHandle.style.visibility = "hidden";
			this._up.style.visibility = "hidden";
			this._down.style.visibility = "hidden";
			this._yTrack.style.visibility = "hidden";
			if (this.auto) this._parent.style.visibility = "hidden";
		} else {
			this._disabled = false;
			this._yHandle.style.visibility = "inherit";
			this._up.style.visibility = "inherit";
			this._down.style.visibility = "inherit";
			this._yTrack.style.visibility = "inherit";
			this._parent.style.visibility  = "inherit";
		}		
	
	};
	this._addEvent = function (o, t, f) {
		if (o.addEventListener) o.addEventListener(t, f, false);
		else if (o.attachEvent) o.attachEvent('on'+ t, f);
		else o['on'+ t] = f;
	};
	this._removeEvent = function (o, t, f) {
		if (o.removeEventListener) o.removeEventListener(t, f, false);
		else if (o.detachEvent) o.detachEvent('on'+ t, f);
		else o['on'+ t] = null;
	};
	this._findComponent = function (c, o) {
		var kids = o.childNodes;
		for (var i = 0; i < kids.length; i++) {
			if (kids[i].className && kids[i].className == c) {
				return kids[i];
			}
		}
	};
	//Thank you, Quirksmode
	function findOffsetTop (o) {
		var t = 0;
		if (o.offsetParent) {
			while (o.offsetParent) {
				t += o.offsetTop;
				o  = o.offsetParent;
			}
		}
		return t;
	};
	this._scrollbarClick = function (e) {
		if (self._disabled) return false;
		
		e = e ? e : event;
		if (!e.target) e.target = e.srcElement;
		
		if (e.target.className.indexOf("scrollbar-up") > -1) self._scrollUp(e);
		else if (e.target.className.indexOf("scrollbar-down") > -1) self._scrollDown(e);
		else if (e.target.className.indexOf("scrollbar-track") > -1) self._scrollTrack(e);
		else if (e.target.className.indexOf("scrollbar-handle") > -1) self._scrollHandle(e);
		
		self._tempTarget = e.target;
		self._selectFunc = document.onselectstart;
		document.onselectstart = function () {return false;};
		
		self.eventHandler(e.target, "mousedown");
		self._addEvent(document, "mouseup", self._stopScroll, false);
		
		return false;
	};
	this._scrollbarDrag = function (e) {
		e = e ? e : event;
		var t = parseInt(self._yHandle.style.top);
		var v = e.clientY + document.body.scrollTop - self._trackTop;
		with (self._yHandle.style) {
			if (v >= self._trackHeight - self._handleHeight + self._grabPoint)
				top = self._trackHeight - self._handleHeight +"px";
			else if (v <= self._grabPoint) top = "0px";
			else top = v - self._grabPoint +"px";
			self._y = parseInt(top);
		}
		
		self._moveContent();
	};
	this._scrollbarWheel = function (e) {
		e = e ? e : event;
		var dir = 0;
		if (e.wheelDelta >= 120) dir = -1;
		if (e.wheelDelta <= -120) dir = 1;
		
		self.scrollBy(0, dir * 20);
		e.returnValue = false;
	};
	this._startScroll = function (x, y) {
		this._tempDistX = x;
		this._tempDistY = y;
		this._scrollTimer = window.setInterval(function () {
			self.scrollBy(self._tempDistX, self._tempDistY); 
		}, 40);
	};
	this._stopScroll = function () {
		self._removeEvent(document, "mousemove", self._scrollbarDrag, false);
		self._removeEvent(document, "mouseup", self._stopScroll, false);
		
		if (self._selectFunc) document.onselectstart = self._selectFunc;
		else document.onselectstart = function () { return true; };
		
		if (self._scrollTimer) window.clearInterval(self._scrollTimer);
		self.eventHandler (self._tempTarget, "mouseup");
	};
	this._scrollUp = function (e) {this._startScroll(0, -this._scrollDist);};
	this._scrollDown = function (e) {this._startScroll(0, this._scrollDist);};
	this._scrollTrack = function (e) {
		var curY = e.clientY + document.body.scrollTop;
		this._scroll(0, curY - this._trackTop - this._handleHeight/2);
	};
	this._scrollHandle = function (e) {
		var curY = e.clientY + document.body.scrollTop;
		this._grabPoint = curY - findOffsetTop(this._yHandle);
		this._addEvent(document, "mousemove", this._scrollbarDrag, false);
	};
	this._scroll = function (x, y) {
		if (y > this._trackHeight - this._handleHeight) 
			y = this._trackHeight - this._handleHeight;
		if (y < 0) y = 0;
		
		this._yHandle.style.top = y +"px";
		this._y = y;
		
		this._moveContent();
	};
	this._moveContent = function () {		
		this._src.scrollTo(0, Math.round(this._y * this._ratio));
	};
	
	this.scrollBy = function (x, y) {
		this._scroll(0, (-this._src._y + y)/this._ratio);
	};
	this.scrollTo = function (x, y) {
		this._scroll(0, y/this._ratio);
	};
	this.swapContent = function (o, w, h) {
		this._removeEvent(this._src.content, "mousewheel", this._scrollbarWheel, false);
		this._src.swapContent(o, w, h);
		this.reset();
	};
	
	this.reset();
};

function jsScroller (o, w, h) {
	var self = this;
	var list = o.getElementsByTagName("div");
	for (var i = 0; i < list.length; i++) {
		if (list[i].className.indexOf("scroller-container") > -1) {
			o = list[i];
		}
	}
	
	//Private methods
	this._setPos = function (x, y) {
		if (x < this.viewableWidth - this.totalWidth) 
			x = this.viewableWidth - this.totalWidth;
		if (x > 0) x = 0;
		if (y < this.viewableHeight - this.totalHeight) 
			y = this.viewableHeight - this.totalHeight;
		if (y > 0) y = 0;
		this._x = x;
		this._y = y;
		with (o.style) {
			left = this._x +"px";
			top  = this._y +"px";
		}
	};
	
	//Public Methods
	this.reset = function () {
		this.content = o;
		this.totalHeight = o.offsetHeight;
		this.totalWidth	 = o.offsetWidth;
		this._x = 0;
		this._y = 0;
		with (o.style) {
			left = "0px";
			top  = "0px";
		}
	};
	this.scrollBy = function (x, y) {
		this._setPos(this._x + x, this._y + y);
	};
	this.scrollTo = function (x, y) {
		this._setPos(-x, -y);
	};
	this.stopScroll = function () {
		if (this.scrollTimer) window.clearInterval(this.scrollTimer);
	};
	this.startScroll = function (x, y) {
		this.stopScroll();
		this.scrollTimer = window.setInterval(
			function(){ self.scrollBy(x, y); }, 40
		);
	};
	this.swapContent = function (c, w, h) {
		o = c;
		var list = o.getElementsByTagName("div");
		for (var i = 0; i < list.length; i++) {
			if (list[i].className.indexOf("scroller-container") > -1) {
				o = list[i];
			}
		}
		if (w) this.viewableWidth  = w;
		if (h) this.viewableHeight = h;
		this.reset();
	};
	
	//variables
	this.content = o;
	this.viewableWidth  = w;
	this.viewableHeight = h;
	this.totalWidth	 = o.offsetWidth;
	this.totalHeight = o.offsetHeight;
	this.scrollTimer = null;
	this.reset();
};

//############################################################################################

$(document).ready(function()
{
	/* скрипт находит все селекты на странице и заменяет их на спец конструкции */
	$("select").each(function(num)
	{
		// num - номер селекта на странице
		var selectOrCombobox = 8; 	// если в селекте optionов <= флага selectOrCombobox, тогда селект без прокрутки, больше - добавляется прокрутка
		var kolOptions=$(this).children().length; // число option в select
		var className=this.className;//  имя класса текущего селекта
		var selName=this.name;		 //  name селекта
		var selID=this.id;			 // id селекта       	
		// определяем тип селекта
		if(kolOptions>selectOrCombobox)
		{
			$(this).css("display","none"); // скрываем select чтобы замена визуально прошла более гладко
			// чтобы верхние селекты нормально перекрывали нижние, автоматически добавляем z-index в порядке убывания
			// для уникальности id элементов селектов используется num - порядковый номер селекта на странице
			$(this).before("<div class='selectArea "+className+"' style='z-index:"+(100-num)+"'>"+
							"<div class='left'></div>"+ // левая часть select
							"<div class='center_a'></div>"+ // правая часть (стрелка) select
							"<div class='optionsDivInvisible' id='optInvis_"+num+"'>"+ // контейнер для option
								"<div class='scrollbar-container' id='scroll_container_"+num+"'>"+ // контейнер для скроллинга   
									"<div class='scrollbar-up'></div>"+ // стрелка вверх для прокрутки
									"<div class='scrollbar-down' id='scrollbar-down'></div>"+ // стрелка вниз
									"<div class='scrollbar-track' id='scrollbar-track'><b class='scrollbar-handle' id='scrollbar-handle'></b></div>"+ // трэк скроллинга
									"<div class='container2' id='container'>"+ 
										"<div class='scroller-1' id='scroller_"+num+"'>"+
										"<div class='scroller-container' id='"+selID+"_fake'></div>"+
										"</div>"+
									"</div>"+
								"</div>"+
							"</div>"+
							"<input id='v"+selID+"' />"+ // видимый текст select
							"<input type='hidden' name='"+selName+"' id='"+selID+"' />"+ // значение select
						"</div>");
			// заполняем <option>
			var containerFofSel=$("#scroller_"+num+" > div");
			var selArr=$(this).children(); // массив всех option селекта
			var sel_i; // текущий номер option
			for(var i=0;i<kolOptions;i++) // преобразовываем все option в span
			{							  // name spana - значение option
										  // текст spana - тект option
				sel_i = selArr.eq(i);
				containerFofSel.append("<span name='"+sel_i.val()+"'>"+sel_i.text()+"</span>");
			}
			// начальное значение селекта  
			$("#"+selID).val($(this).children("option:selected").val());
			// начальный текст селекта
			$("#v"+selID).val($(this).children("option:selected").text());
			// инициализация скроллинга
			var id_1='scroll_container_'+num;
			var id_2='scroller_'+num;
			scroller = new jsScroller(document.getElementById(id_2), 0, 143);
			scrollbar = new jsScrollbar(document.getElementById(id_1), scroller, false, false);
			// скрывем новый список option
			$("#optInvis_"+num).css("display","none").css("visibility","visible");
			 // удаляем обычный селект  
			$(this).remove();
		}
		// селект без прокрутки  
		else 
		{
			// формируем костяк
			$(this).before("<div class='selectArea "+className+"' style='z-index:"+(100-num)+"'>"+
						"<div class='left'></div>"+
						"<div class='center_a'></div>"+
						"<div class='optionsDivInvisible' id='"+selID+"_fake'></div>"+
						"<input type='text' readonly='readonly' name='v"+selName+"' id='v"+selID+"' />"+
						"<input type='hidden' name='"+selName+"' id='"+selID+"' />"+
				"</div>");
			//  заполняем <option>
			var sel_i; // текущий номер option
			var selArr=$(this).children(); // массив всех option селекта
			for(var i=0;i<kolOptions;i++)
			{
				sel_i = selArr.eq(i);
				// name spana - значение option
				// текст spana - тект option
				$("#"+selID+"_fake").append("<span name='"+sel_i.val()+"'>"+sel_i.text()+"</span>");
			}
			// начальное значение селекта 
			$("#"+selID).val($(this).children("option[@selected]").eq(0).val());
			// начальный текст селекта
			$("#v"+selID).val($(this).children("option[@selected]").eq(0).text());
			// скрываем список option
			$("#"+selID+"_fake").css("display","none").css("visibility","visible");
			//  удаляем обычный селект
			$(this).remove();
		}
	});
	// показываем/скрываем список option
	$('div.center_a').mousedown(function()
	{
		var optionsDivInvisible = this.parentNode.getElementsByTagName('div').item(2); // контейнер для option
		if($(optionsDivInvisible).css("display")=="none") $(optionsDivInvisible).slideDown(200); // если контейнер скрыт, показываем 
		else $(optionsDivInvisible).slideUp(200); // иначе скрываем 	
		// если это select со скроом, обновляем скролл   
		var inp=this.parentNode.getElementsByTagName('input').item(0);
		if(!$(inp).attr("readonly")) 
		{
			$(inp).focus(); $(inp).select(); // устанавливаем фокус на селект, чтобы можно было отбирать по первым буквам
			// обновляем scroll
			var id_1=this.parentNode.getElementsByTagName('div').item(3).id;
			var id_2=this.parentNode.getElementsByTagName('div').item(8).id;
			scroller  = new jsScroller(document.getElementById(id_2), 0, 143);
			scrollbar = new jsScrollbar(document.getElementById(id_1), scroller, false, false);
		}
	});
	// дубляж показа/скрытия option при клике на input selectArea (для combobox)
	$('div.selectArea > input').mousedown(function()
	{	
	  if($(this.parentNode.getElementsByTagName('div').item(2)).css("display")=="none")
	  {
	
		$(this.parentNode.getElementsByTagName('div').item(2)).slideDown(200);
		var id_1=this.parentNode.getElementsByTagName('div').item(3).id;
		var id_2=this.parentNode.getElementsByTagName('div').item(8).id;
		scroller  = new jsScroller(document.getElementById(id_2), 0, 143);
		scrollbar = new jsScrollbar(document.getElementById(id_1), scroller, false, false);
	  }
	});
	// выбор позиции в списке option
		// выбор позиции в списке option
	$('div.optionsDivInvisible > span').mousedown(
	function()
	{
		$(this.parentNode.parentNode.getElementsByTagName('input').item(1)).attr("value",$(this).attr("name")); //  значение (value) option заносим в input
		$(this.parentNode.parentNode.getElementsByTagName('input').item(0)).attr("value",$(this).text()); // текст для отображения в селекте
		$(this.parentNode).css("display","none"); //  скрываем выпадающий список
	});
	//  подсветка оптиона при наведении (т.к. ие6 пониает hover только на ссылках)
	$('div.optionsDivInvisible > span').mouseover(function(){this.className="over";});
	$('div.optionsDivInvisible > span').mouseout(function(){this.className="";});
	// функция обработки клика на элеменах списка для селекта с прокруткой
	$('div.scroller-container > span').click(function()
	{
			
		var optionsDivInVisible = $(this).parents("div.optionsDivInvisible");
		var hiddenInput = optionsDivInVisible.parent().find('input').eq(1); //скрытый ипут со значением селекта
		var valueOption = $(this).attr("name"); //значение optiona
		var textOption = $(this).text(); // текст optiona
		var inputInSelect = optionsDivInVisible.parent().find("input").eq(0); // поле, которое содержит текст селекта
		
		inputInSelect.val(textOption); // обновляем текст селекта
		if(hiddenInput) hiddenInput.val(valueOption); // добавляем значение селекта в скрытый input
		optionsDivInVisible.css("display","none"); // скрываем выпадающий список
	});	
	// hover option for ie
	$('div.scroller-container > span').mouseover(function(){this.className="over";});
	$('div.scroller-container > span').mouseout(function(){this.className="";});
	//  скрываем список option когда убираем курсор с селекта
	$('div.selectArea').mouseout(function(e)
	{
		var x = 0, y = 0; // объявляем и обнуляем координаты курсора  
    	if (!e) e = window.event;
   		if (e.pageX || e.pageY)
		{
        	x = e.pageX;
        	y = e.pageY;
    	}
		else
		if (e.clientX || e.clientY)
		{
        	x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
        	y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
    	}
 		var obj = this;
		var posx=findPosX(obj);
		var posy=findPosY(obj);
		var length_obj = obj.offsetWidth-2;
		var left=this.getElementsByTagName('div')[0].offsetWidth;
		var h = this.getElementsByTagName('div')[1].offsetHeight;
		var minus;
		if($.browser.msie) {minus=0;min2=1;left-=1;} else {minus=2;min2=1;left-=3;}
		var h1 = this.getElementsByTagName('div')[2].offsetHeight-minus;
		// если курсор левее, или выше, или правее, или вне списка оптионов - скрываем список
		if((x<=posx+left || x>posx+length_obj+min2 || y<posy+2 || y>posy+h+h1) && $(this).children('div.optionsDivInvisible').css("display")=="block"){$(this).children('div.optionsDivInvisible').slideUp(200);}
	});
	//  отбор option о первым буквам
	$('div.selectArea > input').keyup(function()
	{
		var id_1=this.parentNode.getElementsByTagName('div').item(3).id;
		//id blocka scroll
		var id_2=this.parentNode.getElementsByTagName('div').item(8).id;
		//cicl proverka na sootvetstvie vvedenim simvolam
		var col=$("#"+id_2+" > div > span").length; // к-во всех option
		var span=$("#"+id_2+" > div > span"); // массив всех option
		var val_input=$(this).val().toUpperCase(); // переводим все символы в один регистр      
		for(i=0;i<col;i++)
		{
			var val_list=span.eq(i).text().toUpperCase();
			var pos=val_list.indexOf(val_input);
			if(pos!=0) span.eq(i).css("display","none"); // если нужной последовательности в слове нет, скрываем option
			else span.eq(i).css("display","block");
		}
		//  обновляем скролл
		scroller  = new jsScroller(document.getElementById(id_2), 0, 143);
		scrollbar = new jsScrollbar(document.getElementById(id_1), scroller, false, false);
	});
	function findPosY(obj)
	{
	  var posTop = 0;
	  while (obj.offsetParent) {posTop += obj.offsetTop; obj = obj.offsetParent;}
	  return posTop;
	}
	function findPosX(obj)
	{
	  var posLeft = 0;
	  while (obj.offsetParent) {posLeft += obj.offsetLeft; obj = obj.offsetParent;}
	  return posLeft;
	}
});