/*
 * Area
 * @author  
 * @version 0.1.1
 * @Created with the help of MooTools v1.11
 * MIT-style License.
 */

var Area = new Class(
		{
			initialize : function(ct,at) {
				this.dayOrWeekChoose = true;
				this.citys;
				this.at = at;
				ct.setProperties( {
					'id' : ct.getProperty('name'),
					'readonly' : true
				});
				ct.onclick = this.create.pass(ct, this);
			},
			create : function(ct) {
				var self = this;
				ct.calendar = new Element('div', {
					'class' : 'ct_cal'
				}).injectBefore(ct);

				provinceTable = new Element('table',{'cellpadding':'0','cellspacing':'0','width':'100%'});
				calTableThead = new Element('thead');
				provinceTbody = new Element('tbody');

				row = new Element('tr',{'class':'ct_cal_title'});
				cell = new Element('th', {'colspan':'3','align':'left','style':'padding-left:10px;'});
				cell.appendText("请输入求职地区");
				cell.injectInside(row);
				cell = new Element('th', {'colspan':'1','align':'right'});
				cell.appendText("确定");
				cell.style.cursor = "pointer";
				cell.onclick = function(){
					 this.ok(ct);
				}.bind(this);
				cell.injectInside(row);
				cell = new Element('th', {'colspan':'1','align':'center'});
				cell.appendText("关闭");
				cell.style.cursor = "pointer";
				cell.onclick = function(){
					 this.remove(ct);
				}.bind(this);
				cell.injectInside(row);
				row.injectInside(provinceTbody);
				
				row = new Element('tr');
				this.citys = new Element('th', {
					'colspan' : '5',
					'align' : 'left',
					'style':'padding-left:6px;'
				});

				var cityDiv = new Element(
						'div',
						{
							'class' : 'ct_cal',
							'style' : "position:absolute;backgroundColor:#F2F7FC;border:1px solid #FF7D05;z-index:1000;display:none; width:306px;"
						});
				cityDiv.onmouseleave = function() {
					cityDiv.style.display = "none";
				};
				document.body.appendChild(cityDiv);

				this.citys.injectInside(row);
				row.injectInside(provinceTbody);
				provinceTbody.injectInside(provinceTable);
				provinceTable.injectInside(ct.calendar);
				row = new Element('tr');
				var jsonRequest = new Request.JSON( {
					url : "/json/dict.action",
					data : {
						'language' : 'cn',
						'type' : 'area',
						'level' : '0',
						'value' : '0',
						'hint' : ''
					},
					method : "Post",
					onSuccess : function(result) {
						result.options.each(function(it, i) {
							if (i % 5 == 0) {
								row = new Element('tr');
							}
							var cell = new Element('td', {
								'class' : 'ct_calMonth',
								'value' : it.value
							}).appendText(it.text);
							cell.onclick = function() {
								var p = cell.getPosition();
								cityDiv.style.left = p.x + 40;
								cityDiv.style.top = p.y;
								self.showCity(cityDiv, it);
							};
							
							cell.addEvents({
							    mouseenter: function(){
									cell.addClass('ct_selected');
									cityDiv.style.display = "none";
							    },
							    mouseleave: function(){
							    	cell.removeClass('ct_selected');
							    }
							});

						
							cell.injectInside(row);
							if (i % 5 == 4 || result.options.length == i) {
								row.injectInside(provinceTbody);
							}

						});
						if (result.options.length % 5 >0) {
							row.injectInside(provinceTbody);
						}
					}
				}).send();

				if(this.at.value){
					var texts = ct.innerText.split("+");
					var values = this.at.value.split(",");
					texts.each(function(text,i){
						self.addCity(text,values[i]);
					});
				}
			},
			showCity : function(cityDiv, it) {
				var pit=it;
				var self = this;
				cityDiv.empty();
				cityDiv.style.display = "";
				cityTable = new Element('table');
				cityTbody = new Element('tbody');
				row = new Element('tr');
				cell = new Element('th', {
					'colspan' : '4',
					'align' : 'left',
					'style':'padding-left:6px; color:#CC0000;'
				});
				var checkBox = new Element('checkBox');
				cell.appendChild(checkBox);
				cell.appendText(it.text);
				cell.injectInside(row);
				row.injectInside(cityTbody);
				cityTbody.injectInside(cityTable);
				cityTable.injectInside(cityDiv);
				var jsonRequest = new Request.JSON( {
					url : "/json/dict.action",
					data : {
						'language' : 'cn',
						'type' : 'area',
						'level' : '1',
						'value' : it.value,
						'hint' : '不限'
					},
					method : "Post",
					onSuccess : function(result) {
						result.options.each(function(it, i) {
							if (i % 4 == 0) {
								row = new Element('tr');
							}
							var cell = new Element('td', {
								'class' : 'ct_calMonth',
								'value' : it.value
							}).appendText(it.text);
							if(self.isSelect(it)){
								cell.addClass('ct_selected');
							}
							cell.onclick = function() {
								if(cell.hasClass('ct_selected')){
									self.removeCity(it);
									cell.removeClass('ct_selected');
								}else{
									var values = $$('input[name=city]').get('value')+"";
									if(values.indexOf(pit.value)>=0){
										alert("您已选择了"+pit.text+"不限！");
										return ; 
									}
									if($$('input[name=city]').length>=5){
										alert("最多只能选择5个地区！");
										return ;
									}else{
										if(it.value==-1){
											self.addCity(pit.text,pit.value);
										}else{
											self.addCity(it.text,it.value);
										}
										cell.addClass('ct_selected');
									}
								}
							};
							cell.injectInside(row);
							if (i % 4 == 3 || result.options.length == i) {
								row.injectInside(cityTbody);
							}

						});
						if (result.options.length % 5 >0) {
							row.injectInside(cityTbody);
						}
					}
				}).send();
			},
			addCity : function(text,value){
				var self = this;
				span = new Element('span',{id:'span_'+value,name:'span_'+value});
				var checkbox = new Element('input', {'name':'city','id':'city',type: 'checkbox','alt':text,checked: true,value:value});
				checkbox.onclick = function() {
					self.removeCity(value);
				};
				span.appendChild(checkbox);
				span.appendText(text);
				this.citys.appendChild(span);
			},
			removeCity : function(value) {
				this.citys.removeChild($('span_'+value));
			},
			isSelect : function(it) {
				var flag = false;
				$$('input[name=city]').each(function(city,i){
					if(city.value==it.value){
						flag = true;
					}
				});
				return flag;
			},
			remove: function(ct){
				if(ct.calendar){
					ct.calendar.empty();
					ct.calendar.style.display = "none";
				}
					
			},
			ok : function(ct) {
				var texts = "";
				var values = "";
				$$('input[name=city]').each(function(city,i){
					if(texts==""){
						texts = city.alt;
						values = city.value;
					}else{
						texts = texts + "+" + city.alt;
						values = values + "," + city.value;
					}
				});
				ct.set("text" , texts);
				this.at.value = values;
				ct.calendar.empty();
				ct.calendar.style.display = "none";
			}
		});