jQuery(function($) {
		
	var $dialog = null;
	
	$.fn.showOptionsDialog = function($target, field, title, options) {
		return this.each(function(){
			var self = this;
			
			var clickHandler = getClickHandler($target, field);
			var container = $(this);
			
			//createOptions(optionsList, clickHandler, true);
			
			$dialog = $(this).dialog({ 
				modal: true, 
				open: function(){ 
					$(self).addClass("ui-widget ui-corner-all");
					createOptions(container, clickHandler, options, 0)},
				close: function(){ $(self).dialog('destroy'); },
				minHeight: 400,
				height: 500,
				minWidth: 200,
				width: 400,
				title: title
			});				
		});
	};
	
	function getClickHandler(target, field) {
		return function() {
			handleClick(target, field, this);
			return false;
		}
	}
	
	function handleClick(target, field, item) {
		var option = $(item).data("option");
		var value = $(target).val();
		if (value && value.length > 0) {
			$(target).val(value + " " + option.value);
		} else {
			$(target).val(option.value);
		}
		$dialog.dialog("close");
	}
	
	
	function createOptions(container, clickHandler, options, level) {
		$(container).children().remove();
		for (var i = 0; i < options.length; i++) {
			if (options[i].children && options[i].children.length > 0) {
				var optionWrapper = $("<div></div>").appendTo(container);
//					.hover(
//						function(e){
//							$(this).children(":first").next().slideDown('slow');
//						},
//						function(e){
//							$(this).children(":first").next().slideUp('slow');
//						}
//					);
				appendTo = optionWrapper;
				var optionDiv = $("<div style=\"position: relative\"><span class=\"ui-icon ui-icon-triangle-1-e\" style=\"position: absolute; margin-top: 1px\"/><span style=\"padding-left:" + (level + 1) * 16 + "px; line-height: 19px; font-size: 1.5em\">" + options[i].text + "</span></div>").appendTo(optionWrapper)
					.addClass("ui-widget ui-widget-content ui-helper-reset");
				optionDiv.children(":first").click(function(e){
					$(this).toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s");					
					$(this).parent().next().slideToggle('slow');
					return false;
				});
				if (options[i].value.length > 0) {
					optionDiv.addClass("ui-state-default");
					optionDiv.data("option", options[i]).click(clickHandler);
				} else {
					optionDiv.addClass("ui-state-active");
				}
				var childOptionsDiv = $("<div></div>").insertAfter(optionDiv).addClass("option-container").css("display", "none");
				createOptions(childOptionsDiv, clickHandler, options[i].children, level + 1);
				optionDiv.hover(
						function(e){
							$(this).addClass("ui-state-hover");	
						},
						function(e){
							$(this).removeClass("ui-state-hover");
						}
					);
			} else {
				var optionDiv = $("<div><span style=\"padding-left:" + (level + 1)  * 16 + "px; line-height: 19px; font-size: 1.5em\">" + options[i].text + "</span></div>").appendTo(container)
					.addClass("ui-widget ui-widget-content ui-helper-reset ui-state-default")
					.data("option", options[i]).click(clickHandler);
				optionDiv.hover(
						function(e){
							$(this).addClass("ui-state-hover");	
						},
						function(e){
							$(this).removeClass("ui-state-hover");
						}
					);
			}
		}
	}
	
});