/*
 *  职位选择控件
 *
 */
//(function(){
	var searchJobSelector = {
		NAME_FIELD : "#TypeSelector",
		ID_FIELD : "#id_field",
		init : function() {
			this.dataformat();
			$(this.NAME_FIELD).bind("click", this.keywordsHandler);
			$(this.NAME_FIELD).after(
				this.__container
				+this.__maskdiv
				+this.__mainitem_jst
				+this.__subitem_jst
				+this.__selected_jst
			);
			$("#imgClose").bind("click", this.hideDiv);

			var main_items = TrimPath.processDOMTemplate("__mainitem_jst", {items:this._search_job_catalog});
			$("#mainitems").append(main_items);

		},

		_search_job_catalog : new Array(),
		_search_job_subitems : new Array(),

		dataformat : function() {
			var currentSubItems = new Array();
			var first=true;
			var main_index=0;
			for (var i=0;i<_search_job_index.length;i++) {
				var index = _search_job_index[i];
				var item = _search_job_data[i];
				if (index.length == 2) {
					//main type
					this._search_job_catalog.push({id:index, name:item, i:main_index++});
					if (!first) {
						this._search_job_subitems.push(currentSubItems);
					} else {
						first=false;
					}
					currentSubItems = new Array();
				} else {
					//sub types
					currentSubItems.push({id:index, name:item});
				}
			}
			this._search_job_subitems.push(currentSubItems);
		},

		showDiv : function() {
			var offset = $("#TypeSelector").offset();
			$("#searchJobSelector").css({position:"absolute" ,left:offset.left,top:offset.top+19}); 
//				$("#searchJobSelector")
			$("#searchJobSelector").show();
			//$("#selectorMasker").show();
		},
		
		hideDiv : function() {
			$("#searchJobSelector").hide();
			//$("#selectorMasker").hide();
			//$("#subitems").hide();
		},


		showTimer : null,
		hideTimer : null,
		readyToShow:true,

		hideretertSubItems : function() {
			this.readyToShow = true;
			//$("#subitems").hide();
		},

		hideSubItems : function(obj, event) {
			if(!this.isMouseLeaveOrEnter(event, obj)) return;
			this.hideHover(obj,event);
			if (this.showTimer != null) {
				clearTimeout(this.showTimer);
			}
			this.readyToShow = false;
			//this.hideTimer = setTimeout('$("#subitems").hide()', 1000);
		},

		showSubItems : function(i, obj, event) {
			if(!this.isMouseLeaveOrEnter(event, obj)) return;
//			$("#debug").append("show#"+obj.id+"<br/>");
			if (this.hideTimer != null) {
				clearTimeout(this.hideTimer);
			}
			this.showHover(obj, event);
			if (i=="00"){return;}//“不限”没有二级目录
			var sub_items = TrimPath.processDOMTemplate("__subitem_jst", {items:this._search_job_subitems[i]});
			$("#subitems_ct").html(sub_items);
			var pos = $("#"+obj.id).offset();
//			$("#debug").html("#"+obj.id+"<br/>");
//			$("#debug").append(pos.left + ":");
//			$("#debug").append(pos.top);
			if (this._search_job_subitems[i].length > 15) {
				$("#subitems").css("width", "413px");
				$("#subitems .ct").css("width", "400px");
			} else {
				$("#subitems").css("width", "206px");
				$("#subitems .ct").css("width", "200px");
			}
			$("#subitems").css("top", pos.top);
			$("#subitems").css("left", pos.left+170);
			this.showTimer = setTimeout('$("#subitems").show()', 500);
			searchJobSelector.addCheckedToInput();
		},

		showHover:function(obj, event) {
			if(!this.isMouseLeaveOrEnter(event, obj)) return;
			$("#"+obj.id).addClass("hover");
		},

		hideHover:function(obj,event) {
			if(!this.isMouseLeaveOrEnter(event, obj)) return;
			$("#"+obj.id).removeClass("hover");
		},

		/*解决mouseover, mouseout问题*/
		isMouseLeaveOrEnter : function(e, handler) {  
			if (e.type != 'mouseout' && e.type != 'mouseover') return false;  
			var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;  
			while (reltg && reltg != handler)  
				reltg = reltg.parentNode;  
			return (reltg != handler);  
		},
		
		onSubDiv : function(obj, event) {
			if(!this.isMouseLeaveOrEnter(event, obj)) return;
//			$("debug").append("onSubDiv<br/>");
			if (this.hideTimer != null) {
				clearTimeout(this.hideTimer);
			}
		},

		moveoutSubDiv : function(obj, event) {
			if(!this.isMouseLeaveOrEnter(event, obj)) return;
//			$("#debug").append("moveoutSubDiv<br/>");
			if (!$("#subitems").is(":hidden"))
			{
				this.hideTimer = setTimeout('$("#subitems").hide()', 1000);
			}

		},

		selectedList : new Array(),
		/**
		  *   id:职位类型id
		  *   name: 职位类型名称
		  *   obj: 被点击对象
		  */
		click : function(id, name, obj, isTopClick) {
			if (this.checkIdInArray(id, this.selectedList)) {
				this.removeFromArray(id);
			} else {
				if (this.selectedList.length >=6) {
					alert("最多只能选择6个选项");
					return;
				}
				this.selectedList.push({id:id, name:name});
			}
			this.refreshSelecting();

			if (isTopClick){
				this.clearMainItemsInputCheck();
				this.addCheckedToInput();
			} else {
				this.reverseCheck(obj);
			}

		},

		reverseCheck:function(obj) {
			var ckbox = $("#"+obj.id+" input");
			ckbox[0].checked=!ckbox[0].checked;
		},
		/*添加一，二级菜单的check项*/
		addCheckedToInput:function() {
			$.each(this.selectedList,function(n,selectedItem) {  
				var ckbox = $("#_m_item_check_" + selectedItem.id);
//				$("#debug").append("#_m_item_check_" + selectedItem.id);
				if (ckbox.attr("id") == undefined) {
//					alert("it's undefined");
				} else {
					ckbox[0].checked=true;
				}

			});  
		},

		checkIdInArray : function(id, arrayList) {
			for (var i=0; i< arrayList.length; i++) {
				if (id == arrayList[i].id)
					return true;
			}
			return false;
		},

		removeFromArray : function(id) {
			this.selectedList = $.grep( this.selectedList, function(n,i){
				return n.id == id;
			}, true);
		},

		//
		//事件处理
		//
		
		selectOK : function() {
			var names = "";
			var ids = "";
			for (var i=0;i < this.selectedList.length; i++)
			{
				if (i!=0)
				{
					names += "+"
					ids += "+"
				}
				var selectedItem = this.selectedList[i];
				names += selectedItem.name;
				ids += selectedItem.id;
			}
			$(this.NAME_FIELD).val(names);
			$(this.ID_FIELD).val(ids);
			this.clearAll();
			this.hideDiv();
		},


		clearAll : function() {
			this.selectedList = new Array()
			this.refreshSelecting();
			this.clearMainItemsInputCheck();
			this.addCheckedToInput();
		},

		refreshSelecting : function() {
			//选择提示区域清理
			var selecting = TrimPath.processDOMTemplate("__selected_jst", {items:this.selectedList});
			$("#selecting").html(selecting);
			if(this.selectedList.length > 0) {
				$("#noSelectedHint").hide();
				$("#divSelecting").show();
			} else {
				$("#divSelecting").hide();
				$("#noSelectedHint").show();
			}
		},

		clearMainItemsInputCheck: function() {
			var inputs = $("#mainitems input");
			$.each(inputs, function(i, input) {
				input.checked = false;
			});		
		},

		keywordsHandler : function() {

			searchJobSelector.showDiv();
		},

		__mainitem_jst :
			'<textarea id="__mainitem_jst" style="display:none;">'+
			'{for item in items}'+
			'<li class="main_catalog" onmouseout="searchJobSelector.hideSubItems(this,event)" onclick="searchJobSelector.click(\'${item.id}\', \'${item.name}\', this, false)" onmouseover="searchJobSelector.showSubItems(${item.i}, this, event)" name="${item.id}" id="_main_item_${item.id}">'+
				'<input id="_m_item_check_${item.id}" class="search_check" type="checkbox"  value="${item.name}" /><label class="main_label"  >${item.name}</label>'+
			'</li>'+
			'{/for}'+
			'</textarea>',

		__subitem_jst : 
			'<textarea id="__subitem_jst" style="display:none;">'+
			'{for item in items}'+
			'<li class="main_catalog" name="${item.id}" id="_sub_item_${item.id}" onclick="searchJobSelector.click(\'${item.id}\', \'${item.name}\', this, false)" onmouseover="searchJobSelector.showHover(this,event)" onmouseout="searchJobSelector.hideHover(this, event)" onclick="searchJobSelector.click(\'${item.id}\', \'${item.name}\', this);">'+
				'<input id="_m_item_check_${item.id}" class="search_check" type="checkbox"  value="${item.name}"/><label class="main_label">${item.name}</label>'+
			'</li>'+
			'{/for}'+
			'</textarea>',

		__selected_jst : 
			'<textarea id="__selected_jst" style="display:none;">'+
			'{for item in items}'+
			'<li class="main_catalog trim"  onclick="searchJobSelector.click(\'${item.id}\', \'${item.name}\', this, true);">'+
				'<span>${item.name}</span>'+
			'</li>'+
			'{/for}'+
			'</textarea>',

		__container :
		'<div id="searchJobSelector" onmouseout="searchJobSelector.moveoutSubDiv(this,event);">'+
//		'<iframe frameborder="0" scrolling="no" vspale="0" src="" style="width: 594px; height: 517px; position: absolute;" framespacing="0" border="0" id="shield"/>'+
		'    <div id="pslayer">'+
		'        <div class="ct">'+
		'            <div class="head"><span class="catalog">职位类别</span><a id="imgClose" class="icn_close" href="#"/></div>'+
		'        <div class="selected">'+
			'        <div class="hint" id="divSelecting" style="display: none;">'+
			'            <div>'+
			'                <span class="hint_msg">您选择的职位类别是：</span>'+
			'				 <span class="hint_ok">'+
			'                <input type="button" class="btn_ok" value="确定" onclick="searchJobSelector.selectOK()" id="selectOK"/>'+
			'                <input type="button" class="btn_cl" value="清空" onclick="searchJobSelector.clearAll()" id="selectCancel"/>'+
			'				 </span>'+
			'            </div>'+
			'			 <div style="clear:both"/>'+
			'            <div id="selecting" class="zone"></div>'+
			'			 <div style="clear:both"/>'+
			'        </div>'+
			'        <div class="hint" id="noSelectedHint" style="display: block;">'+
			'            <div>'+
			'                <span class="hint_msg">提示：</span>'+
			'                <span class="hint_ok"><input type="button" value="确定" class="btn_ok" onclick="searchJobSelector.selectOK()" name="" id="btnOk"/>'+
			'                <input type="button" class="btn_cl" value="清空" id="selectCancel" onclick="searchJobSelector.clearAll()" />'+
			'				</span>'+
//			 '               <input type="button" value="清空" disabled="" name=""/>'+
			 '           </div>'+
			 '           <div class="zone">'+
			 '               当您直接选择职位类别时，您将会获得更多的搜索结果<br/>'+
			 '               当您选择大类下的具体职位时，将会获得更为准确的搜索结果<br/>'+
			 '               您最多可以选择6个职位类别'+
			 '           </div>'+
			'			 <div style="clear:both"/>'+
			 '       </div>'+
			 '   </div>'+
		 '       <div class="main_items_style main_height">'+
			 '       <h2 id="subHeader1" style="display: none;"><span/></h2>'+
			 '       <ul id="mainitems"></ul>'+
			 '       <h2 style="display: none;" id="subHeader2"><span/></h2>'+
			 '       <ol style="display: none;" id="allItems2"/>'+
		 '       </div> '+
		 '       <div id="debug"></div> '+
		 '   </div>'+
		 '</div>'+
		 '</div>'+
		 '<div id="subitems" class="main_items_style" style="position: absolute; z-index: 1800;display: none;">'+
			 '<div id="subitems_ct" onmouseout="searchJobSelector.moveoutSubDiv(this,event);return;" onmouseover="searchJobSelector.onSubDiv(this,event);return false;" class="ct"></div>'+
		 '</div>',

		__maskdiv : '<div id="selectorMasker">'+
					'<iframe frameborder="0" style="position: absolute; visibility: inherit; top: 0px; left: 0px; z-index: -1;" src=""/>'+
					'</div>'
};

searchJobSelector.init();

//})();