$(document).ready(function(){
	$('div.more a').attr({ href:'javascript:void(1)' });
//	$('.wide_column_long').css({display:'none'});			// can do with .CSS instead so theres no flicker of hiding the large

	// Monitor/handle the MORE buttons
	$('.wide_column_short div.more a').click(function(){
		var short_div = $($(this).parents('.wide_column_short')[0]);
			//$($(this).parent().parent().parent().parent()[0]);
		var long_div = short_div.next();
		var to_height = long_div.height();
		short_div.hide();
		long_div.show();
		long_div.height( short_div.height() );
		long_div.animate( { height: to_height }, 500, function(){});  				
	});

	// Monitor/handle the MINIMIZE buttons
	$('.wide_column_long div.more a').click(function(){
		var long_div = $($(this).parents('.wide_column_long')[0]);
			//$($(this).parent().parent().parent().parent()[0]);
		var short_div = long_div.prev();
		var to_height = short_div.height();
		long_div.animate( { height: to_height }, 500, function(){
			long_div.hide();
			short_div.show();
			long_div.css({height:''});		// reset the height so its full height is allowed ( so it can be maximized again )
		});  				
	});
});