finder menu for jquery

jquery.finder.js

$.widget("ui.finder", {
	// default options
	options: {
		columns: 3,
		columnWidth: null,
		height: 400,
		hidden: true,
		listSelector: "ul, ol"
	},
	
	_create: function() {
		this.element.addClass("ui-finder");
		this.element.parent().addClass("ui-finder-container ui-widget ui-corner-all");
		this.element.css("height", this.options.height);
		//hide all child lists
		this.hideAllChildren();
		
		$("a", this.element)
			.addClass("ui-state-default ui-corner-all")
			.click($.proxy(this.listItemClicked, this))
			.hover($.proxy(this.listItemHovered, this), $.proxy(this.listItemOut, this));
		
		//you need to adjust for the first columns padding-left and the last columns padding-right
		//the below assumes a symmetric column setup.
		var adjustment = ($(this.element).outerWidth(true) - $(this.element).width());
		this.columnWidth = this.options.columnWidth || ($(this.element).innerWidth() + adjustment) / this.options.columns;

		this.currentColumnIndex = 0;
		$.each(this.element.find("li a ~ " + this.options.listSelector).siblings("a"), function(item){
			$(this).prepend($("<span>").addClass("ui-icon-triangle-1-e ui-icon finder-children-indicator ui-helper-clearfix"));
		});
		this.initializeColumn(this.element);
	},
	
	hideAllChildren: function(){
		this.element.find(this.options.listSelector).hide();
	},
	
	initializeColumn: function(list){
		$(list).show();
		//adjust for padding and margin
		var marginAndPadding = $(list).outerWidth(true) - $(list).width();
		var widthToSet = this.columnWidth - marginAndPadding;
		
		$(list).css("width", widthToSet).css("left", this.currentColumnIndex == 0 ? 0 : this.element.innerWidth());
		if(!list.hasClass("ui-finder-list")){
			list.addClass("ui-finder-list");
		}
		// this.setCurrentList(list)
	},
	
	listItemClicked: function(e){
		e.preventDefault();
		var $link = $(e.currentTarget);
		var childList = $link.siblings(this.options.listSelector).first();
		
		this.hideAllChildren();
		var $parents = $link.parents(this.options.listSelector);
		this.element.find("a").removeClass("ui-state-active");
		$link.addClass("ui-state-active")
		$parents.siblings("a").addClass("ui-state-active");
		$parents.show();
		this.currentColumnIndex = $parents.length;
		
		if(childList){
			this.initializeColumn(childList);
		}
		else {
		}
		
		this._trigger("select", e, {
			item: $link,
			isLeaf: childList == null || childList.length == 0
		});
	},
	
	listItemHovered: function(e){
		$(e.target).addClass("ui-state-hover");
	},
	
	listItemOut: function(e){
		$(e.target).removeClass("ui-state-hover");
	},
	
	value: function() {
		
	}
});