$.fn.customInput = function(options) {
	var settings = {
		maxItem: 10,
		dropdownShow: function() { },
		dropdownMouseOver: function() { },
		dropdownMouseOut: function() { },
		dropdownHide: function() { },
		callback: function() {}
	};
	if (options) $.extend(settings, options);
	
	var config = {
		type: '',
		val: []
	};
	
	var $all = $(this);
	if ( !$all.size() ) return false;
	
	var init = function() {
		getType();
		if ( config.type == '' ) return false;
		config.val = [];
		
		getInputVal();
		createHtml();
		bindEvent();
	};
	
	var getType = function() {
		var nodeName = $$.get(0).nodeName.toLowerCase();
		if ( nodeName == 'select' ) {
			config.type = nodeName;
		}
		
		if ( nodeName == 'input') {
			config.type = $$.attr('type');
		}
	};
	
	var getInputVal = function() {
		if ( config.type == 'text' ) {
			config.val = $$.val();
		}
		
		if ( config.type == 'checkbox' ) {
			config.val = $$.val();
		}
		
		if ( config.type == 'select' ) {
			$$.find('option').each(function() {
				var _this = $(this);
				var obj = {};
				obj.text = _this.text();
				if ( obj.text == '') return true;
				obj.val = _this.val();
				obj.status = _this.attr('selected') ? 1 : 0;
				config.val.push(obj);
			});
		}
	};
	
	var createHtml = function() {
		var html = '';
		if ( config.type == 'text' ) {
			html += '<span class="mn-input"><span><span>';
			html += '<input type="text" name="' + $$.attr('name') + '" id="' + $$.attr('id') + '" value="' + config.val + '" />';
			html += '</span></span></span>';
		}
		if ( config.type == 'select' ) {
			var htmlDropdown = '';
			var selected = {val:'', text:''};
			if ( config.val.length ) {
				htmlDropdown += '<ul class="select-list" style="display:none;">';
				var len = Math.min(settings.maxItem, config.val.length);
				
				for ( var x = 0; x < len; x++ ) {
					if ( config.val[x].status == '1' ) selected = config.val[x];
					if ( config.val[x].text == '' ) continue;
					htmlDropdown += '<li v="' + config.val[x].val + '">' + config.val[x].text + '</li>';
				}
				htmlDropdown += '</ul>';
				
				htmlDropdown += '<ul class="select-list-more" style="display:none;">';
				if ( settings.maxItem < config.val.length ) {
					for ( x = settings.maxItem; x < config.val.length; x++ ) {
						if ( config.val[x].status == '1' ) selected = config.val[x];
						if ( config.val[x].text == '' ) continue;
						htmlDropdown += '<li v="' + config.val[x].val + '">' + config.val[x].text + '</li>';
					}
				}
				htmlDropdown += '</ul>';
			}
			
			html += '<span class="mn-select"><span class="text">' + selected.text + '</span><span class="button"></span></span>';
			html = html + htmlDropdown;
			
			html += '<input class="' + $$.attr('class') + '" type="hidden" name="' + $$.attr('name') + '" value="' + selected.val + '" />';
		}
		if ( config.type == 'checkbox' ) {
			var htmlCheckbox = '<span class="mn-checkbox ' + ($$.attr('checked') ? 'mn-checked' : '') + '"><span></span></span>';
			html = html + htmlCheckbox;
			html += '<input type="hidden" ifcheck="' + ($$.attr('checked') ? 1 : 0) + '" v="' + config.val + '" name="' + $$.attr('name') + '" value="' + ($$.attr('checked') ? config.val : '') + '" />';
		}
		
		$parent.append(html);
		$$.remove();
		return html;
	};
	
	var bindEvent = function() {
		$parent.find('span.mn-select').click(function(e) {
			e.stopPropagation();
			
			var _this = $(this);
			var $parent = _this.parent();
			var pos = _this.offset();
			pos.top = pos.top + _this.outerHeight() - 1;
			var width = _this.outerWidth() - 2;
			
			$panel.html($parent.find('ul.select-list').html());
			// get the maxItem, then set the height
			$panel.css({visibility:'hidden', display:'block', height:'auto'});
			$panel.css({visibility:'visible', display:'none'}).height($panel.innerHeight());
			$panel.append($parent.find('ul.select-list-more').html());
			
			var classList = $parent.find('input').attr('class').split(/\s+/);
			var classPrefix = 'cab-select-list-';
			var theClass = '';
			if ( classList.length ) {
				for ( var i = 0; i < classList.length; i++ ) {
					theClass = theClass + classPrefix + classList[i] + ' ';
				}
			}
			$panel.attr('class', theClass);
			
			$panel.css({left:pos.left + 'px', top:pos.top + 'px', width:width + 'px'});
			settings.dropdownShow($parent);
			panelShow();
			
			$panel.find('li').hover(function() {
				$(this).addClass('hovered');
				settings.dropdownMouseOver($(this));
			}, function() {
				$(this).removeClass('hovered');
				settings.dropdownMouseOut();
			}).click(function() {
				var self = $(this);
				var $input = $parent.find('input');
				
				var thisText = self.html();
				var thisVal  = self.attr('v');
				var thisType = $input.attr('name');
				
				_this.find('span.text').html( thisText );
				$input.val( thisVal );
				panelHide();
				
				settings.callback(thisType, thisVal, thisText);
			});
			
		});
		
		$parent.find('span.mn-checkbox').click(function() {
			var _this = $(this);
			var $input = _this.parent().find('input');
			var checked = $input.attr('ifcheck');
			
			if ( checked == '1' ) {
				$input.attr('ifcheck', '0').val('');
				_this.removeClass('mn-checked');
			} else {
				$input.attr('ifcheck', '1').val( $input.attr('v') );
				_this.addClass('mn-checked');
			}
		});
		
	};
	
	var createPanel = function() {
		var $panel = $('#cab-select-list');
		if ( $panel || $panel.size() ) {
			var html = '';
			html += '<ul id="cab-select-list" style="display:none;padding:0;margin:0;list-style-type:none;overflow:auto;"></ul>';
			$('body').append(html);
			var $panel = $('#cab-select-list');
		}
		
		$('body').click(function() {
			if ( panelStatus == 'show' ) panelHide();
		});
		$panel.click(function(e) {
			e.stopPropagation();
		});
		
		return $panel;
	};
	var panelStatus = 'hide';
	var $panel = createPanel();
	
	var panelShow = function() {
		panelStatus = 'show';
		$panel.show();
	};
	
	var panelHide = function() {
		panelStatus = 'hide';
		$panel.hide();
		settings.dropdownHide();
	};
	
	var $$ = $parent = null;
	$all.each(function() {
		$$ = $(this);
		$parent = $$.parent();
		init();
	});
}