/**
 * http://www.jobcn.com/
 * By zhangping
 *
 * For: IE6,IE7,Firefox	
 * 
 * Required :	 masker.js;
 */
 
 
//default config
var AreaSelectorConfig = {
	width:"700px", 
	//height:"300px", 		
	className: "area_selector",	
	title: "Selector Box",
	
	promptLabel:		"当前选择的地区：",
	promptFlag:			true,
	promptDefault:	"工作地点",
	promptNull:			"[未选]",
	
	mainCityLabel:	"主要城市及地区：",
	provinceLabel:	"省区范围：",	
	cityLabel: 			"城市范围：",
	
	superAllValue:	"",
	superAllLabel:	"全国[不限]",
		
	subAllLabel:	"[不限]",

	oddBgColor: "#F9F9F9", //"#FFFBF6"
	eveBgColor: "#F9F9F9", //"#FFFFFF"
	
	//top: "0px",
	//left: "0px",
	//topOffset: 320,
	
	colunms: 6, 	
	modelDialog: true,
	closeText: "[关闭窗口]",
	submit: function(){void(0);} 
}


function AreaSelector(config){
	for(var prop in AreaSelectorConfig)
		if(config[prop] == null) config[prop] = AreaSelectorConfig[prop];	

	var selector = null;		
	var titleBox = null;
	var promptBox = null;	
	var panelBox = null;	
	var mainCitiesBox = null;	
	var provinceBox = null;	
	var citiesBox = null;
	var bottomBox  = null;
	
	function init(){
		var body = document.getElementsByTagName('BODY')[0];
		selector = document.createElement('div');
		body.appendChild(selector);

		selector.id = config.id;
		selector.style.zIndex = 500;
		selector.style.position = "absolute";
		selector.style.display = "none";
		selector.style.width = config.width;
		if(config.height) selector.style.height = config.height;

		selector.className = config.className;
		
		titleBox = document.createElement('DIV');
		titleBox.className = "win_title";
		selector.appendChild(titleBox);
		
		panelBox = document.createElement('DIV');	
 		panelBox.className = "win_panel";		
		selector.appendChild(panelBox);
		
		promptBox = document.createElement('DIV');	
 		promptBox.className = "prompt_box";
 		promptBox.appendChild(document.createTextNode(config.promptLabel));
 		var span = document.createElement('SPAN');
 		span.style.fontWeight = "bold";
		promptBox.appendChild(span);
		panelBox.appendChild(promptBox);
 		
		genTitleBox();		
		genMajorCityBox();		
		genProvinceBox();
		
		bottomBox  = document.createElement('DIV');
		bottomBox.className = "win_foot";
		selector.appendChild(bottomBox);
	}

	
	function genTitleBox() {
		if(selector==null || selector.nodeName!="DIV") return;				
		
		var boxTitle = document.createElement('DIV');
		boxTitle.className = "win_title_L";
		//boxTitle.appendChild(document.createTextNode(config.title));
		boxTitle.innerHTML = config.title;
		
		var boxClose = document.createElement('DIV');
		boxClose.className = "win_title_R";
		var link = document.createElement('A');
		link.href="javascript:void(0)";
		link.onclick = hide;
		link.style.color = "#FFF";
		link.appendChild(document.createTextNode(config.closeText));
		boxClose.appendChild(link);
				
		titleBox.appendChild(boxTitle);
		titleBox.appendChild(boxClose);				
	}
	

	function genMajorCityBox(){
		if(selector==null || selector.nodeName!="DIV") return;		
		
		mainCitiesBox = document.createElement('DIV');
		mainCitiesBox.className = "main_item_box";
		panelBox.appendChild(mainCitiesBox);		
				
		mainCitiesBox.appendChild(document.createTextNode(config.mainCityLabel));
		mainCitiesBox.appendChild(document.createElement('BR'));
			
		var mainCities			= config.usableLabels;
		var mainCitiesValue	= config.usableValues;

		var cells = new Array();
		var link = null;
					
		for(var i=0;i<mainCities.length;i++){
			link = document.createElement('A');					
			link.value = mainCitiesValue[i];
			link.label = mainCities[i];					
			link.href = "javascript:void(0)";
			link.onclick = function() {config.submit(this.value, this.label); reset();};
			link.appendChild(document.createTextNode(link.label));			
			cells[cells.length] = link;
		}
		
		var table = util.createTable(cells, config.colunms, config.oddBgColor, config.eveBgColor);	
		mainCitiesBox.appendChild(table);
	}

	function genProvinceBox() {
		if(selector==null || selector.nodeName!="DIV") return;
						
 		provinceBox = document.createElement('DIV');
		provinceBox.className = "sup_item_box";
		
		citiesBox = document.createElement('DIV');
		citiesBox.className = "sub_item_box"; 		
 		
		var cells = new Array();
		var link = null;
		
		provinceBox.appendChild(document.createTextNode(config.provinceLabel));
		
		link = document.createElement('A');
		link.value = config.superAllValue;
		link.label = config.superAllLabel;
		link.href = "javascript:void(0)";
		link.onclick = function() { config.submit(this.value, this.label); reset(); };
		link.appendChild(document.createTextNode(link.label));
		link.style.fontWeight = "bold";
		provinceBox.appendChild(link);
		provinceBox.appendChild(document.createElement('BR'));
			
		for(var i=0;i<config.values.length;i++) {
			link = document.createElement('A');					
			link.value = i;
			link.label = config.labels[i];					
			link.href = "javascript:void(0)";
			link.onclick = function() { genCitiesBox(this.value) };
			link.appendChild(document.createTextNode(link.label));			
			cells[cells.length] = link;
		}
		
		var table = util.createTable(cells, config.colunms, config.oddBgColor, config.eveBgColor) 
		provinceBox.appendChild(table);		
	
		panelBox.appendChild(provinceBox);
		panelBox.appendChild(citiesBox);
		citiesBox.style.display = "none";
	}

	
	function genCitiesBox(index) {
		while(citiesBox.childNodes.length!=0)
			citiesBox.removeChild(citiesBox.firstChild);
		
		var province = document.createElement('A');
		province.value = config.labels[index] + ',' + config.labels[index];
		province.label = config.labels[index];
		province.href = "javascript:void(0)";
		province.onclick = function() { config.submit(this.value, this.label); reset();  };
		province.appendChild(document.createTextNode(province.label + config.subAllLabel));
		province.style.fontWeight = "bold";

		var provinceBack = document.createElement('A');
		provinceBack.value = '';
		provinceBack.label = '[返回省区列表]';
		provinceBack.href = "javascript:void(0)";
		provinceBack.onclick = function() {
			citiesBox.style.display = "none";	
			provinceBox.style.display = "block";			
			//selector.removeChild(bottomBox);			
			//selector.appendChild(bottomBox); 
		};
		provinceBack.appendChild(document.createTextNode(provinceBack.label));
		provinceBack.style.fontWeight = "normal";				
		provinceBack.style.marginLeft = "245px";
			
		var count = 0;				
		var value = config.values[index];

		var cells = new Array();
		var link = null;
		
		for(var i=0;i<config.subValues.length;i++) {
			if(config.subValues[i].indexOf(value)==0) {
				link = document.createElement('A');					
				link.value = province.label + ',' +  config.subLabels[i];
				link.label = config.subLabels[i];					
				link.href = "javascript:void(0)";
				link.onclick = function() { config.submit(this.value, this.label); reset();};
				link.appendChild(document.createTextNode(link.label));			
				
				cells[cells.length] = link;		
			}
		}
		
		if(cells.length==0 || cells.length==1){
			config.submit(province.label + ',' + province.label, province.label); 
			reset();
			return;		
		}else{
			citiesBox.style.display = "block";
			provinceBox.style.display = "none";	
			
		}
		
    citiesBox.appendChild(document.createTextNode(config.cityLabel));
		citiesBox.appendChild(province);
		citiesBox.appendChild(provinceBack);
		citiesBox.appendChild(document.createElement('BR')); 
		
    var table = util.createTable(cells, config.colunms, config.oddBgColor, config.eveBgColor) 	
		citiesBox.appendChild(table);	
		
		selector.removeChild(bottomBox);
		selector.appendChild(bottomBox);		
	}
	
	
	//public methods
	this.reset = reset;
	this.show = show;
	this.hide = hide;
	this.init = init;	
	
	function reset() {
		while(selector.childNodes.length!=0)
			selector.removeChild(selector.firstChild);
		document.body.removeChild(selector);
		
		if(config.modelDialog) Masker.unmask();
		
		init();	
	}

	function show(){
		if(config.modelDialog) {
			Masker.mask();
			if(Masker.ie6) Masker.showSelect(selector);		
		}
		
		var label = (arguments.length >0 && (arguments[0] instanceof String)) ? arguments[0] : null;		
		label = label!=config.promptDefault ? label : null;
		
		if(!config.promptFlag && !label){
			promptBox.style.display = 'none';
		} else {
			var span = promptBox.getElementsByTagName('SPAN')[0];
			while(span.childNodes.length!=0)
				span.removeChild(span.firstChild);				
			label = label ? label : config.promptNull;
			span.appendChild(document.createTextNode(label));	
			
			// modified by zhangping 2008/03/28
			if(label != config.promptNull && label!='全国'){
				//var div = document.createElement('DIV');	
				//div.style.float = "right";	
				var link = document.createElement('A');
				link.value = '';
				link.label = '[取消地区限制]';
				link.href = "javascript:void(0)";
				link.onclick = function() { config.submit(this.value, this.label); reset(); };
				link.appendChild(document.createTextNode(link.label));
				link.style.fontWeight = "normal";				
				link.style.marginLeft = "245px";				
				span.appendChild(link);
			}//-- end								
			promptBox.style.display = 'block';
		}
		
		citiesBox.style.display = "none";
		provinceBox.style.display = "block";	
		
		var body = document.getElementsByTagName('BODY')[0];		
		var width  = selector.style.width? selector.style.width : selector.offsetWidth;
		var height = selector.style.height? selector.style.height : selector.offsetHeight;

		if(config.left) selector.style.left = config.left;
		else selector.style.left =  (body.clientWidth -parseInt(width))/2 + "px";
		
		if(config.top) selector.style.top = config.top;
		else selector.style.top = (body.clientHeight -parseInt(height))/2 - config.topOffset + "px";		

		selector.style.display = 'block';
	}
	
	function hide(){
		if(config.modelDialog) Masker.unmask();
		
		selector.style.display = 'none';	
	}		
		
	//util functions	
	var util = {};
	util.arrayRemvoe = function(array, value) {
		for(var i=0;i<array.length;i++) {				
			if(value == array[i]) {
				array.splice(i,1);
				return i;
			}
		}
		return -1;	
	}
	
	util.arrayIndexOf = function(array, value) {
		for(var i=0;i<array.length;i++)
			if(value == array[i]) return i;
		return -1;
	}
	util.checkAll = function(checks){
		for(var i=0;i<checks.length;i++)
			checks[i].checked = true;
	}		
	util.uncheckAll = function(checks){
		for(var i=0;i<checks.length;i++)
			checks[i].checked = false;
	}
	
	//create table with cells
	util.createTable = function(cells, columns, oddBgColor, eveBgColor) {
		var table = document.createElement('TABLE');
		table.style.width = "100%";	
		var tbody = document.createElement('TBODY');
		table.appendChild(tbody);
			
		var tr = null;
		var td = null;

		for(var i=0;i<cells.length;i++) {		
			if(i%columns==0){
				tr = document.createElement('TR');
				tbody.appendChild(tr);						
				if(i%2==0) tr.style.background = eveBgColor ;
				else tr.style.background = oddBgColor;
      }

			td = document.createElement('TD');
			td.style.width = (100/columns) + "%";

			td.appendChild(cells[i]);
			tr.appendChild(td);			
		}
		
    //fix the last row of the table
    var remain = !tr?0: tr.childNodes.length%columns
    if(remain!=0){
    	remain = columns - remain;
    	while(remain>0){
				var td = document.createElement('TD');
    		td.appendChild(document.createTextNode(''));
    		td.style.background = "#FFF";
				tr.appendChild(td);
    		remain--;
    	}
    }	
		return table;
	}
}