/*
	title: jQuery.jQselectable.js (ex jQuery.selectable.js)
	required: jQuery(tested on 1.4.2)
	encoding: UTF-8
	copy: Copyright 2008-2010 nori (norimania@gmail.com)
	license: MIT
	author: 5509 - http://5509.me/
	archive: http://jqselectable.googlecode.com/
	modified: 2010-12-02 14:00
	rebuild: 2009-09-16 22:48
	date: 2008-09-14 02:34
 */

(function ($) {

	// jQuery.jQselectable
	// Make selectbox so usuful and accesible
	// @ 2010-01-09
	var jQselectable = function (select, options, temp) {
		this.conf = {
			style: 'selectable', // or 'simple'
			set: 'show', // 'show', 'slideDown' or 'fadeIn'
			out: 'hide', // 'hide', 'slideUp' or 'fadeOut'
			setDuration: 'normal', // 'slow', 'normal', 'fast' or int(millisecond)
			outDuration: 'normal',
			opacity: 1, // pulldown opacity
			top: 0,
			left: 0,
			callback: null
		}
		this.temp = {
			selectable: '<div class="sctble_cont"/>',
			simpleBox: '<div class="simple_cont"/>'
		}

		// Extend confs and temps by user options
		$.extend(this.conf, options || {});
		$.extend(this.temp, temp || {});

		this.target = $(select);
		this.matHeight = 0;
		this.attrs = {
			id: this.target.attr('id'),
			cl: this.target.attr('class')
		}
		this.generatedFlg = false;

		// Init start
		this.init();
	}

	jQselectable.prototype = {
		// Init selectable
		// @ 10-01-09 21:00
		init: function () {
			// Build selectable
			this.build();
			// Event apply
			this.bind_events();
			// Switch flag true
			this.generatedFlg = true;
		},

		// Rebuild selectable
		// @ 09-09-18 17:28
		rebuild: function () {

			//console.log('called rebuild');

			// unbind events from elements related selectable
			this.m_input.unbind();
			this.mat.unbind();
			$('a', this.mat).unbind();
			$('label[for="' + this.attrs.id + '"]').unbind();

			// Build selectable
			this.build();

			// Event apply
			this.bind_events();
		},

		// Building selectable from original select element
		// @ 2010-01-09 21:00
		build: function () {

			// Declare flag
			var has_optgroup = $('optgroup', this.target).length > 0 ? true : false;

			var _this = this;
			var generate_anchors = function (obj, parent) {
				var _a = $('<a/>');
				$(parent).append(_a);

				_a.text(obj.text()).attr({
					href: '#' + encodeURI(obj.text()),
					name: obj.val()
				});

				if (obj.is(':selected')) {
					_this.m_text.text(obj.text());
					_a.addClass('selected');
				}
				if (obj.hasClass('br')) {
					_a.after('<br/>');
				}
			}

			if (!this.m_input) {
				this.m_input = $('<a/>');
				this.m_text = $('<span/>');
				var _style = this.conf.style.match(/simple/) ? 'sBox' : 'sctble';

				this.m_input.append(this.m_text).attr({
					id: this.attrs.id + '_dammy',
					href: '#'
				}).addClass('sctble_display').addClass(_style).addClass(this.attrs.cl).insertAfter(this.target);
				this.target.hide();
				this.mat = $('<div/>');

				// Customized
				if (_style == 'simple') {
					this.mat.append(this.temp.selectable);
				} else {
					this.mat.append(this.temp.simpleBox);
				}
				// Customized end
				this.mat.attr({
					id: this.attrs.id + '_mat'
				}).addClass(_style).addClass(this.attrs.cl);
			}

			// For rebuilding
			if (this.generatedFlg) {
				this.mat.empty();

				if (_style == 'simple') {
					this.mat.append(this.temp.selectable);
				} else {
					this.mat.append(this.temp.simpleBox);
				}
			}

			this._div = $('<div class="body"/>');
			if (has_optgroup) {
				this.mat.addClass('otpgroup');
				var _optgroup = $('optgroup', this.target);
				var _option = [];

				for (var i = 0; i < _optgroup.length; i++) {
					_option[i] = $('option', _optgroup[i]);
				}

				var _dl = $('<dl/>');

				for (var i = 0; i < _optgroup.length; i++) {
					var _dt = $('<dt/>');
					_dt.text($(_optgroup[i]).attr('label'));
					var _dd = $('<dd/>');
					for (var j = 0; j < _option[i].length; j++) {
						generate_anchors($(_option[i][j]), _dd);
					}
					_dl.append(_dt).append(_dd);
				}
				this._div.append(_dl).addClass('optg');
				$('div', this.mat).append(this._div);

			} else {
				this.mat.addClass('nooptgroup');
				var _option = $('option', this.target);
				for (var i = 0; i < _option.length; i++) {
					generate_anchors($(_option[i]), this._div);
				}
				$('div', this.mat).append(this._div.addClass('nooptg'));
			}

			// For rebuilding
			if (!this.generatedFlg) {
				$('body').append(this.mat);
				this.mat.addClass('sctble_mat').css({
					position: 'absolute',
					zIndex: 1000,
					display: 'none'
				});
				$('*:first-child', this.mat).addClass('first-child');
				$('*:last-child', this.mat).addClass('last-child');
			}

			// This is for IE6 that doesn't have "max-height" properties
			if (document.all && typeof document.body.style.maxHeight == 'undefined') {
				if (this.conf.height < this.mat.height()) {
					$(this._div).css('height', this.conf.height);
				}
				// Other browsers
			} else {
				$(this._div).css('maxHeight', this.conf.height);
			}

			// get height of the mat
			this.mat.show();
			this.matHeight = this.mat.attr('offsetHeight');
			this.mat.hide();
		},

		// Bind events
		// @ 09-09-17 22:59
		bind_events: function () {
			var _this = this;
			// Flag checking where the events was called
			var is_called = true;

			var set_pos = function () {
				var topPos,
					scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
					clientHeight = document.documentElement.clientHeight || document.body.clientHeight,
					_pos = _this.m_input.offset();
				
//				if (clientHeight / 2 < (_pos.top - scrollTop)) {
//					topPos = _pos.top - _this.matHeight + _this.conf.top - 5; 
//				} else {
					topPos = _pos.top + _this.m_input.height() * 1.3 + _this.conf.top;
//				} 
				_this.mat.css({
					top: topPos,
					left: _pos.left + _this.conf.left
				});
			}
			$(window).resize(function () {
				set_pos();
			});

			// Hide all mats are displayed
			var mat_hide = function () {
				var _mat = $('.sctble_mat');

				switch (_this.conf.out) {
					case 'slideUp':
						_mat.slideUp(_this.conf.outDuration);
						break;
					case 'fadeOut':
						_mat.fadeOut(_this.conf.outDuration);
						break;
					default:
						_mat.hide();
						break;
				}
			}

			// Show the mat
			var mat_show = function () {
				mat_hide();

				if (_this.conf.set == 'slideDown') {
					var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
						clientHeight = document.documentElement.clientHeight || document.body.clientHeight,
						_pos = _this.m_input.offset(),
						balance = clientHeight / 2 < (_pos.top - scrollTop);

					if (balance) {
						_this.mat.css('top', _pos.top + _this.conf.top - 5);
					}
				}

				if (_this.conf.set == 'slideDown') {
					if (balance) {
						_this.mat
							.animate({
								height: 'toggle',
								top: parseInt(_this.mat.css('top')) - _this.matHeight
							}, {
								easing: 'swing',
								duration: _this.conf.setDuration
							})
							.css('opacity', _this.conf.opacity);
					} else {
						_this.mat.slideDown(_this.conf.setDuration).css('opacity', _this.conf.opacity);
					}
				} else
					if (_this.conf.set == 'fadeIn') {
						_this.mat.css({
							display: 'block',
							opacity: 0
						}).fadeTo(_this.conf.setDuration, _this.conf.opacity);
					} else {
						_this.mat.show().css('opacity', _this.conf.opacity);
					}

				var _interval = isNaN(_this.conf.setDuration) ? null : _this.conf.setDuration + 10;
				if (_interval == null) {
					if (_this.conf.setDuration.match(/slow/)) {
						interval = 610;
					} else if (_this.conf.setDuration.match(/normal/)) {
						interval = 410;
					} else {
						interval = 210;
					}
				}

				var _chk = setInterval(function () {
					$('a.selected', _this.mat).focus();
					clearInterval(_chk);
				}, _interval);
			}

			// Call selectable
			this.m_input.click(function (event) {
				if (_this.mat.is(':visible')) return false;
				set_pos();
				$(this).addClass('sctble_focus');
				$('a.sctble_display').not(this).removeClass('sctble_focus');

				mat_show();
				event.stopPropagation();
				return false;
			}).keyup(function (event) {
				if (is_called) {
					set_pos();
					mat_show();
					event.stopPropagation();
				} else {
					is_called = true;
				}
			});

			// Stop event propagation
			this.mat.click(function (event) {
				event.stopPropagation();
			});

			// Hide the mat
			$('body, a').not('a.sctble_display').click(function (event) {
				$('a.sctble_display').removeClass('sctble_focus');
				mat_hide();
			}).not('a').keyup(function (event) {
				if (event.keyCode == '27') {
					$('a.sctble_focus').removeClass('sctble_focus');
					is_called = false;
					_this.m_input.blur();
					mat_hide();
				}
			});

			// Click value append to both dummy and change original select value
			$('a', this.mat).click(function () {
				var self = $(this);
				_this.m_text.text(decodeURI(self.attr('href').split('#')[1]));
				$('option[value="' + self.attr('name') + '"]', _this.target).attr('selected', 'selected');
				$('.selected', _this.mat).removeClass('selected');
				self.addClass('selected');
				_this.m_input.removeClass('sctble_focus');
				is_called = false;
				mat_hide();

				if (_this.conf.callback && typeof _this.conf.callback == 'function') {
					_this.conf.callback.call(_this.target);
				}

				_this.m_input.focus();
				return false;
			});

			// Be able to click original select label
			$('label[for="' + this.attrs.id + '"]').click(function (event) {
				set_pos();
				_this.m_input.addClass('sctble_focus');
				$('a.sctble_focus').not(_this.m_input).removeClass('sctble_focus');
				mat_show();
				event.stopPropagation();
				return false;
			});
		}
	}

	// Extense the namespace of jQuery as method
	// This function returns (the) instance(s)
	$.fn.jQselectable = function (options, temp) {
		if ($(this).length > 1) {
			var _instances = [];
			$(this).each(function (i) {
				_instances[i] = new jQselectable(this, options, temp);
			});
			return _instances;
		} else {
			return new jQselectable(this, options, temp);
		}
	}

	// If namespace of jQuery.fn has 'selectable', this is 'jQselectable'
	// To prevent the interference of namespace
	// You can call 'selectable' method by both 'jQuery.fn.selectable' and 'jQuery.fn.jQselectable' you like
	if (!jQuery.fn.selectable) {
		$.fn.selectable = $.fn.jQselectable;
	}

})(jQuery);