jQuery(document).ready(function($) {
	var SelectisOpen = false;
	var posSpanZ = 9999;
	var ClientWidth = new Array();
	function ChangeSomeSelectStyle(objs)
	{
		for(var i = 0; i < objs.length; i++)
		{
			var obj = document.getElementById(objs[i]);
			if(obj)
			{
				ClientWidth.push(obj.offsetWidth);
				obj.style.display = "none";		//hide item;
				CreatElement(obj,i);			//create element;
			}
		}
	}
	function CreatElement(selectObj,i)
	{
		var style = selectObj.className.replace(/selectStyle/,"");		//get style
		
		var parentSpan = document.createElement("span");
		var parentSpanWidth = selectObj.style.width ? selectObj.style.width : ClientWidth[i] + "px";		//use style width or css width
		parentSpan.className = "parentSpanStyle" + style;		//use which style
		SetDefaultStyle(parentSpan,"absolute","0","",posSpanZ,"block","hidden","","",parentSpanWidth,"22px","")
		
		var posSpan = document.createElement("span");
		posSpan.className = "posSpanStyle" + style;		//use which style
		var posSpanPadding = "0 0 0 " + (parseInt(parentSpanWidth.replace("px","")) + 0) + "px";
		SetDefaultStyle(posSpan,"relative","","",posSpanZ,"","","0 0",posSpanPadding,"","","")
		posSpanZ--; 
		
		var firstChilSpan = document.createElement("span");
		firstChilSpan.innerHTML = selectObj.options[selectObj.options.selectedIndex].text;		//set the default value;
		firstChilSpan.className = "firstChildSpanStyle" + style;
		SetDefaultStyle(firstChilSpan,"","","","","block","hidden","","","100%","","22px")
		
		//if(navigator.userAgent.indexOf("Chrome") > 0){ posSpan.innerHTML = "&nbsp;";posSpan.style.marginRight = "-8px"; parentSpan.style.top = "0"; }
		posSpan.appendChild(parentSpan);
		parentSpan.appendChild(firstChilSpan);
		InsertOptions(selectObj,parentSpan,style);		//insert select options item;
		firstChilSpan.onclick = function()
		{
			OpenOrCloseList(parentSpan,selectObj);
		}
		selectObj.parentNode.insertBefore(posSpan,selectObj);		//insert element;
	}
	function InsertOptions(selectObj,parentSpan,style)
	{
		var optionsNum = selectObj.options.length;
		for(var i = 0; i < optionsNum; i++)
		{
			var childSpan = document.createElement("span");
			childSpan.className = "childSpanStyle" + style;
			SetDefaultStyle(childSpan,"","","","","block","hidden","","","100%","","22px")
			childSpan.innerHTML = selectObj.options[i].text;
			childSpan.name = i;
			childSpan.onclick = function()
			{
				parentSpan.style.borderColor = "#CCC";
				ChangeValue(this,childSpan,selectObj);		//change select value;
				var text = $('.firstChildSpanStyle1').text();
				$('#select1 option').each(function(){
					if($(this).text()==text){
						$(this).attr("selected",true);
					}
				});
			}
			childSpan.onmouseover = function()
			{
				this.className = this.className + " childSpanHoverStyle" + style;		//hover css
			}
			childSpan.onmouseout = function()
			{
				this.className = "childSpanStyle" + style;		//clean hover css
			}
			parentSpan.appendChild(childSpan);
		}
	}
	function SetDefaultStyle(obj,position,left,top,zIndex,display,overflow,margin,padding,width,height,lineHeight)
	{
		var s = obj.style;
		s.position = position;
		s.left = left;
		s.top = top;
		s.zIndex = zIndex;
		s.display = display;
		s.overflow = overflow;
		s.margin = margin;
		s.padding = padding;
		s.width = width;
		s.height = height;
		s.lineHeight = lineHeight;
	}
	function OpenOrCloseList(parentSpan,selectObj)
	{
		if(SelectisOpen)
		{
			parentSpan.style.height = "22px";
			SelectisOpen = false;
		}
		else
		{
			parentSpan.style.height = (selectObj.options.length  + 1) * 22 + "px";
			SelectisOpen = true;
			parentSpan.style.borderColor = "#999";
		}
	}
	function ChangeValue(childSpan,parentSpan,selectObj)
	{
		selectObj.options[selectObj.selectedIndex].selected = "false";
		selectObj.options[childSpan.name].selected = "true";
		childSpan.parentNode.childNodes.item(0).innerHTML = childSpan.innerHTML;
		childSpan.parentNode.style.height = "22px";
		SelectisOpen = false;
	}
	ChangeSomeSelectStyle(['select1','select2']);
});