/*
 * <div class="expandable">
 * 
 * 	<div class="button">
 * 		Click to see options...
 * </div>
 * 	<div class="content">
 * 		blah blah blah
 * 	</div>
 * </div>
 * 
 * + button => /msucommon/images/p7t_plus.gif
 * - button => /msucommon/images/p7t_minus.gif
 * 
 */

var Expandable = new Class({
	initialize: function(el) {
		this.content = el.getElement('.content');
		this.button =  el.getElement('.button');
		this.hidden = true;
		
		if (this.content && this.button)
		{
			// toggle hidden or not
			this.button.addEvent('click', function() {
				this.hidden = (this.hidden) ? false : true;
				this.content.set('styles', {'display': ((this.hidden) ? 'none' : 'block')});
				
				this.button.set('styles', {'background-image': 
								((this.hidden) ? 'url(http://www.montana.edu/msucommon/images/p7t_plus.gif)' :
												'url(http://www.montana.edu/msucommon/images/p7t_minus.gif)' )});
				
			}.bind(this));
			this.content.set('styles', {'display': 'none'});
			this.button.set('styles', {'cursor': 'pointer',
										'padding-left':'11',
										'background-image': 'url(http://www.montana.edu/msucommon/images/p7t_plus.gif)',
										'background-position':'left',
										'background-repeat':'no-repeat'
										});
		}
	}
});

window.addEvent('domready', function() {
	$$('div.expandable').each(function (exp) {
		exp = new Expandable( exp );
	});
});