// Create a column view from ul tree.
column_view : function(){this.each(function(){// Each top level ul.
$(this).wrap('<div class="column-view clear-block"></div>').find('ul').each(function(n){// Each child ul.
// Get active trail. To-do: this may break if there's more than one active trail branching off in different directions.
var active =$('a.active', this.parentNode).length>0 ? true : false;$(this.parentNode).attr('match', 'match-'+n)// Custom attribute to match parent > child on click.
.addClass('has-child'+(active?' active':''));// Set 'has-child' class to filter clicks. 'active' class for active trail.
$(this).wrap('<div class="match-'+n+'" style="display:'+(active?'block':'none')+';overflow:hidden;"></div>').parents('div:eq(1)').append($(this.parentNode));// Appends the above wrap to ".parents('div:eq(1)')" -second div outwards.
});// Divide .column-view width by the number of visible columns then set the width of columns.
$('ul', this.parentNode).width(($(this.parentNode).width() / ++$('div:visible', this.parentNode).length)+'px').find('>li.has-child').click(function(e){
e.preventDefault();// Prevent default click-through of child anchor.
// Hide & show matching elements. 'div:eq(0)' = closest div parent from point of click.
$(this).parents('div:eq(0)').find('div:visible').hide().end().find('div.'+$(this).attr('match')).show();$(this).parents('div.column-view:eq(0)').each(function(){// Get into scope for div.column-view.
var num_c =++$('div:visible', this).length;// Number of visible columns.
var new_w =$(this).width() / num_c;// Divide .column-view width by the number of visible columns.
// Check the width of the first column with the last. Make sure they are equal to prevent un-equal column widths.
// Get difference between the old width and new. Used to prevent animations when there are no changes.
var col_1 =$('>ul', this).width();// First column.
var diff =(col_1 ==$('div:visible:eq('+(num_c -2)+') >ul', this).width() ? col_1 : 0)- new_w;// Give +/- 1 margin of tolerance to prevent un-neccessary animations. More columns the faster the animation.
if(diff <-1|| diff >1){$('ul', this).animate({width:new_w}, (500 / num_c)+123);}});$(this).addClass('focus').siblings('li.focus').removeClass('focus');// Add focus class for styling.
}).find('>a').dblclick(function(){ location.href=this.href;});// Double clicking loads .has-child links.
});return$(this).parent();// Returns div.column-view object.
}