/*======================================================
** 模拟下拉列表                           
** 支持 IE , FF , 苹果 浏览器，
** 在Opera下由于不支持overflow-x和overflow-y，则在Opera上下拉不出现滚动条,其他功能正常
** /* DIV模拟下拉列表框 *\
**
**　制作时间:2008-3-5
**　更新时间:2008-3-5
**　文档大小:17KB
**　演示地址:http://www.lwkai.com/select/test.htm
**　下载地址:http://www.popub.net/select/divselect.js
**　应用说明:页面包含<script type="text/javascript" src="divselect.js"></script>
**	调用方法1：<font color=red>注：</font>未加必选的为可选选项 下同
**	//引用对象
**	var Dselect = new DIVselect();		//[<font color="red">必选</font>]
**	//边框外观
**	Dselect.borderCol = "#7F9DB9";		//select外框颜色
**	Dselect.bgCol = "#fff";				//select框内文字背景颜色
**	Dselect.textCol = "#000";			//select框内文字颜色
**	//下拉三角形
**	Dselect.trigonImg = "select.gif";	//下拉的三角形箭头，我这里提供两个图[图1<img src=select.gif />][图2<img src=select2.gif />]
**	Dselect.trigonBorder = "#fff";		//下拉项的边框颜色(鼠标未移上去时)
**	Dselect.trigonBg = "#FFF";			//下拉项的背景颜色(鼠标未移上去时)
**	Dselect.HtrigonBorder = "#7F9DB9";	//下拉项的边框着色(鼠标移上去时)
**	Dselect.HtrigonBg = "#FFF";			//下拉项的背景着色(鼠标移上去时)
**	//选项
**	Dselect.Oborder = "#7F9DB9";		//下拉出来的整个外边框
**	Dselect.optionBgCol = "#FFF";		//下拉选项的背景颜色
**	Dselect.optionTextCol = "#000";		//下拉选项的文字颜色
**	Dselect.optionBorderCol = "#FFF";	//下拉选项的边框着色-->这里是指选项的每一项的边框
**	Dselect.HoptionBgCol = "#316AC5";	//下拉选项背景颜色(鼠标移上去时)
**	Dselect.HoptionTextCol = "#FFF";	//下拉选项的文字颜色(鼠标移上去时)
**	Dselect.HoptionBorderCol = "#CE953A";	//下拉选项的边框颜色(鼠标移上去时)
**	
**	Dselect.width = "100";					//设置下拉的最小宽度
**	//当下拉内容改变时所执行的过程
**	Dselect.callback = 	function (){
**		var name = "shi";
**		var Str = document.getElementById("sheng").value;
**		if(Str==""){
**			this.alerts("请选择市@@",'shi')
**			return;
**		}
**		this.alerts(data[Str],'shi',Dselect1.width)
**		//赋值函数(值,被赋值对象,被赋值对象的初始化宽度)
**	}
**	//模拟下拉的name 用来提交表单时提交的变量名
**	Dselect.name = "sheng";				//[<font color="red">必选</font>]
**	//下拉项的初始值  格式：[[[初始提交值$]初始选中值|]默认初始值(一般为空)$]默认选中值@@选中后被提交的值$显示给用户看的值[|选中后被提交的值$显示给用户看的值[|....]]
**	Dselect.values = "选择省份@@110000$北京|120000$天津"; //[<font color="red">必选</font>]若此项不设，则为一空下拉
**	//此属性是在下拉对象上自定义的一个属性，可以用document.getElementById("sheng").getAttribute("msg")来取得值，用
**	//来存放给用户的文字提示信息。当然，你也可以自己去另一个JS对此项进行判断是否选择。
**	Dselect.msg = "请选择您来自哪个省份"; 
**	//在哪个容器内显示
**	Dselect.setObj = "se0";			//<font color=red>注意:</font>本项如果不设置，则是在JS调用的地方直接输出
**	//显示下拉
**	Dselect.show();					//[<font color="red">必选</font>]
**	
**	调用方法2：	
**		var DIVslt5 = new DIVselect();
**		//以下一块，跟上面一样，这里我只用到了一部分，请大家对照上面去看.全是设置外观
**		DIVslt5.borderCol = "#EA8D32";
**		DIVslt5.bgCol = "#000";
**		DIVslt5.textCol = "#C6C4C2";
**		DIVslt5.trigonImg = "select2.gif"
**		DIVslt5.trigonBorder = "#EA8D32";
**		DIVslt5.Oborder = "#EA8D32";
**		DIVslt5.HoptionBgCol = "#005588";
**		DIVslt5.HoptionBorderCol = "#005588";
**		DIVslt5.HoptionTextCol = "#FFEE00";
**		//外观设置结束
**		DIVslt5.show('xlei','70','选择省份@@110000$北京|120000$天津|130000$河北省|140000$山西省','','请选择您来自哪个市！','se5');
**		*** 上面这句，则是把原来的 name , width , values , callback , msg , setobj ***
**		
*** 程序制作/版权所有:李文凯 E-Mail:1275124829@163.com 网址:http://www.lwkai.com ***
**=======================================================*/
var isFF = window.navigator.appName.indexOf("Netscape") != -1 ? true : false;
if(isFF){
	HTMLElement.prototype.attachEvent = function(eName,handler)
	{
		var eType = eName.substring(2,eName.length);
		this.addEventListener(eType,handler,true);
	}
	var attachEvent = document.attachEvent = function(eventName,handler)
	{
		window.addEventListener(eventName.substring(2),handler,true);
	};
	function SearchEvent()
	{
		var func=SearchEvent.caller;
		while(func!=null)
		{
			var arg=func.arguments[0];
			if(arg)
			{
				if(String(arg.constructor).indexOf('Event') > -1)
				{
					return arg;
				}
			}
			func=func.caller;
		}
		return null;
	};
	window.constructor.prototype.__defineGetter__
	(
		"event",
		function()
		{
			return SearchEvent()
		}
	);
	HTMLElement.prototype.__defineGetter__
	(
		"innerText",
		function () 
		{
			var innerText = "";
			var childS = this.childNodes;
			for(var i=0; i < childS.length ; i++)
			{
				if(childS[i].nodeType==1) //如果是元素
				{
					innerText += childS[i].tagName=="BR" ? '\n' : childS[i].innerText
				}
				else if(childS[i].nodeType==3)//如果是文本
				{
					innerText += childS[i].nodeValue
				}
			}
			return innerText;
		}
	);
	HTMLElement.prototype.__defineSetter__
	(
		"innerText",
		function (value) 
		{
			this.innerHTML = "";
			var sText = String(value);
			var textS = sText.split("\n");
			var hCount = textS.length - 1;
			for(var i=0; i <= hCount ; i++)
			{
				var txtNode = null;
				var retNode = null;
				if(textS[i].length)
				{
					txtNode = document.createTextNode(textS[i])
				}
				if(i < hCount)
				{
					retNode = document.createElement("BR")
				}
				if(txtNode)
				{
					this.appendChild(txtNode)
				}
				if(retNode)
				{
					this.appendChild(retNode)
				}
			}
			this.innerHTML = this.innerHTML.replace(/\s*$/g,"").replace(/\s/g,"&nbsp;");
			return value
		}
	);
}

