//********************************************************************************
// global variables
//********************************************************************************

var hide = false;

//********************************************************************************
// function for replace select
//********************************************************************************

function selectReplacement(obj)
{
	// hide select
	obj.className += ' replaced';
	// create elements
	var parent = document.createElement('div');
	var span = document.createElement('span');
	var ul = document.createElement('ul');
	var actual = document.createElement('strong');
	parent.style.zIndex = 0;
	parent.className = 'selectReplacement';
	ul.className = 'ulReplacement';
	span.className = 'selectRightArrow';
	var opts = obj.options;
	//search selected items
	for (var i = 0; i < opts.length; i++)
	{
		var selectedOpt;
		if (opts[i].selected)
		{
			selectedOpt = i;
			break;
		} else
		{
			selectedOpt = 0;
		}
	}
	//create elements li
	for (var i = 0; i < opts.length; i++)
	{
		var li = document.createElement('li');
		var txt = document.createTextNode(opts[i].text);
		li.appendChild(txt);
		li.selIndex = opts[i].index;
		li.selectID = obj.id;
		li.onclick = function()
		{
			selectMe(this);
			ul.parentNode.style.zIndex = 0;
			ul.style.display = 'none';
			span.style.zIndex = 0;
		}
		if (i == selectedOpt)
		{
			actual.innerHTML = li.innerHTML;
			li.className = 'selected';
			li.onclick = function()
			{
				ul.id = 'selectOpen';
				this.onclick = function()
				{
					selectMe(this);
					ul.parentNode.style.zIndex = 0;
					ul.style.zIndex = 0;
					span.style.zIndex = 1;
				}
			}
			actual.onclick = function()
			{
				ul.id = 'selectOpen';
			}
			span.onclick = function()
			{
				ul.id = 'selectOpen';
			}
			span.onmouseover = function()
			{
				actual.className = 'hover';
			}
			span.onmouseout = function()
			{
				actual.className = actual.className.replace(new RegExp("hover\\b"), '');
			}
		}
		//add hover efect for IE
		if (window.attachEvent)
		{
			li.onmouseover = function()
			{
				this.className += ' hover';
			}
			actual.onmouseover = function()
			{
				this.className += ' hover';
			}
			li.onmouseout = function()
			{
				this.className = this.className.replace(new RegExp(" hover\\b"), '');
			}
			actual.onmouseout = function()
			{
				this.className = this.className.replace(new RegExp(" hover\\b"), '');
			}
		}
		ul.appendChild(li);
		parent.appendChild(actual);
		parent.appendChild(ul);
		parent.appendChild(span);
	}
	//assigned to parent element create elements
	obj.parentNode.appendChild(parent);
}

//********************************************************************************
// select element li
//********************************************************************************

function selectMe(obj)
{
	var lis = obj.parentNode.getElementsByTagName('li');
	var parentUl = obj.parentNode;
	var parentDiv = parentUl.parentNode;
	var actual = parentDiv.getElementsByTagName('strong');
	for (var i = 0; i < lis.length; i++)
	{
		if (lis[i] != obj)
		{
			lis[i].className='';
			lis[i].onclick = function()
			{
				selectMe(this);
				obj.parentNode.id = 'selectOpen';
				var parent = obj.parentNode;
				parent.style.display = 'none';
				parent.parentNode.style.zIndex = 0;
				actual[0].style.zIndex = 1;
			}
		}
		else
		{
			setVal(obj.selectID, obj.selIndex);
			obj.className = 'selected';
			actual[0].innerHTML = obj.innerHTML;
			obj.parentNode.id = '';
			
			obj.onclick = function()
			{
				obj.parentNode.id = 'selectOpen';				
				this.onclick = function()
				{
					selectMe(this);
					obj.parentNode.id = 'selectOpen';
					var parent = obj.parentNode;
					parent.style.display = 'none';
					parent.parentNode.style.zIndex = 0;
					actual[0].style.zIndex = 1;
				}
			}
		}
	}
}

//********************************************************************************
//set select item by selected element li
//********************************************************************************

function setVal(objID, selIndex)
{
	var obj = getEl(objID);
	obj.selectedIndex = selIndex;
}

//********************************************************************************
//search all selects on page and call function selectReplacement
//********************************************************************************

function setForm()
{
	var s = document.getElementsByTagName('select');
	for (var i = 0; i < s.length; i++)
	{
		selectReplacement(s[i]);
	}
}

//********************************************************************************
// function for delete element
//********************************************************************************

function delEl(source)
{
	while(source.hasChildNodes())
	{
		source.removeChild(source.lastChild);
	}
}

//********************************************************************************
// function for select options
//********************************************************************************

function setOption(el,i)
{
	var i = i + 1;
	var obj = getEl(el);
	obj.selectedIndex = i;
	
	var opts = obj.options;
	var parent = obj.parentNode;
	var strong = parent.getElementsByTagName('strong');
	for (var x = 0; x < opts.length; x++)
	{
		if (x == i) {
			for (var y = 0 ; y < strong.length; y++)
			{
				strong[y].innerHTML = obj.options[x].text;
			}
		}
	}
}

function closeSel()
{
	hide = false;

	var ul = document.getElementsByTagName('ul');
	var uls = new Array();
	for (var i = 0; i < ul.length; i++)
	{
		if (ul[i].className == 'ulReplacement')
		{
			uls.push(ul[i]);
		}
	}
	for (var y = 0; y < uls.length; y++)
	{
		if (uls[y].id == 'selectOpen')
		{
			hide = true;
		}
	}
}

//********************************************************************************
// function for getElementById
//********************************************************************************

function getEl(el)
{
	obj = document.getElementById(el);
	if (obj != null)
		return obj;
}

//********************************************************************************
// if window is loaded then call function for replace select
//********************************************************************************

window.onload = function()
{
	
	(document.all && !window.print) ? null : setForm();

	var body = document.body;
	var ul = document.getElementsByTagName('ul');
	var span = document.getElementsByTagName('span');
	
	//function for hide elements li
	body.onclick = function()
	{
		//delay 1ms than set variable hide and allow the hide elements li
		window.setTimeout('closeSel()',1);
		
		if (hide == true)
		{
			for (var i = 0; i < ul.length; i++)
			{
				if (ul[i].id == 'selectOpen')
				{
					ul[i].id = '';
					ul[i].style.display = 'none';
					ul[i].style.zIndex = 0;
					ul[i].parentNode.style.zIndex = 0;
					for (var x = 0; x < span.length; x++)
					{
						if (span[x].className == 'selectRightArrow')
						{
							span[x].style.zIndex = 1;
						}
					}
				}
			}
		}
		else {
			for (var y = 0; y < ul.length; y++)
			{
				if (ul[y].id == 'selectOpen')
				{
					ul[y].style.display = 'block';
					ul[y].style.zIndex = 1;
					ul[y].parentNode.style.zIndex = 1;
					ul[y].style.width = ul[y].parentNode.offsetWidth-1 + 'px';
					if (ul[y].offsetHeight > 150)
					{
						ul[y].style.height = '150px';
					}
					for (var z = 0; z < span.length; z++)
					{
						if (span[z].className == 'selectRightArrow')
						{
							span[z].style.zIndex = 0;
						}
					}
				}
			}
		}
	}
}