/**
 * Copyright By YouthMe.com
 *
 * Author: SunInformation
 * Version: 1.0
 * Date: 2008-10-31
 *
 * BUGs:
 *     1- 加入_selectedItems[],只用于临时存放已选项数据 TODO 需要为‘确定’、‘关闭’按钮添加区别;
 *     2- 当所选元素最移除后,WEB_UI组件目前会重新绘制整个Frame,效率太低,应该在第一次绘制里保存数据datas,然后只能已选元素部分进行重新绘制;
 */

String.prototype.endWith = function(oString) {   
	var reg=new RegExp(oString + "$");
	return reg.test(this);
};

/**
 * WEB_UI组件构造器
 *
 * @param divId 目标显示DIV元素ID
 * @param btnId DivFrame的标题
 * @param hiddenId 初始/已选项值
 * @param instanceName WEB_UI对像实例变量名称
 * @param initDrawMethod 初始化绘制方法
 */
function WEB_UI(divId, btnId, hiddenId, instanceName, initDrawMethod) {
	this.divId = divId;
	this.btnId = btnId;
	this.hiddenId = hiddenId;
	this.instanceName = instanceName;
	this.initDrawMethod = initDrawMethod;
	
	//自定义事件数组
	this.customEvents = [];
	
	this.isBuilded = false; // 是否已完成了Frame的绘制动作
	//
	this.selectedItems = []; // 已选项存放数组
    // this._selectedItems = []; // 只用于临时存放已选项数据 TODO 需要为‘确定’、‘关闭’按钮添加区别;
	//
	this.configs = {
		title : '请选择：', // 标题
		wFrame : 600, // 宽度
		// hFrame : 300, // 高度
		wButton : 200, // 按钮宽度
		hButton : 20, // 按钮高度
		nCols : 5, // 每行列数
		wCols : 110, // 数据列宽度
		multiple : false, // 是否可多选
		selectMax : 1, // 若为多选,最多可选n项
		prefix : 'WEB_UI_' + this.instanceName, // 层对像ID值前缀
        showLimitButton : false, // 是否显示‘不限’按钮
		childrenDatas : [], // 子类数据
		showChildren : false, // 是否为显示子层菜单方式
        parentList : false, // 是否为父类列表
        subInstanceName : '', // 若为父类列表，子类的实例变量名称是什么
        subList : false, // 是否为子类列表
        parentKeyId : '', // 若为子类列表，父类元素ID
		separator : ',' // 字符串数组分隔符
	};
	// 插入遮罩层
	if ($('#mask').length == 0) {
		$('body').append('<div class="mask_bg" id="mask" style="display:none;"></div>');
	}
	if ($('#' + divId).length == 0) {
		$('body').append('<div id="' + divId + '" style="position:absolute;display:none;z-index:17777;"></div>');
	}
	// 为按钮添加单击事件
	$('#' + this.btnId).bind('click', function() {
		eval(instanceName + '.showWindow()');
    });
}

WEB_UI.prototype.setup = function() {
    // 重绘按钮
    $('#' + this.btnId).addClass('in').append('<div style="padding:1px;"></div><div class="right_1"></div>').css('width', this.configs.wButton).css('height', this.configs.hButton);
	$('#' + this.btnId + ' div:eq(0)').css('width', this.configs.wButton - 20).css('overflow', 'hidden').css('float', 'left');
    //
    this.buildDivFrame();
    this.buildWindow();
    this.bindValue();
    return this;
};

WEB_UI.prototype.buildWindow = function() {
	switch (this.initDrawMethod) {
		case 'country': // 生成国家列表
			this.buildContinentList();
			break;
		case 'industry': // 生成行业列表
			this.buildIndustryList();
			break;
		case 'position': // 生成职业分类列表
			this.buildPositionList();
			break;
        case 'subposition': // 生成职业子类列表，需指定parentKeyId
            this.buildSubPositionList();
            break;
        case 'province': // 生成省份列表
            this.buildProvinceList();
            break;
        case 'city': // 生成城市列表
            this.buildCityList();
            break;
        case 'major': // 生成专业列表
            this.buildMajorList();
            break;
        case 'submajor': // 生成专业子类列表
            this.buildSubMajorList();
            break;
	}
	this.isBuilded = true;
	//
	return this;
};

