/*!
 * jquery selectbox plugin 0.2
 * download from http://www.sucaijiayuan.com
 */
(function ($, undefined) {
	var prop_name = 'selectbox',
		false = false,
		true = true;
	function selectbox() {
		this._state = [];
		this._defaults = { // global defaults for all the select box instances
			classholder: "sbholder",
			classholderdisabled: "sbholderdisabled",
			classselector: "sbselector",
			classoptions: "sboptions",
			classgroup: "sbgroup",
			classsub: "sbsub",
			classdisabled: "sbdisabled",
			classtoggleopen: "sbtoggleopen",
			classtoggle: "sbtoggle",
			classfocus: "sbfocus",
			speed: 200,
			effect: "slide", // "slide" or "fade"
			onchange: null, //define a callback function when the selectbox is changed
			onopen: null, //define a callback function when the selectbox is open
			onclose: null //define a callback function when the selectbox is closed
		};
	}
	$.extend(selectbox.prototype, {
		/**
		 * is the first field in a jquery collection open as a selectbox
		 * 
		 * @param {object} target
		 * @return {boolean}
		 */
		_isopenselectbox: function (target) {
			if (!target) {
				return false;
			}
			var inst = this._getinst(target);
			return inst.isopen;
		},
		/**
		 * is the first field in a jquery collection disabled as a selectbox
		 * 
		 * @param {htmlelement} target
		 * @return {boolean}
		 */
		_isdisabledselectbox: function (target) {
			if (!target) {
				return false;
			}
			var inst = this._getinst(target);
			return inst.isdisabled;
		},
		/**
		 * attach the select box to a jquery selection.
		 * 
		 * @param {htmlelement} target
		 * @param {object} settings
		 */
		_attachselectbox: function (target, settings) {
			if (this._getinst(target)) {
				return false;
			}
			var $target = $(target),
				self = this,
				inst = self._newinst($target),
				sbholder, sbselector, sbtoggle, sboptions,
				s = false, optgroup = $target.find("optgroup"), opts = $target.find("option"), olen = opts.length;
				
			$target.attr("sb", inst.uid);
				
			$.extend(inst.settings, self._defaults, settings);
			self._state[inst.uid] = false;
			$target.hide();
			
			function closeothers() {
				var key, sel,
					uid = this.attr("id").split("_")[1];
				for (key in self._state) {
					if (key !== uid) {
						if (self._state.hasownproperty(key)) {
							sel = $("select[sb='" + key + "']")[0];
							if (sel) {
								self._closeselectbox(sel);
							}
						}
					}
				}
			}
			
			sbholder = $("<div>", {
				"id": "sbholder_" + inst.uid,
				"class": inst.settings.classholder,
				"tabindex": $target.attr("tabindex")
			});
			
			sbselector = $("<a>", {
				"id": "sbselector_" + inst.uid,
				"href": "#",
				"class": inst.settings.classselector,
				"click": function (e) {
					e.preventdefault();
					closeothers.apply($(this), []);
					var uid = $(this).attr("id").split("_")[1];
					if (self._state[uid]) {
						self._closeselectbox(target);
					} else {
						self._openselectbox(target);
					}
				}
			});
			
			sbtoggle = $("<a>", {
				"id": "sbtoggle_" + inst.uid,
				"href": "#",
				"class": inst.settings.classtoggle,
				"click": function (e) {
					e.preventdefault();
					closeothers.apply($(this), []);
					var uid = $(this).attr("id").split("_")[1];
					if (self._state[uid]) {
						self._closeselectbox(target);
					} else {
						self._openselectbox(target);
					}
				}
			});
			sbtoggle.appendto(sbholder);

			sboptions = $("<ul>", {
				"id": "sboptions_" + inst.uid,
				"class": inst.settings.classoptions,
				"css": {
					"display": "none"
				}
			});
			
			$target.children().each(function(i) {
				var that = $(this), li, config = {};
				if (that.is("option")) {
					getoptions(that);
				} else if (that.is("optgroup")) {
					li = $("<li>");
					$("<span>", {
						"text": that.attr("label")
					}).addclass(inst.settings.classgroup).appendto(li);
					li.appendto(sboptions);
					if (that.is(":disabled")) {
						config.disabled = true;
					}
					config.sub = true;
					getoptions(that.find("option"), config);
				}
			});
			
			function getoptions () {
				var sub = arguments[1] && arguments[1].sub ? true : false,
					disabled = arguments[1] && arguments[1].disabled ? true : false;
				arguments[0].each(function (i) {
					var that = $(this),
						li = $("<li>"),
						child;
					if (that.is(":selected")) {
						sbselector.text(that.text());
						s = true;
					}
					if (i === olen - 1) {
						li.addclass("last");
					}
					if (!that.is(":disabled") && !disabled) {
						child = $("<a>", {
							"href": "#" + that.val(),
							"rel": that.val()
						}).text(that.text()).bind("click.sb", function (e) {
							if (e && e.preventdefault) {
								e.preventdefault();
							}
							var t = sbtoggle,
							 	$this = $(this),
								uid = t.attr("id").split("_")[1];
							self._changeselectbox(target, $this.attr("rel"), $this.text());
							self._closeselectbox(target);
						}).bind("mouseover.sb", function () {
							var $this = $(this);
							$this.parent().siblings().find("a").removeclass(inst.settings.classfocus);
							$this.addclass(inst.settings.classfocus);
						}).bind("mouseout.sb", function () {
							$(this).removeclass(inst.settings.classfocus);
						});
						if (sub) {
							child.addclass(inst.settings.classsub);
						}
						if (that.is(":selected")) {
							child.addclass(inst.settings.classfocus);
						}
						child.appendto(li);
					} else {
						child = $("<span>", {
							"text": that.text()
						}).addclass(inst.settings.classdisabled);
						if (sub) {
							child.addclass(inst.settings.classsub);
						}
						child.appendto(li);
					}
					li.appendto(sboptions);
				});
			}
			
			if (!s) {
				sbselector.text(opts.first().text());
			}

			$.data(target, prop_name, inst);
			
			sbholder.data("uid", inst.uid).bind("keydown.sb", function (e) {
				var key = e.charcode ? e.charcode : e.keycode ? e.keycode : 0,
					$this = $(this),
					uid = $this.data("uid"),
					inst = $this.siblings("select[sb='"+uid+"']").data(prop_name),
					trgt = $this.siblings(["select[sb='", uid, "']"].join("")).get(0),
					$f = $this.find("ul").find("a." + inst.settings.classfocus);
				switch (key) {
					case 37: //arrow left
					case 38: //arrow up
						if ($f.length > 0) {
							var $next;
							$("a", $this).removeclass(inst.settings.classfocus);
							$next = $f.parent().prevall("li:has(a)").eq(0).find("a");
							if ($next.length > 0) {
								$next.addclass(inst.settings.classfocus).focus();
								$("#sbselector_" + uid).text($next.text());
							}
						}
						break;
					case 39: //arrow right
					case 40: //arrow down
						var $next;
						$("a", $this).removeclass(inst.settings.classfocus);
						if ($f.length > 0) {
							$next = $f.parent().nextall("li:has(a)").eq(0).find("a");
						} else {
							$next = $this.find("ul").find("a").eq(0);
						}
						if ($next.length > 0) {
							$next.addclass(inst.settings.classfocus).focus();
							$("#sbselector_" + uid).text($next.text());
						}
						break;				
					case 13: //enter
						if ($f.length > 0) {
							self._changeselectbox(trgt, $f.attr("rel"), $f.text());
						}
						self._closeselectbox(trgt);
						break;
					case 9: //tab
						if (trgt) {
							var inst = self._getinst(trgt);
							if (inst/* && inst.isopen*/) {
								if ($f.length > 0) {
									self._changeselectbox(trgt, $f.attr("rel"), $f.text());
								}
								self._closeselectbox(trgt);
							}
						}
						var i = parseint($this.attr("tabindex"), 10);
						if (!e.shiftkey) {
							i++;
						} else {
							i--;
						}
						$("*[tabindex='" + i + "']").focus();
						break;
					case 27: //escape
						self._closeselectbox(trgt);
						break;
				}
				e.stoppropagation();
				return false;
			}).delegate("a", "mouseover", function (e) {
				$(this).addclass(inst.settings.classfocus);
			}).delegate("a", "mouseout", function (e) {
				$(this).removeclass(inst.settings.classfocus);	
			});
			
			sbselector.appendto(sbholder);
			sboptions.appendto(sbholder);			
			sbholder.insertafter($target);
			
			$("html").on('mousedown', function(e) {
				e.stoppropagation();          
				$("select").selectbox('close'); 
			});
			$([".", inst.settings.classholder, ", .", inst.settings.classselector].join("")).mousedown(function(e) {    
				e.stoppropagation();
			});
		},
		/**
		 * remove the selectbox functionality completely. this will return the element back to its pre-init state.
		 * 
		 * @param {htmlelement} target
		 */
		_detachselectbox: function (target) {
			var inst = this._getinst(target);
			if (!inst) {
				return false;
			}
			$("#sbholder_" + inst.uid).remove();
			$.data(target, prop_name, null);
			$(target).show();			
		},
		/**
		 * change selected attribute of the selectbox.
		 * 
		 * @param {htmlelement} target
		 * @param {string} value
		 * @param {string} text
		 */
		_changeselectbox: function (target, value, text) {
			var onchange,
				inst = this._getinst(target);
			if (inst) {
				onchange = this._get(inst, 'onchange');
				$("#sbselector_" + inst.uid).text(text);
			}
			value = value.replace(/\'/g, "\\'");
			$(target).find("option[value='" + value + "']").attr("selected", true);
			if (inst && onchange) {
				onchange.apply((inst.input ? inst.input[0] : null), [value, inst]);
			} else if (inst && inst.input) {
				inst.input.trigger('change');
			}
		},
		/**
		 * enable the selectbox.
		 * 
		 * @param {htmlelement} target
		 */
		_enableselectbox: function (target) {
			var inst = this._getinst(target);
			if (!inst || !inst.isdisabled) {
				return false;
			}
			$("#sbholder_" + inst.uid).removeclass(inst.settings.classholderdisabled);
			inst.isdisabled = false;
			$.data(target, prop_name, inst);
		},
		/**
		 * disable the selectbox.
		 * 
		 * @param {htmlelement} target
		 */
		_disableselectbox: function (target) {
			var inst = this._getinst(target);
			if (!inst || inst.isdisabled) {
				return false;
			}
			$("#sbholder_" + inst.uid).addclass(inst.settings.classholderdisabled);
			inst.isdisabled = true;
			$.data(target, prop_name, inst);
		},
		/**
		 * get or set any selectbox option. if no value is specified, will act as a getter.
		 * 
		 * @param {htmlelement} target
		 * @param {string} name
		 * @param {object} value
		 */
		_optionselectbox: function (target, name, value) {
			var inst = this._getinst(target);
			if (!inst) {
				return false;
			}
			//todo check name
			inst[name] = value;
			$.data(target, prop_name, inst);
		},
		/**
		 * call up attached selectbox
		 * 
		 * @param {htmlelement} target
		 */
		_openselectbox: function (target) {
			var inst = this._getinst(target);
			//if (!inst || this._state[inst.uid] || inst.isdisabled) {
			if (!inst || inst.isopen || inst.isdisabled) {
				return;
			}
			var	el = $("#sboptions_" + inst.uid),
				viewportheight = parseint($(window).height(), 10),
				offset = $("#sbholder_" + inst.uid).offset(),
				scrolltop = $(window).scrolltop(),
				height = el.prev().height(),
				diff = viewportheight - (offset.top - scrolltop) - height / 2,
				onopen = this._get(inst, 'onopen');
			el.css({
				"top": height + "px",
				"maxheight": (diff - height) + "px"
			});
			inst.settings.effect === "fade" ? el.fadein(inst.settings.speed) : el.slidedown(inst.settings.speed);
			$("#sbtoggle_" + inst.uid).addclass(inst.settings.classtoggleopen);
			this._state[inst.uid] = true;
			inst.isopen = true;
			if (onopen) {
				onopen.apply((inst.input ? inst.input[0] : null), [inst]);
			}
			$.data(target, prop_name, inst);
		},
		/**
		 * close opened selectbox
		 * 
		 * @param {htmlelement} target
		 */
		_closeselectbox: function (target) {
			var inst = this._getinst(target);
			//if (!inst || !this._state[inst.uid]) {
			if (!inst || !inst.isopen) {
				return;
			}
			var onclose = this._get(inst, 'onclose');
			inst.settings.effect === "fade" ? $("#sboptions_" + inst.uid).fadeout(inst.settings.speed) : $("#sboptions_" + inst.uid).slideup(inst.settings.speed);
			$("#sbtoggle_" + inst.uid).removeclass(inst.settings.classtoggleopen);
			this._state[inst.uid] = false;
			inst.isopen = false;
			if (onclose) {
				onclose.apply((inst.input ? inst.input[0] : null), [inst]);
			}
			$.data(target, prop_name, inst);
		},
		/**
		 * create a new instance object
		 * 
		 * @param {htmlelement} target
		 * @return {object}
		 */
		_newinst: function(target) {
			var id = target[0].id.replace(/([^a-za-z0-9_-])/g, '\\\\$1');
			return {
				id: id, 
				input: target, 
				uid: math.floor(math.random() * 99999999),
				isopen: false,
				isdisabled: false,
				settings: {}
			}; 
		},
		/**
		 * retrieve the instance data for the target control.
		 * 
		 * @param {htmlelement} target
		 * @return {object} - the associated instance data
		 * @throws error if a jquery problem getting data
		 */
		_getinst: function(target) {
			try {
				return $.data(target, prop_name);
			}
			catch (err) {
				throw 'missing instance data for this selectbox';
			}
		},
		/**
		 * get a setting value, defaulting if necessary
		 * 
		 * @param {object} inst
		 * @param {string} name
		 * @return {mixed}
		 */
		_get: function(inst, name) {
			return inst.settings[name] !== undefined ? inst.settings[name] : this._defaults[name];
		}
	});

	/**
	 * invoke the selectbox functionality.
	 * 
	 * @param {object|string} options
	 * @return {object}
	 */
	$.fn.selectbox = function (options) {
		
		var otherargs = array.prototype.slice.call(arguments, 1);
		if (typeof options == 'string' && options == 'isdisabled') {
			return $.selectbox['_' + options + 'selectbox'].apply($.selectbox, [this[0]].concat(otherargs));
		}
		
		if (options == 'option' && arguments.length == 2 && typeof arguments[1] == 'string') {
			return $.selectbox['_' + options + 'selectbox'].apply($.selectbox, [this[0]].concat(otherargs));
		}
		
		return this.each(function() {
			typeof options == 'string' ?
				$.selectbox['_' + options + 'selectbox'].apply($.selectbox, [this].concat(otherargs)) :
				$.selectbox._attachselectbox(this, options);
		});
	};
	
	$.selectbox = new selectbox(); // singleton instance
	$.selectbox.version = "0.2";
})(jquery);