$.fn.customInput = function(options) {
	var settings = {
		type: '',
		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 == 'input' || nodeName == 'select' ) {
			config.type = nodeName;
		}
	};
	
	var getInputVal = function() {
		if ( config.type == 'input' ) {
			config.val = $$.val();
		}
		
		if ( config.type == 'select' ) {
			$$.find('option').each(function() {
				var _this = $(this);
				var obj = {};
				obj.val = _this.val();
				obj.text = _this.text();
				obj.status = _this.attr('selected') ? 1 : 0;
				config.val.push(obj);
			});
		}
	};
	
	var createHtml = function() {
		var html = '';
		if ( config.type == 'input' ) {
			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 = '';
			if ( config.val.length ) {
				htmlDropdown += '<ul class="select-list">';
				for ( var x in config.val ) {
					if ( config.val[x].status == '1' ) selected = config.val[x];
					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 type="hidden" name="' + $$.attr('name') + '" value="' + selected.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;
			
			var html = $parent.find('ul.select-list').html();
			$panel.html(html);
			$panel.css({left:pos.left + 'px', top:pos.top + 'px', width:width + 'px'});
			panelShow();
			
			$panel.find('li').hover(function() {
				$(this).addClass('hovered');
			}, function() {
				$(this).removeClass('hovered');
			}).click(function() {
				var self = $(this);
				var $input = $parent.find('input');
				
				var thisText = self.text();
				var thisVal  = self.attr('v');
				var thisType = $input.attr('name');
				
				_this.find('span.text').text( thisText );
				$input.val( thisVal );
				panelHide();
				
				settings.callback(thisType, thisVal, thisText);
			});
			
		});
	};
	
	var createPanel = function() {
		var html = '';
		html += '<ul id="cab-select-list" class="reset">';
		html += '</ul>';
		$('#container').after(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();
	};
	
	var $$ = $parent = null;
	$all.each(function() {
		$$ = $(this);
		$parent = $$.parent();
		init();
	});
}