/**
 * 构建DIV窗口框架
 */
WEB_UI.prototype.buildDivFrame = function() {
	var _html = '<div id="smain">';
	_html += '<div class="titbar">';
	_html += '<h4>';
	_html += '<b>' + this.configs.title + '：</b>';
	if (this.configs.multiple) {
		_html += '(最多添加' + this.configs.selectMax + '项)';
	}
	_html += '</h4>';
	_html += '<em>';
    if (this.configs.showLimitButton) {
        _html += '[<a href="javascript:void(0);" onclick="javascript:' + this.instanceName + '.noLimit();">不限</a>] - ';
    }
	// if (this.configs.multiple) {
		_html += '[<a id="makeSure" href="javascript:void(0);" onclick="javascript:' + this.instanceName + '.removeAllItems();">清除所选</a>] - ';
	// }
    _html += '[<a href="javascript:void(0);" onclick="javascript:' + this.instanceName + '.closeWindow();">确定</a>] - ';
	_html += '[<a href="javascript:void(0);" onclick="javascript:' + this.instanceName + '.closeWindowWithoutBindValue();">关闭</a>]';
	_html += '</em>';
	_html += '</div>';
	_html += '<div id="' + this.configs.prefix + '_content" class="txtbox">';
	if (this.configs.multiple) {
		_html += '<div class="sele"><b>已添加的选项：</b><ul id="' + this.configs.prefix + '_currently"></ul></div>';
	} else {
		_html += '<div class="sele"><b>当前选择的是：</b><ul id="' + this.configs.prefix + '_currently"><li>' + (this.selectedItems.length >= 1 ? this.selectedItems[0].itemValue : '') + '</li></ul></div>';
	}
	_html += '</div>';
	_html += '<div class="txtbot"><em></em></div>';
	//
	$('#' + this.divId).empty().html(_html);
	//
	return this;
};

/**
 * 添加选择项
 */
WEB_UI.prototype.addItem = function(key, value) {
	if (!this.configs.multiple) {
		this.selectedItems[0] = { itemKey : key, itemValue : value };
		var tag = $('#' + this.configs.prefix + '_currently').empty();
		tag.append('<li id="' + id + '">' + value + '<li>');
	} else if (this.selectedItems.length < this.configs.selectMax) {
		var id = this.configs.prefix + '_curr_select_item_id_' + key;
		/// 判断是否已经选择此项
		var isSelected = false;
		for (var opt in this.selectedItems) {
			if (key == this.selectedItems[opt].itemKey) {
				isSelected = true;
				break;
			}
		}
		if (!isSelected) {
			this.selectedItems[this.selectedItems.length] = { itemKey : key, itemValue : value };
			$('#' + this.configs.prefix + '_currently').append('<li id="' + id + '">' + '<a href="javascript:void(0);" onclick="javascript:' + this.instanceName + '.removeItem(\'' + key + '\');" title="' + value + '"><img src="img/ui/x.gif" border="0" title="移除"/>' + value + '</a><li>');
		}
	} else {
		alert('选择项最多不能超过' + this.configs.selectMax + "个.");
	}
	//
	return this;
};

/**
 * 移除所有已选项
 */
WEB_UI.prototype.removeAllItems = function() {
	this.selectedItems = [];
	$('#' + this.configs.prefix + '_currently').empty();
	//
	return this;
};

/**
 * 移除一个已选项
 */
WEB_UI.prototype.removeItem = function(key) {
	var id = this.configs.prefix + '_curr_select_item_id_' + key;
	var newarray = [];
	for (var opt in this.selectedItems) {
		if (key != this.selectedItems[opt].itemKey) {
			newarray[newarray.length] = this.selectedItems[opt];
		}
	}
	this.selectedItems = newarray;
	// $('#' + id).empty();
	$('#' + this.configs.prefix + '_currently').empty();
	for (var opt in this.selectedItems) {
		id = this.configs.prefix + '_curr_select_item_id_' + this.selectedItems[opt].itemKey;
		$('#' + this.configs.prefix + '_currently').append('<li id="' + id + '">' + '<a href="javascript:void(0);" onclick="javascript:' + this.instanceName + '.removeItem(\'' + this.selectedItems[opt].itemKey + '\');" title="' + this.selectedItems[opt].itemValue + '"><img src="img/ui/x.gif" border="0" title="移除"/>' + this.selectedItems[opt].itemValue + '</a><li>');
	}
	//
	return this;
};

