// Класс нестандартных элементов

function element_class()
{
	// Замена всех элементов
	this.start = function()
	{
		var list = document.getElementsByTagName('select');
		var i_counter;
		if (list.length) 
		  for(i_counter=0; i_counter<list.length; i_counter++) {
			  if(get_attribute (list[i_counter], 'ns'))
				  this.element_select(list[i_counter]);
		  }
		
		add_event(document, 'click', this.document_click);
	}
	// Клик по документу
	this.document_click = function(e)
	{
		var target = (window.event) ? window.event.srcElement : e.target;
	
		if(document.nsselect_expanded)
		{
			//принадлежит ли соответствующий li списку заменителю select
			if((target.srIndex || target.srIndex === 0) && document.nsselect_expanded == target.parentNode.parentNode	)
				document.nsselect_expanded.srCollapse(target);
			else {
				document.nsselect_expanded.srCollapse();
			}
		}
		else
		{
			if(target.is_ns==true)
				target.parentNode.srExpand();
		}
	}
	
	// Элемент Select
	this.element_select = function(sel)
	{
		//а вдруг мы на осле :)
		var ie6 = (navigator.userAgent.search('MSIE 6.0') != -1);
		
		var div = document.createElement('div');
		//список заменяющий select, свернутый, не в фокусе
		div.className = 'nsselect_list nsselect_collapsed nsselect_blur';
		
		//связь между ul и select
		div.srSelect = sel;
		sel.srReplacement = div;
		
		//устанавливаем для элемента select
		//класс показывающий, что он замещен
		sel.className += ' nsselect_replaced';
		
		//меняем класс элемента ul
		//при получении и потере фокуса
		//элементом select
		sel.onfocus = function() { this.srReplacement.className = this.srReplacement.className.replace(/[\s]?nsselect_blur/, ' nsselect_focus'); }
		
		sel.onblur = function() {
			//this.srReplacement.srCollapse();
			this.srReplacement.className = this.srReplacement.className.replace(/[\s]?nsselect_focus/, ' nsselect_blur');
		}
		
		//каждый браузер болеет по своему
		//поэтому обрабатываем и onchange и onkeypress
		sel.onchange = function()
		{
			var div = this.srReplacement;
			var ul = div.childNodes[1];
			div.srSelectLi(ul.childNodes[this.selectedIndex]);
		}
		
		sel.onkeypress = function(e)
		{
			var i = this.selectedIndex;
			var div = this.srReplacement;
			var ul = div.childNodes[1];
			switch (e.keyCode) {
				case 9:
					this.srReplacement.srCollapse();
				break;
		
				case 37: // влево
				case 38: // вверх
					if (i - 1 >= 0)
						div.srSelectLi(ul.childNodes[i - 1]);
				break;
		
				case 40: // вниз
					if(e.altKey)
					{
						//ul.srExpand();
						//break;
					}
				case 39: // вправо
		
					if (i + 1 < ul.childNodes.length)
						div.srSelectLi(ul.childNodes[i + 1]);
				break;
		
				case 33: // Page Up
				case 36: // Home
					div.srSelectLi(ul.firstChild);
				break;
		
				case 34: // Page Down
				case 35: // End
					div.srSelectLi(ul.lastChild);
				break;
			}
		}
		
		//меняем класс элемента ul
		//при наведении на него мышки
		div.onmouseover = function() { this.className += ' nsselect_hover'; }
		
		div.onmouseout = function() { this.className = this.className.replace(/[\s]?nsselect_hover/, ''); }
		
		div.srSelectLi = function(li)
		{
			var ul = li.parentNode;
			var div = ul.parentNode;
			var span = ul.previousSibling;
		
			//если уже есть выбранный элемент
			//то назначаем снимаем выделение
			if(div.srSelectesIndex != null)
				ul.childNodes[div.srSelectesIndex].className = '';
		
			//запоминаем индекс выбранного элемента
			div.srSelectesIndex = li.srIndex;
		
			//устанавливаем для выбранного элемента
			//класс srSelectedLi
			ul.childNodes[li.srIndex].className = 'srSelectedLi';
			
			// Ставим выбраный элемент в окошко
			span.removeChild(span.firstChild);
			span.appendChild(document.createTextNode(li.innerHTML));
			return li.srIndex;
		}
		
		div.srExpand = function()
		{
			if(!this.nsselect_expanded)
			{
				if(document.nsselect_expanded)
					document.nsselect_expanded.srCollapse();
		
				document.nsselect_expanded = this;
		
				//разворачиваем список
				this.className  = this.className.replace(/[\s]?nsselect_collapsed/, ' nsselect_expanded');
				this.nsselect_expanded = true;
				
				//при раскрытии элемента передаем фокус
				//соответствующему select
				this.srSelect.focus();
		
				//для особо одаренного браузера
				//разворачиваем список особенным способом
			/*	if(ie6) 
				{
					var node = this.firstChild;
					var offset = 0;
					var height = node.clientHeight;
					while(node)
					{
						node.style.position = 'absolute';
						node.style.top = offset;
						offset += height; 
						node = node.nextSibling;
					}
				}*/
			}
		}
		
		div.srCollapse = function(li)
		{	
			if(this.nsselect_expanded)
			{
				document.nsselect_expanded = null;
		
				//выбираем элемент списка на который кликнул пользователь
				//и устанавливаем соответсвующий индекс выбранного элемента
				//для спрятанного элемента select
				if(li) {
					this.srSelect.selectedIndex = this.srSelectLi(li);
					//при клике на элементы списка
					//соответствующий спрятанный select
					//теряет фокус нужно вернуть на место
					this.srSelect.focus();
				}
				
	
		
				//сворачиваем список
				this.className = this.className.replace(/[\s]?nsselect_expanded/, ' nsselect_collapsed');
				this.nsselect_expanded = false;
		
				//для особо одаренного браузера
				//сворачивам список особенным способом
				/*if(ie6)
				{
					var node = this.firstChild;
					while(node)
					{
						node.style.position = '';
						node = node.nextSibling;
					}
				}*/
			}
		}
		
		var ul = document.createElement('ul');
		var options = sel.options;
		var len = options.length;
		
		for(var i = 0; i < len; i++)
		{
			//для каждого элемента option
			//создаем соответствущий li
			var li = document.createElement('li');
			li.appendChild(document.createTextNode(options[i].text));
		
			//в каждом элементе списка
			//храним индекс соответствующего
			//элемента option
			li.srIndex = i;
		
			//псевдо класс hover в IE работает только для ссылок
			//поэтому будем менять класс при наведении мышки
			li.onmouseover = function() { this.className += ' srHoverLi'; }
		
			li.onmouseout = function() { this.className = this.className.replace(/[\s]?srHoverLi/, ''); }
		
			ul.appendChild(li);
		}
		
		//если по умолчанию не выбран никакой элемент
		//выбираем первый
		if(sel.selectedIndex == null)
			sel.selectedIndex = 0;
				
		// Добавляем список и выбраный элемент
		var span = document.createElement('span');
		span.is_ns = true;
		div.appendChild(span);
		div.appendChild(ul);
		
		//устанавливаем элемент выбранный по умолчанию
		span.appendChild(document.createTextNode(sel.options[sel.selectedIndex].text));		
		div.srSelectLi(ul.childNodes[sel.selectedIndex]);
		
		//вставляем созданный список
		//перед заменяемым select
		sel.parentNode.insertBefore(div, sel);
	}
}

var ns_element = new element_class();