/**
 * Makes containers with information expand [on mouse click] to reveal more details
 * Also toggles visibility of share links on mouse hover
 * @author rayho
 * 
 * HTML Markup
 * <div class="expandable">
 * 		Some preview information ...
 * 		<div class="share-container">
 * 			<span class="facebook"><a href="http://www.facebook.com/share.php?u=..." class="fb_share_link">Share on Facebook</a></span>
 * 			...
 * 		</div>
 * 		<div class="more-details">
 * 			Some more detailed information ...
 * 		</div>
 * </div>
 * 
 * CSS
 * .share-container { display: none; }
 * .more-details { display: none; }
 * 
 * JavaScript
 * $('.expandable').expandButton('.more-details', '.share-container');
 */
jQuery.fn.expandButton = function(moreDetailsExpr, shareContainerExpr) {
	return this.each(function() {
		var expandLink = $(this);
		var shareContainer = $(this).children(shareContainerExpr);
		expandLink.click(function(event) {
			// Allow anchors to perform normally
			if (event.target.nodeName.match(/a/i) == null) {
				event.preventDefault();
				expandLink.children(moreDetailsExpr).slideToggle('normal');
			}
		});
		expandLink.hover(
			function() {
				$(this).css({'background':'#ffffff'});
				shareContainer.show(0);
			},
			function() {
				$(this).css({'background-color':'#f1f1f1'});
				shareContainer.hide(0);
			}
		);
	});
}