WEB_UI.prototype.noLimit = function() {
    this.selectedItems = [{itemKey : '-1', itemValue : '不限'}];
    this.closeWindow();
};

/**
 * 关闭窗口
 */
WEB_UI.prototype.closeWindow = function() {
    // 关闭弹出层
     if ($('#webui_popdiv').length != 0) {
         $('#webui_popdiv').hide('fast');
     }
	//
	this.bindValue();
    //
    if (this.configs.parentList) {
        eval(this.configs.subInstanceName + ".clearSelectedValuesAndReSetup()");
    }
	$('#' + this.divId).hide('fast');
	$('#mask').hide();
	//触发自定义事件
	for(customEvent in this.customEvents){
		$('#' + this.divId).trigger(this.customEvents[customEvent]);
	}
	return this;
};

WEB_UI.prototype.registerEvent = function(customEvent) {
	this.customEvents.push(customEvent);
}

WEB_UI.prototype.closeWindowWithoutBindValue = function() {
    // 关闭弹出层
     if ($('#webui_popdiv').length != 0) {
         $('#webui_popdiv').hide('fast');
     }
     //
     $('#' + this.divId).hide('fast');
     $('#mask').hide();
     //
     return this;
};

WEB_UI.prototype.clearSelectedValuesAndReSetup = function() {
    this.selectedItems = [];
    this.buildDivFrame();
    this.buildWindow();
    this.bindValue();
    return this;
};

/**
 * 绑定选项值
 */
WEB_UI.prototype.bindValue = function() {
	var hiddenValue = [];
	var dispValue = '';
	for (var opt in this.selectedItems) {
		hiddenValue[opt] = this.selectedItems[opt].itemKey;
		dispValue += this.selectedItems[opt].itemValue + '  ';
	}
	if (hiddenValue.length == 0) {
		dispValue = '选择/修改';
	} else if (hiddenValue[0].itemKey == '-1') {
		dispValue = '不限';
	}

	$('#' + this.hiddenId).val(hiddenValue);
	$('#' + this.btnId + ' div:eq(0)').empty().append(dispValue);
	$('#' + this.btnId).attr({title:dispValue});
	//
	return this;
};

WEB_UI.prototype.showChildren = function(key, parentId) {
    if ($('#webui_popdiv').length == 0) {
        $('body').append('<div id="webui_popdiv" style="font:12px/19px 宋体;padding:5px 10px 5px 10px;background:#ffffff;border:1px solid #ffc264;;position:absolute;display:none;z-index:18777;"></div>');
	}
	var _html = '<ul>';
	for (var opt in this.configs.childrenDatas) {
		if (this.configs.childrenDatas[opt].parentKey == key) {
			_html += '<li style="list-style-type:none;clear:both;padding-top:5px;">';
			_html += '<img src="img/ui/r1.gif" border="0"/> ';
			_html += '<a href="javascript:void(0);" onclick="javascript:' + this.instanceName + '.addItem(\'' + this.configs.childrenDatas[opt].key + '\',\'' + this.configs.childrenDatas[opt].value + '\');" title="' + this.configs.childrenDatas[opt].value + '">' + this.configs.childrenDatas[opt].value + '</a>';
			_html += '</li>';
		}
	}
	_html += '</ul>';
    $('#webui_popdiv').css('top', $('#' + parentId).offset().top);
    $('#webui_popdiv').css('left', ($('#' + parentId).offset().left + $('#' + parentId).width()));
    $('#webui_popdiv').hover(function() {}, function() { $('#webui_popdiv').hide('fast');});
	$('#webui_popdiv').empty().append(_html);
	$('#webui_popdiv').show('fast');
};
/**
 * 显示窗口
 */