function DIVselect(){
	this.dropShow = false;
	this.cuurentID = null;
	this.callback = null;
	this.width = "70";
	this.callback = null;
	this.name = "DivSelect";
	this.values = "请选择@@";
	this.msg = null;
	this.setObj = null;
	//边框外观
	this.borderCol = "#7F9DB9";//"#EA8D32";//select外框颜色
	this.bgCol = "#fff";//#000000//select框内文字背景颜色
	this.borderSize = "1px";//select框内文字颜色
	this.textCol = "#000";//select框内文字颜色
	//下拉三角形
	this.trigonImg = "/images/select2.gif";//下拉的三角形箭头
	this.trigonBorder = "#fff";//#B75B00//下拉项的边框颜色(鼠标未移上去时)
	this.trigonBg = "#FFF";//#EA8D32//下拉项的背景颜色(鼠标未移上去时)
	this.HtrigonBorder = "#7F9DB9";
	this.HtrigonBg = "#FFF";
	//选项
	this.Oborder = "#7F9DB9"; //下拉出来的整个外边框
	this.optionBgCol = "#FFF";
	this.optionTextCol = "#000";
	this.optionBorderCol = "#FFF";
	this.HoptionBgCol = "#316AC5";
	this.HoptionTextCol = "#FFF";
	this.HoptionBorderCol = "#CE953A";
}

