﻿var CssSelect = (function() {
	return {
		PopupShow : false,
		PopupLayer : "",
		CssClass : "sitemap",
		CssClassOver : "",
				
		// 关闭下拉菜单
		Close : function() {
			if( isIE() ) {
				var patn = /^btn\-/;
				if( document.activeElement!=null && !patn.test(document.activeElement.id) ) {
					if( CssSelect.PopupLayer!="" && CssSelect.PopupShow ) {
						$("selectchild-" + CssSelect.PopupLayer).style.display = "none";
						CssSelect.PopupLayer = "";
						CssSelect.PopupShow = false;
					}
				}
			}
			else {
				if( CssSelect.PopupLayer!="" && CssSelect.PopupShow ) {
					$("selectchild-" + CssSelect.PopupLayer).style.display = "none";
					CssSelect.PopupLayer = "";
					CssSelect.PopupShow = false;
				}
			}
		},
	
		// 装载select控件
		Load : function() {			
		
			for(var i=0; i<arguments.length; i++) {
				// 第一步：取得对象
				var obj = document.getElementById(arguments[i]);
				// 第二步：将原始对象隐藏
				obj.style.display = "none";
				// �第三步：创建一个虚拟input代替原始对象
				var _input = document.createElement("DIV");
				_input.id = "btn-" + obj.id;
				_input.name = "btn-" + obj.id;
				_input.setAttribute("type", "button");
				_input.className = this.CssClass;
				//_input.value = obj.options[obj.selectedIndex].innerHTML;
				_input.style.zIndex = "90";				

				AttachEvent(document, 'onclick',CssSelect.Close, true);
				AttachEvent(window, 'onload',function() { obj.parentNode.appendChild(_input); }, false);
				_input.onclick = function() {// 鼠标单击
					if( $("selectchild-" + obj.id) ) {
						// 判断是否创建过ul
						if( CssSelect.PopupShow ) {
							// 判断当前的下拉是不是打开状态，如果是打开的就关闭掉。否则就打开?
							if( CssSelect.PopupLayer==obj.id ) {
								$("selectchild-" + obj.id).style.display = "none";							
								CssSelect.PopupShow = false;
								CssSelect.PopupLayer = "";
							}else{
								$("selectchild-" + CssSelect.PopupLayer).style.display = "none";
								$("selectchild-" + obj.id).style.display = "block";
								CssSelect.PopupShow = true;
								CssSelect.PopupLayer = obj.id;
							}
						}
						else {
							$("selectchild-" + obj.id).style.display = "block";
							CssSelect.PopupShow = true;
							CssSelect.PopupLayer = obj.id;
						}
					}
					else {
						// �判断当前的其它下拉是不是打开状态，如果是打开的就关闭掉?
						if( CssSelect.PopupShow ) {
							$("selectchild-" + CssSelect.PopupLayer).style.display = "none";							
						}
						
						// �初始化一个ul放在input下边，当options的替?
						CssSelect.PopupLayer = obj.id;						
						CssSelect.PopupShow = true;
						var _ul = document.createElement("ul");
						_ul.id = "selectchild-" + obj.id;
						_ul.style.position = "absolute";
						var offset = CssSelect.Offset(this);
						_ul.style.top = (offset.Top + this.offsetHeight) + "px";
						_ul.style.left = offset.Left + "px";						
						_ul.className = CssSelect.CssClass + " clearfix";
						_ul.setAttribute("status", "popup");
						
						for(var i=0; i<obj.options.length; i++) {
							// �将原始的select中的options添加到li?
							var _li = document.createElement("li");
							_li.id = "options-" + obj.id + "-" + i;
							_li.innerHTML = obj.options[i].innerHTML;
							_li.setAttribute("value", i);
							// �为li标签添加鼠标事件
							_li.onselectstart = function() { return false; }
							_li.onmouseover = function() {
								this.style.background = "#eff1f6";
								this.style.color = "#137abc";
							};
							_li.onmouseout = function() {
								this.style.background = "#d4ddec";
								this.style.color = "#1f5a95";
							};
							_li.onclick = function() {
								// 做两件事，一是将用户选择的保存到原始select标签?
								//$("btn-"+obj.id).value = this.innerHTML;
								//obj.selectedIndex = this.getAttribute("value");
								// �同时把下拉的关闭?
								$("selectchild-"+obj.id).style.display = "none";
								CssSelect.PopupShow = false;
								document.location = obj.options[parseInt(this.getAttribute("value"))].value;
							};
							_ul.appendChild(_li);
						}
						
						document.body.appendChild(_ul);	
					}
				};
				
				if(this.CssClassOver!="") {
					_input.onmouseover = function() { this.className = CssSelect.CssClassOver; };
					_input.onmouseout = function() { this.className = CssSelect.CssClass; };
				}
			}
		},
		
		Offset : function(obj) {
			var l = obj.offsetLeft + 1;
			var t = obj.offsetTop;
			
			while(obj=obj.offsetParent)
			{
				l += obj.offsetLeft;
				t += obj.offsetTop;
			}
			return {
				Top : t,
				Left : l
			}
		}
	}
})();