WEB_UI.prototype.showWindow = function() {
	//
	if (!this.isBuilded) {
		this.buildWindow();
	}
	//
	$('#mask').height($(document).height());
	$('#mask').show();
	//
	// $('#' + this.divId).css('top', $('#' + this.btnId).offset().top);
    // $('#' + this.divId).css('left', $('#' + this.btnId).offset().left);
    // var top = $(document).height() / 2 - $('#' + this.divId).height() / 2;
    var top = $('#' + this.btnId).offset().top;
    var left = $(document).width() / 2 - $('#' + this.divId).width() / 2;
    if (top < 0) {
        top = 0;
    }
    if (left < 0) {
        left = 0;
    }
    $('#' + this.divId).css('left', left);
    $('#' + this.divId).css('top', top);
	//
	$('#' + this.divId).show('fast');
	//
	return this;
};

/**
 * 构建内容
 *
 * @param createDivElement 是否创建外层DIV元素
 * @param divId 输出到DIV元素的ID
 * @param datas 数据源
 */
WEB_UI.prototype.buildContent = function(createDivElement, divId, datas) {
	var _html = '';
	if (createDivElement) {
		_html += '<div id="' + divId + '" class="txt">';
	}
    if (datas.length > 0) {
        var i = 0;
        var newline = true;
        var initDatas = $('#' + this.hiddenId).val() != null ? $('#' + this.hiddenId).val().split(this.configs.separator, this.configs.selectMax) : null;
        for(var opt in datas) {
            if (newline) {
                _html += '<ul>';
                newline = false;
            }
            _html += '<li>';
            _html += '<img src="img/ui/r1.gif" border="0"/> ';
            if (!this.configs.showChildren) {
                _html += '<a href="javascript:void(0);" onclick="javascript:' + this.instanceName + '.addItem(\'' + datas[opt].key + '\',\'' + datas[opt].value + '\');" title="' + datas[opt].value + '">';
                _html += datas[opt].value;
                _html += '</a>';
            } else {
                var id = this.configs.prefix + '_datas_li_' + opt;
                _html += '<a id="' + id + '" href="javascript:void(0);" onclick="javascript:' + this.instanceName + '.showChildren(\'' + datas[opt].key + '\', \'' + id +'\');" title="' + datas[opt].value + '">';
                _html += datas[opt].value;
                _html += '</a>';
            }
            _html += '</li>';
            if (i >= this.configs.nCols - 1) {
                _html += '</ul>';
                i = 0;
                newline = true;
            } else {
                i++;
            }
            // 初始化已选项数据
            if (initDatas != null && !this.configs.showChildren) {
                for (var index in initDatas) {
                    if (datas[opt].key == initDatas[index]) {
                        this.addItem(datas[opt].key, datas[opt].value);
                    }
                }
            }
        }
        if (initDatas != null && this.configs.showChildren) {
            for (var _index_initDatas in initDatas) {
                for (var _index in this.configs.childrenDatas) {
                    if (this.configs.childrenDatas[_index].key == initDatas[_index_initDatas]) {
                        this.addItem(this.configs.childrenDatas[_index].key, this.configs.childrenDatas[_index].value);
                        break;
                    }
                }
            }
        }
        if (!_html.endWith('</ul>')) {
            _html += '</ul>';
        }
    } else {
        _html += '<ul><li>请先选择上级分类！</li></ul>';
    }
	if (createDivElement) {
		_html += '<div class="clear"></div>';
	}
	$('#' + divId).append(_html);
	//
	return this;
};

WEB_UI.prototype.getParent = function() {
	if (this.selectedItems.length > 0) {
        if (!this.configs.multiple) {
            var key = this.selectedItems[0].itemKey;
            for (var opt in this.configs.childrenDatas) {
                if (this.configs.childrenDatas[opt].key == key) {
                    return this.configs.childrenDatas[opt]; // [{key:'0', parentKey :'0', value :'dfdf'}]
                }
            }
		} else {
			var _parents = [];
			for (var item in this.selectedItems) {
				for (var opt in this.configs.childrenDatas) {
					if (this.configs.childrenDatas[opt].key == this.selectedItems[item].itemKey) {
						_parents[_parents.length] = this.configs.childrenDatas[opt].parentKey;
					}
				}
			}
			//
			var returnvalue = "";
			for (var i=0; i < _parents.length; i++) {
				returnvalue += _parents[i];
				if (i != _parents.length - 1) {
					returnvalue += ",";
				}
			}
			return ({ key:'', parentKey:returnvalue, value:'' });
		}
    }
    return {};
};

