/*works with comments, requires an outer wrapper div with the class of 'comment' and an interior div wrapping the content with class name of comment-body*/
window.addEvent('domready', function(){
	instantiate_comment_slide();
});

function instantiate_comment_slide(){
	$$('.comment').each(function(item){	
		var maxLoadHeight = 250;
		var theDiv = item.getElement('.comment-body');
		var theDivHeight = theDiv.getStyle('height').toInt();
		var theDivWidth = theDiv.getStyle('width').toInt();

		//only making this div morph if the native hieght is over maxLoadHeight
		if(theDivHeight > maxLoadHeight){	
			
			//inject a link to click on
			var slideToggle = new Element('div', {'html': '+ click here to view more', 'class': 'slide-toggle'});
			slideToggle.inject(theDiv);
			//lets fit the width exact
			slideToggle.setStyle('width', theDivWidth);
			var slideToggleHeight = slideToggle.getStyle('height').toInt();
			var maxHeight = theDivHeight + slideToggleHeight;

			var myFx = new Fx.Morph(theDiv, {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
			theDiv.setStyle('height', maxLoadHeight);

			//create onClick event
			slideToggle.addEvent('click', function(){
				var theDivCurrentHeight = theDiv.getStyle('height').toInt();
				//toggle height transition (hide-show)
				if(theDivCurrentHeight == maxHeight){
					//shrink
					myFx.start({'height': [theDivCurrentHeight, maxLoadHeight]});
					slideToggle.set('html', '+ click here to view more');
				}else if(theDivCurrentHeight == maxLoadHeight){
					//grow
					myFx.start({'height': [maxLoadHeight, maxHeight]});
					slideToggle.set('html', '- click here to view less');
				}
			});
		}
	});

	return true;
}