/**
 * @example
 * $('#province').interactive(ROOT_URL + 'area/item-{id}.html', {
 *	grade: 3,
 * 	selects: [$('#province'), $('#state'), $('#city')],
 *	init: [102000000, 102020000, 102020003]
 * });
 *
 * $('#province').interactive(ROOT_URL + 'area/item-{id}.html', {
 * 	defaults: ['Please select province', 'Please select state', 'Please select city'], //defaults: 'Please select',
 *	init: [102000000, 102020000, 102020003],
 *	separator: '<br />',
 *	size: 5,
 *	escape: true
 * });
 */
$.fn.interactive = function(url, options)
{
	var settings = {
		grade: null,
		selects: null,
		defaults: null,
		init: null,
		separator: ' ',
		size: 1,
		loading: '<span class="selectLoading">Loading ...<\/span>',
		value: 'value',
		text: 'text',
		empty: '_',
		escape: false,
		disableDefault: false,
		fn: function(){}
		};
	$.extend(settings, options);

	//auto create: true or false
	var autoCreate = true;
	if (settings.selects) {
		autoCreate = false;
		settings.grade = settings.selects.length + 1;
	}

	//连动, 先为select填充数据, 然后再为此绑定事件
	var chain = function(sn) {

		var $this = $(this);

		//清空或者disabled后面所有元素
		if (autoCreate) {
			while (_node = this.nextSibling) {
				$(_node).remove();
			}
		} else {
			for (var i=sn-2; i<settings.grade-1; i++) {
				settings.selects[i].attr('disabled', 'disabled');
			}
		}

		//选择空值时直接返回
		if (this.value == settings.empty) {
			return;
		}

		//loading
		if (autoCreate) {
			$this.after(settings.separator + settings.loading);
		} else {
			settings.selects[sn-2].prepend('<option>' + settings.loading + '<\/option>')
			.get(0).selectedIndex = 0;
		}

		//ajax request
		$.ajax({
			url: url.replace('{id}', $this.val()),
			dataType: 'json',
			global: false,
			success: function(data) {

				//清空后面所有元素(防止异步请求延迟)
				if (autoCreate) {
					while (_node = $this.get(0).nextSibling) {
						$(_node).remove();
					}
				}

				//未取到值
				if (data.constructor != Array || data.length == 0) {
					return;
				}

				//自动创建
				if (autoCreate) {
					//insert separator
					$this.after(settings.separator);

					//create select
					var size = '';
					if (settings.size > 1) {
						size = ' multiple="multiple" size="' + settings.size + '"';
					}
					var select = $('<select name="' + $this.attr('name') + '"' + size + '><\/select>');
					var domSelect = select.get(0);

					//append select
					$this.parent().append(select);

					//add default option
					if (settings.defaults) {
						var deftext = (typeof settings.defaults == 'string') ? settings.defaults : settings.defaults[sn-2];
						var firstOpt = new Option(deftext, settings.empty);
						if (settings.disableDefault) firstOpt.disabled = 'disabled';
						firstOpt.className = 'first';
						domSelect.options.add(firstOpt);
						domSelect.selectedIndex = 0;
					}

					//insert data
					var text, value;
					for (var i=0, len=data.length; i<len; i++) {
						text = data[i][settings.text];
						value = data[i][settings.value];

						if (settings.escape) {
							domSelect.options.add(new Option(text, value));
						} else {
							select.append('<option value="' + value + '">' + text + '<\/option>');
						}
					}

					//set default value
					if (settings.init && settings.init.length > 0) {
						domSelect.value = settings.init[sn-1];
						if (domSelect.selectedIndex == -1) {
							domSelect.selectedIndex = 0;
						}

						//clear settings.init
						if (!settings.init[sn]) {
							settings.init = null;
						}
					}

					//apply callback
					settings.fn.call(domSelect);

					//bind event and trigger event
					if (!settings.grade || sn < settings.grade) {
						select.change(function(){
							chain.call(this, sn+1);
						}).trigger('change');
					}
				}

				//非自动创建
				else {
					var select = settings.selects[sn-2];
					var domSelect = select.get(0);

					//delete "loading"
					domSelect.removeChild(domSelect.options[0]);

					//empty data
					if (domSelect.options.length) {
						domSelect.options.length = (domSelect.options[0].value == settings.empty) ? 1 : 0;
					}

					//insert data
					var text, value;
					for (var i=0, len=data.length; i<len; i++) {
						text = eval('data[i].' + settings.text);
						value = eval('data[i].' + settings.value);
						domSelect.options.add(new Option(text, value));
					}

					//remove disabled attribute
					select.removeAttr('disabled');

					//set default value
					if (settings.init && settings.init.length > 0) {
						domSelect.value = settings.init[sn-1];
						if (domSelect.selectedIndex == -1) {
							domSelect.selectedIndex = 0;
						}

						//clear settings.init
						if (!settings.init[sn]) {
							settings.init = null;
						}
					}

					//bind event and trigger event
					if (!settings.grade || sn < settings.grade) {
						if (!select._hasBindChangeEvent) {
							select._hasBindChangeEvent = 1;
							select.change(function(){
								chain.call(this, sn+1);
							});
						}
						select.trigger('change');
					}
				}
			}
		});
	};

	//为第一个select添加事件
	this.change(function(){
		//给下一个select提供value
		chain.call(this, 2);
	});

	//init first select
	if (settings.init && settings.init.length > 0 && settings.init[0] != settings.empty) {
		this.val(settings.init[0]).trigger('change');
	}
};