DIVselect.prototype = {
	show:function(name,width,values,change,msg,SetObj){
		if(name !=null && name!=""){
			this.name = name;
		}
		if(/^\d+/.test(width)){
			this.width = width;
		}
		if(change!=null && change!=""){
			this.callback = change;
		}
		if(values!=null && values!=""){
			if(values.indexOf("@@")!=-1){
				this.values = values;
			}else{
				this.values += values;
			}
		}
		if(msg!="" && msg!=null){
			this.msg = msg;
		}
		if(SetObj!=null && SetObj!=""){
			this.setObj = SetObj;
		}
	
		this.addCss('.link_box_' + this.name + '{CURSOR: default; TEXT-ALIGN: left;float:left;margin-left:5px;margin-right:5px;font-size:12px;}'
			   +'.link_head_' + this.name + '{BORDER: '+this.borderSize+'px solid ' + this.borderCol + ';WIDTH: 100%;HEIGHT: 19px;background-color:'+this.bgCol+';color:'+this.textCol+'}'
			   +'.link_text_' + this.name + '{PADDING-LEFT: 2px; position:relative;line-height:15px;overflow:hidden;width:auto;}'
			   +'.link_arrow0_' + this.name + '{BORDER:1px solid ' + this.trigonBorder + ';background:' + this.trigonBg + '; FONT: 14px marlett; WIDTH: 13px;HEIGHT: 15px; TEXT-ALIGN: center;cursor:default;margin-right:1px;background:url(' + this.trigonImg + ') no-repeat 50% 50%;}'
			   +'.link_arrow1_' + this.name + '{BORDER:1px solid '+ this.HtrigonBorder + ';background:' + this.HtrigonBg + '; FONT: 14px marlett; WIDTH: 13px;HEIGHT: 15px; TEXT-ALIGN: center;cursor:default;margin-right:1px;background:url(' + this.trigonImg + ') no-repeat 50% 50%;}'
			   +'.link_record0_' + this.name + '{OVERFLOW-X: hidden; PADDING-LEFT: 2px; BACKGROUND: ' + this.optionBgCol + '; WIDTH: auto; COLOR: ' + this.optionTextCol + '; HEIGHT: 20px;border:1px solid ' + this.optionBorderCol + '}'
			   +'.link_record1_' + this.name + '{OVERFLOW-X: hidden;	PADDING-LEFT: 2px; BACKGROUND: ' + this.HoptionBgCol + '; WIDTH: auto; COLOR: ' + this.HoptionTextCol + '; HEIGHT: 20px;border:1px dotted ' + this.HoptionBorderCol + '}');
		var html = "";
	    html += "<DIV class=\"link_box_" + this.name + "\" style=\"width:" + this.width + "px\" id=\"link"+ this.name +"\" onselectstart=\"return false\" >";
		html += "<DIV id=\"Div1" + this.name + "\" class=\"link_head_" + this.name + "\">";
	    html += "<TABLE cellSpacing=0 height=100% cellPadding=0 style=\"width:100%\" border=0>";
		html += "  <TBODY>";
		html += "  <TR>";
		html += "    <TD>";
		html += "      <DIV class=\"link_text_" + this.name + "\"><NOBR><span id=\"text" + this.name + "\""
		html += ">";
		var defaultStr=[],cut_Str="";
		var TempStr="";
		//alert(this.values)
		 TempStr = this.values.substr(0,this.values.indexOf("@@"));
		 //alert(TempStr)
		if(TempStr.indexOf("|") != -1){
			var defaultStrTemp = TempStr.substr(0,TempStr.indexOf("|"));
			if(defaultStrTemp.indexOf("$") != -1){
				defaultStr[0] = defaultStrTemp.substr(0,defaultStrTemp.indexOf("$"));
				defaultStr[1] = defaultStrTemp.substr(defaultStrTemp.indexOf("$")+1,defaultStrTemp.length);
			}else{
				defaultStr[0] = "";
				defaultStr[1] = defaultStrTemp;
			}
			cut_Str = this.values.substr(this.values.indexOf("|")+1,this.values.length);
		}else{
			if(TempStr.indexOf("$") != -1){
			defaultStr[0] = TempStr.split('$')[0];
			defaultStr[1] = TempStr.split('$')[1];
			}
			else{
			defaultStr[0] = "";
			defaultStr[1] = TempStr;
			}
			cut_Str = this.values;
		}
		//cut_Str=cut_Str.substr(cut_Str.indexOf("@@")+2,cut_Str.length);
		//alert(cut_Str)
		html += defaultStr[1];
		html += "<\/span><\/NOBR><\/DIV><\/TD>";
	    html += "    <TD align=right width=22 >";
	    html += "      <DIV id=\"Div2" + this.name + "\"  class=\"link_arrow0_" + this.name + "\"><\/DIV><\/TD><\/TR><\/TBODY><\/TABLE><\/DIV>";
	    html += "<DIV class=\"link_value_" + this.name + "\" id=\"value" + this.name + "\" style=\"overflow-y:auto;overflow-x:hidden;display:none;position:absolute;WIDTH:"+this.width+"px;border:1px solid " + this.Oborder + ";\">";
	    html += "<DIV id=\"mx" + this.name + "\">";
		html += this.alerts(cut_Str);
		html += "<\/DIV><\/DIV><INPUT type=hidden name=\"" + this.name + "\" value=\"" + defaultStr[0] + "\" id=\"" + this.name + "\"";
		if(this.msg != null && this.msg != ""){
			html += " msg=\'" + this.msg + "\' min=\'1\'";
		}
		html += "\/><\/DIV>";
		var me = this;
		if(this.setObj==null){ 
			document.write(html);
		}else{
			document.getElementById(this.setObj).innerHTML = html;
		}
		document.getElementById("Div1" + this.name).attachEvent("onclick",function(){
			me.dropdown();
		});
		document.getElementById("Div2" + this.name).attachEvent("onmouseup",function(){
			document.getElementById("Div2"+me.name).className = "link_arrow0_" + me.name;
		});
		document.getElementById("Div2" + this.name).attachEvent("onmousedown",function(){
			document.getElementById("Div2"+me.name).className = "link_arrow1_"+me.name;
		});
		document.getElementById("Div2" + this.name).attachEvent("onmouseout",function(){
			document.getElementById("Div2"+me.name).className = "link_arrow0_" + me.name;
		});
		document.attachEvent("onclick",function(){
			me.dropdownHide()
		});
		document.getElementById("mx" + this.name).attachEvent("onclick",function(e){
			e = e || window.event;
			if(!isFF){
				var o = e.srcElement;
			}else{
				var o = e.target;
			}
			var obj = document.getElementById("mx"+me.name).getElementsByTagName("DIV");
			for(var i=0;i<obj.length;i++){
				if(obj[i] == o){
					if(document.getElementById('text'+ me.name).innerText != o.innerText){//判断是否要调用onChange事件
						document.getElementById('text'+ me.name).innerText = o.innerText;
						document.getElementById(me.name).value = o.getAttribute("value");
						var width = parseInt(document.getElementById("text"+me.name).offsetWidth)+18;
						if(me.width < width){
							document.getElementById("link"+me.name).style.width=width+"px";
						}else{
							document.getElementById("link"+me.name).style.width = me.width + "px";
						}
						me.onchange();
					}
				}
			}
		});
	},
	dropdown:function(){
		/*为什么用setTimout，因为点击的时候，同进触发了两个显示，一个显示，一个结束。
		即本类的显示下拉的事件，还有就是点击document时，隐藏下拉的事件，这里用setTimeout来延时，让隐藏事件先过去，再显示。
		*/
		var me = this;
		if(me.dropShow){
			me.dropdownHide();
			return;
		}
		setTimeout(
			function(){
				me.currentID = eval("document.getElementById('value"+me.name+"')");
				me.currentID.style.display = "block";
				//设置下拉出来显示的选项与上面下拉控件宽度一致
				document.getElementById("value"+me.name).style.width =eval(parseInt(document.getElementById("Div1"+me.name).offsetWidth)-2)+"px";
				var divs = document.getElementById("mx"+me.name).getElementsByTagName("div");
				for(i=0;i<divs.length;i++){
					divs[i].style.width = eval(parseInt(document.getElementById("Div1"+me.name).offsetWidth)-6)+"px";
				}
				//预先设置为自动适应高度
				document.getElementById("value" + me.name).style.height = "auto";
				document.getElementById("value" + me.name).style.zIndex = "9999";
				//如果高度超过200px 则强制显示200px，并带滚动条
				if(parseInt(document.getElementById("value" + me.name).offsetHeight) > 200){
					document.getElementById("value" + me.name).style.height = "200px";
				}
				me.dropShow = true;
			},30);
	},
	dropdownHide:function(){
		var me = this;
		if(me.dropShow){
			setTimeout(function(){
				me.currentID.style.display = "none";
				document.getElementById("value"+me.name).style.zIndex = "";
				me.dropShow = false;
			},10)
		}
	},
	onchange:function(){
		if(typeof(this.callback) == "function")
		{
			this.callback();
		}
		else if(this.callback != null)
		{
			eval(this.callback);
		}
	},
	alerts:function(list,SetObj,setObjW){
		var me = this;
		var defaultStr=[];
		if(list!=null && list!=""){
			var TempStr = list.substr(0,list.indexOf("@@"));
			list = list.substr(list.indexOf("@@")+2);
		}else{
			var TempStr = me.values.substr(0,me.values.indexOf("@@"));
		}

		if(TempStr.indexOf("$") != -1){
			defaultStr[0] = TempStr.substr(0,TempStr.indexOf("$"));
			defaultStr[1] = TempStr.substr(TempStr.indexOf("$")+1,TempStr.length);
		
		}else{
	
			defaultStr[0] = "";
			defaultStr[1] = TempStr;
		}

		var Ohtml =""
		//if(TempStr!=''){
		//var Ohtml = "<Div class=\"link_record0_"+me.name+"\" onmouseover=\"this.className=\'link_record1_"+me.name+"\'\" onmouseout=\"this.className=\'link_record0_"+me.name+"\'\" style=\"height:20px;line-height:20px;\" value=\"" + defaultStr[0] + "\">";
		//Ohtml += defaultStr[1];
		//Ohtml += "<\/div>";
		//}
		if(list!=null && list!=""){
		  	var value_arr = list.split("|");
		  	for(var vi=0;vi<value_arr.length;vi++){
				var value_arr2 = value_arr[vi].split("$");
				Ohtml += "<div class=\"link_record0_" + me.name + "\" onmouseover=\"this.className=\'link_record1_" + me.name + "\'\" onmouseout=\"this.className=\'link_record0_" + me.name + "\'\"  title=\"" + value_arr2[1] + "\" style=\"width:" + me.width + "px;overflow:hidden;height:20px;line-height:20px;\" value=\"" + value_arr2[0] + "\">";
				Ohtml += value_arr2[1] + "<\/div>"
		  	}
		}
		if(SetObj!=null && SetObj!=""){
			document.getElementById('text'+ SetObj).innerText = defaultStr[1];
			if(/^\d+/.test(setObjW)){
				document.getElementById("link"+ SetObj).style.width = setObjW + "px";
			}else{
				document.getElementById("link"+SetObj).style.width = me.width + "px";
			}
			document.getElementById("mx"+SetObj).innerHTML = Ohtml;
		}else{
			return Ohtml;
		}
	},
	/**********************************
	** @ Css 要添加的CSS代码 如: ".link{font-size:12px}"
	**********************************/
	addCss : function(Css){
		var elmSty = document.createElement('STYLE');     
		elmSty.setAttribute("type", "text/css");     
		if (elmSty.styleSheet) {
			elmSty.styleSheet.cssText=Css;
		} else {
			elmSty.appendChild(document.createTextNode(Css));
		}
		document.getElementsByTagName("head")[0].appendChild(elmSty);	
	}
}