(function($) {
	$.fn.timePicker = function(params) {
		params = $.extend( {defaultTime: 0, mouseoverClass: 'jquery-timepicker-mouseover'}, params);
		
		var newHTML = '';
		var $t = $(this);
		
		var height = this.height()+1;
		var width = this.outerWidth();
		
		var timeMargins = ['00', '30'];
		newHTML += ' <select style="position: absolute; left:0;top:' + height + 'px; width: ' + width + 'px;" size="7">'
		for(var h = 0; h <= 23; h++)
		{
			for(var i = 0; i < timeMargins.length; i++)
			{
				var newhour = "" + h;
				var v = (newhour.length == 1 ? '0' : '') + h + ':' + timeMargins[i];
				newHTML += '<option>' + v + '</option>';
			}
		}
		newHTML += '</select>';
		
		var id = this.attr('id');
		var newid = id + '-container';
		
		$t.wrap('<div id="' + newid + '" style="position: relative; display: inline;"></div>');
		$t.after(newHTML);
		
		$("#" + newid + " select").hide();
		
		// 2) Hide the dropdown if we've clicked it
		/*$("#" + newid + " select").click(function (e) {
			$(this).hide();
		});*/

		// 3) Hide the dropdown if we lose focus
		$t.blur(function (e) {
				$(this).val($("#" + newid + " select").val()); // put the value in the input
				$("#" + newid + " select").hide(); // hide the select
			$("#" + newid + " select").change();
		});
		
		$t.focus(function () {
			$("#" + newid + " select").show();
		});		
		
		$("#" + newid + " select").change(function () {
	        $t.val($(this).val());
	        $(this).hide();
		});
		
		$("#" + newid + " select option").mouseover(function () {
			$(this).addClass(params.mouseoverClass);
		});
		$("#" + newid + " select option").mouseout(function () {
			$(this).removeClass(params.mouseoverClass);
		});

		return this;
	};

})(jQuery);