(function($){
	$.plugin.register( $baseUrl+"scripts/jquery/jqx/jquery.autocomplete", {fn:'autocomplete'} );

	var handleTermChange = function(li){
		$("#termDefinition").load( $baseUrl+"data/definition?id="+li.extra[0] );
	};
	var handleStyleClick = function(e){
		var tgt = $(e.target);
	 	$("#danceTerms ul li.selected").removeClass("selected");
		tgt.addClass("selected");
		title.text("Dancepedia::"+tgt.text());
		status.text("loading "+tgt.text()+" details...");
		detail.empty();
		$.ajax({
		    url: $baseUrl+"data/dancestyle"
			,data: {id: $(e.target).attr("styleid") }
		    ,success: handleStyleRequest
		    ,error: handleStyleRequestError
		});
	}
	var handleStyleRequestError = $.danceful.empty;
	var handleStyleRequest = function(data){
		status.text("");
		detail.html(data);
	}
	var title, status, detail;

	$.danceful.dancepedia = function(){
		title = $("#center h3");
		status = $("#center h4");
		detail = $("#center .panelbody");
		$("#terms").autocomplete($baseUrl+"data/terms", {
			minChars: 1, autoChange: true, maxItemsToShow: 10, onItemSelect: handleTermChange
		});
		$("#danceTerms ul li").click(handleStyleClick);
	};
	$(function(){ new $.danceful.dancepedia() });
})(jQuery);