WEB_UI.prototype.getSelectedItemsParentDatas = function() {
    var _returnValue = [];
	if (this.selectedItems.length > 0) {
		for (var index in this.selectedItems) {
            var key = this.selectedItems[index].itemKey;
            for (var opt in this.configs.childrenDatas) {
                if (this.configs.childrenDatas[opt].key == key) {
                    _returnValue[_returnValue.length] = this.configs.childrenDatas[opt]; // [{key:'0', parentKey :'0', value :'dfdf'}]
                    break;
                }
            }
        }
    }
    return _returnValue;
};

//////
//-------------------------------------------
/////


/**
 * 构建洲列表
 */
WEB_UI.prototype.buildContinentList = function() {
	var _html = '';
	for(var opt in continents) {
		var id = this.configs.prefix + '_country_list_' + opt;
		_html += '<div id="' + id + '" class="txt">';
		_html += '<b><img src="img/ui/r.gif" border="0"/> ' + continents[opt].value + '</b>';
		_html += '<' + 'script type="text/javascript">' + this.instanceName + '.buildCountryList("' + continents[opt].key + '","' + id + '");</' + 'script></div>';
	}
	_html += '<div class="clear"></div>';
	$('#' + this.configs.prefix + '_content').append(_html);
};

/**
 * 构建国家列表
 */
WEB_UI.prototype.buildCountryList = function(parentKeyId, divId) {
	var data = [];
	for (var opt in country) {
		if (country[opt].parentKey == parentKeyId) {
			data[data.length] = country[opt];
		}
	}
	this.buildContent(false, divId, data, false);
};

/**
 * 构建行业列表
 */
WEB_UI.prototype.buildIndustryList = function() {
	this.buildContent(true, this.configs.prefix + '_content', industry);
};

/**
 * 构建职业分类列表
 */
WEB_UI.prototype.buildPositionList = function() {
	this.buildContent(true, this.configs.prefix + '_content', positions);
};

WEB_UI.prototype.buildSubPositionList = function() {
    var parentKey = $('#' + this.configs.parentKeyId).val();
    var _datas = [];
    for (var opt in sub_positions) {
		if (sub_positions[opt].parentKey == parentKey) {
            _datas[_datas.length] = sub_positions[opt];
        }
    }
    this.buildContent(true, this.configs.prefix + '_content', _datas);
};

WEB_UI.prototype.buildProvinceList = function() {
	this.buildContent(true, this.configs.prefix + '_content', provinces);
};

WEB_UI.prototype.buildCityList = function() {
    var parentKey = $('#' + this.configs.parentKeyId).val();
    var _datas = [];
    for (var opt in cities) {
		if (cities[opt].parentKey == parentKey) {
            _datas[_datas.length] = cities[opt];
        }
    }
    this.buildContent(true, this.configs.prefix + '_content', _datas);
};

WEB_UI.prototype.buildMajorList = function() {
	this.buildContent(true, this.configs.prefix + '_content', majors);
};

WEB_UI.prototype.buildSubMajorList = function() {
    var parentKey = $('#' + this.configs.parentKeyId).val();
    var _datas = [];
    for (var opt in sub_majors) {
		if (sub_majors[opt].parentKey == parentKey) {
            _datas[_datas.length] = sub_majors[opt];
        }
    }
    this.buildContent(true, this.configs.prefix + '_content', _datas);
};

///////
// 通过AJAX调用数据字典并生成JS数据
/////

/**
 * @param divId 内容输出层ID
 * @param dictId 数据字典ID
 * @param varName 生成的变量名称
 */
WEB_UI.prototype.buildDatas = function(divId, dictId, varName) {
	webUIOperateHelper.getDataDictDetailByDictId(dictId, { callback: function(data) {
		var _html = 'var ' + varName + ' = [<br/>';
		for(var opt in data) {
			_html += '{ ';
			_html += 'key : "' + data[opt].key + '", parentKey : "' + data[opt].parentKey + '", value : "' + data[opt].value + '"';
			_html += ' }, <br/>';
		}
		if (_html.endWith(', <br/>')) {
			_html = _html.substring(0, _html.lastIndexOf(','));
			_html += "<br/>"
		}
		_html += '];<br/>';
		$('#' + divId).append(_html);
	}});
	return this;
};