/**
 * Simple expand/collapse javascript functionality.  Attaches an 
 * instance of the Expander class to all objects on the page with the
 * "expander" CSS class.
 * 
 * $Id: expander.js 3214 2010-07-22 13:24:04Z wedig $
 */


// old style expander - do not use!  Remains only for legacy support
function expander(id){
	toDisplay = document.getElementById(id);

	if (toDisplay.style.display == 'none') {
		toDisplay.style.display = 'block';
	}
	else if (toDisplay.style.display == 'block') {
		toDisplay.style.display = 'none';
	}
}

function togglebutton(id,img_src1,img_src2){
	button = document.getElementById(id);
	
	if (button.src == img_src1){
		button.src = img_src2;
	}
	else if (button.src == img_src2){
		button.src = img_src1;
	}
}




// check for Prototype and Scriptaculous 
if (typeof Prototype == 'undefined') 
        throw new Error("Expanders cannot be used without the supporting core library.");
if (typeof Scriptaculous == 'undefined') 
        throw new Error("Expanders cannot be loaded without the supporting effects library.");

var Expander = Class.create({
	// the element to which this expander is attached
	_attachedElement: undefined,
	
	// the button control for toggling the expand/collapse state
	_toggleButton: undefined,
	
	_collapseButton: undefined,
	_expandButton: undefined,
	
	
	_isExpanded: null,
	
	initialize: function(element, isInitiallyVisible) {
		this._attachedElement = $(element);
		
		// if the style is an inline, make it inline-block, so we don't ignore height
		if (this._attachedElement.getStyle('display') == 'inline')
			this._attachedElement.setStyle({display: 'inline-block'});
		

		// create the expand and collapse buttons and hide them

		var imageOptions = {verticalAlign: 'middle', border: 'none', textDecoration: 'none', float: 'none', margin: '0'};
		
		// the expand button (anchor) and visible image element
		this._expandButton = new Element('a', {href: '#'});
		this._expandButton.update('Expand'); 
		this._attachedElement.insert({top: this._expandButton});
		
		var expandIcon = $(new Image()); 
		expandIcon.src = "/i/expandButton.png";
		expandIcon.alt = "Expand ";
		expandIcon.setStyle(imageOptions);
		expandIcon.addClassName('expanderButton');
		this._expandButton.insert({bottom: expandIcon});
		this._expandButton.observe('click', function(event) { expander.expand(); event.stop(); });
		this._expandButton.hide();

		// the expand button (anchor) and visible image element
		this._collapseButton = new Element('a', {href: '#'});
		this._collapseButton.update('Collapse'); 
		this._attachedElement.insert({top: this._collapseButton});
		
		var collapseIcon = $(new Image()); 
		collapseIcon.src = "/i/collapseButton.png";
		collapseIcon.alt = "Collapse ";
		collapseIcon.setStyle(imageOptions);
		collapseIcon.addClassName('expanderButton');
		this._collapseButton.insert({bottom: collapseIcon});
		this._collapseButton.observe('click', function(event) { expander.collapse(); event.stop(); });
		this._collapseButton.hide();
		
		
		// take the opposite of the initial state...
		this._isExpanded = !isInitiallyVisible;
		// ... and toggle it to set the current state to the input
		this.toggle();
				
		// and attach the onclick handlers
		var expander = this;
	},
	
	// toggles the current state from expanded to collapsed and back 
	toggle: function() {
		if (this._isExpanded)
			this.collapse();
		else
			this.expand();
	},
	
	expand: function() {
		// set the height to the automatic height 
		this._attachedElement.setStyle( {height: 'auto'} );
		
		// switch the controls
		this._collapseButton.show();
		this._expandButton.hide();
		
		this._isExpanded = true;
	},
	
	collapse: function() {
		// set the height to the line height		
		var lineHeight = this._attachedElement.getStyle("line-height");
		
		// TODO: figure out what to do with elements that don't have a pixel line-height (it defaults to "normal"!)
		var styleRE = /[0-9]+px/i;
		
		if ( !styleRE.test(lineHeight) ) {
			// set the width absurdly large and get the line height,
			//  since we can somewhat assume that it will only be one 
			//  line
			var oldWidth = this._attachedElement.getWidth();
			this._attachedElement.setStyle({width: '2000000px'});
			var lineHeight = this._attachedElement.getHeight()+'px';
			
			// restore the old width
			this._attachedElement.setStyle({width: oldWidth+'px'});
		}

		// set the height to the height of a single line, to hide the rest
		this._attachedElement.makeClipping().setStyle( {height: lineHeight} );

		// switch the controls
		this._collapseButton.hide();
		this._expandButton.show();

		this._isExpanded = false; 
	}
	
	
});





// create the "static" method for attaching expanders to appropriate 
//  elements
Expander.attachExpanders = function () {
	// find all expandable elements
	var expanderElements = $$('.expandable');
	
	// create and attach an expander to them
	expanderElements.each( function (element) {
		// check if there is already an expander attached to this item
		if ( (typeof element.expander) != 'undefined') 
			return;
		
		// create the expander collapsed and attached to element
		element.expander = new Expander(element, false);
	});
}


// automatically attach to all expanders when this script loads
Expander.attachExpanders();